Tree Menu

Display any Joomla menu as a collapsible tree or horizontal dropdown bar. Lightweight, modern, and fully customisable.

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 layouts

• Vertical Tree Menu
• Horizontal Dropdown Menu

Features

Vertical Tree Mode

• Expand and collapse branches with smooth animations
• 5 SVG icon styles: Chevron, Plus/Minus, Triangle, Arrow, None
• Optional CSS tree lines (solid, dashed, or dotted)
• Adjustable indent depth, icon size, and icon colour
• Collapsed or expanded by default
• 3 animation speeds: Slow, Normal, Fast
• Remembers open branches as users navigate (session persistence)
• Auto-expands the path to the current page

Horizontal Dropdown Mode

• Top navigation bar with hover-activated dropdowns
• Nested submenus fly out to the right
• Custom dropdown background, border, and hover colours
• CSS-only - no JavaScript needed for hover interaction

Styling

• Custom link, hover, and active page colours
• Adjustable font size
• Custom CSS field with syntax highlighting
• CSS custom properties for advanced theming
• Works with any Joomla template

Performance

• Zero jQuery - pure vanilla JavaScript
• SVG icons - no image sprites or icon fonts
• ~1 KB JS + ~3 KB CSS (minified)
• Joomla WebAssetManager for proper asset loading
• Built-in caching support

Accessibility

• Full keyboard navigation (Tab, Enter, Space)
• WAI-ARIA tree roles (tree, treeitem, group)
• aria-expanded state on toggle buttons
• focus-visible outlines
• Respects prefers-reduced-motion

Back-end Screenshot