Tree Menu

Tree Menu displays any Joomla menu as an interactive collapsible tree or a horizontal dropdown navigation bar. Zero jQuery, zero framework dependencies - just lightweight vanilla JavaScript and CSS.

Best For

• Main menu (top navigation)
• Category navigation
• Documentation menus
• Knowledge base navigation
• Large multi-level menus
• File or folder style navigation
• Sidebar navigation for structured content
• Product category browsing
• Sitemap-style navigation

Two Layout Modes

• Vertical Tree - Collapsible tree with expand/collapse icons, optional CSS connecting lines, and smooth height animations
• Horizontal Dropdown - Top navigation bar with hover-activated dropdown submenus and nested flyout support

Icon Styles (Vertical)

• Choose from 5 built-in SVG icon styles: Chevron, Plus/Minus, Triangle, Arrow, or None. Customise icon size and colour independently.

Tree Lines (Vertical)

• Optional CSS-drawn connecting lines between parent and child items. Choose solid, dashed, or dotted style with custom colour.

Dropdown Styling (Horizontal)

• Custom background, border, and hover colours for dropdown panels. Nested submenus fly out to the right automatically.

Colour Control

• Set custom link, hover, and active page colours. Or leave it to inherit from your template.

Highlights

• Vanilla JavaScript - no jQuery dependency
• SVG icons - crisp at any size, no image sprites
• CSS custom properties for easy theming
• Smooth expand/collapse animations with 3 speed options
• Session-based state persistence - remembers which branches the user opened
• Auto-expands the path to the current active page
• Multiple instances on the same page
• Keyboard accessible (Tab, Enter, Space)
• ARIA tree roles for screen readers
• Respects prefers-reduced-motion
• Custom CSS field with CodeMirror editor
• Joomla WebAssetManager integration
• Joomla caching support
• Alternative layout overrides supported
• ~1 KB JS + ~3 KB CSS (minified)

Support

• Fast response support
• Configuration assistance