Tree Navigation

Collapsible tree navigation using native details/summary elements. Works without JavaScript.

Overview

This pattern creates a hierarchical navigation menu with collapsible sections. It uses native HTML5 <details> and <summary> elements for the expand/collapse functionality, requiring no JavaScript.

Key features:

  • Progressive enhancement - works without JavaScript
  • Native keyboard accessibility
  • Supports unlimited nesting depth
  • Active state via aria-current="page"
  • Compact density option via data-layout-density

Live Example

A tree navigation with multiple nesting levels and an active page indicator.

Source Code

Copy this snippet and customize the links, labels, and nesting structure for your navigation.

 <nav class="tree" aria-label="Section navigation" data-layout-density="compact"> <ul> <!-- Simple link --> <li><a href="/getting-started/">Getting Started</a></li> <!-- Active link (aria-current) --> <li><a href="/overview/" aria-current="page">Overview</a></li> <!-- Collapsible section with nested items --> <li> <details open> <summary>Components</summary> <ul> <li><a href="/components/button/">Button</a></li> <li><a href="/components/card/">Card</a></li> <li><a href="/components/modal/">Modal</a></li> </ul> </details> </li> <!-- Another collapsible section (closed by default) --> <li> <details> <summary>Utilities</summary> <ul> <li><a href="/utilities/spacing/">Spacing</a></li> <li><a href="/utilities/colors/">Colors</a></li> </ul> </details> </li> <!-- Deeply nested example --> <li> <details> <summary>Advanced</summary> <ul> <li> <details> <summary>Theming</summary> <ul> <li><a href="/theming/tokens/">Design Tokens</a></li> <li><a href="/theming/dark-mode/">Dark Mode</a></li> </ul> </details> </li> <li><a href="/advanced/plugins/">Plugins</a></li> </ul> </details> </li> </ul> </nav>

Variants

Default Density

Without data-layout-density="compact", the navigation has more generous spacing.

 <nav class="tree" aria-label="Example navigation"> <ul> <li><a href="#">Home</a></li> <li> <details open> <summary>Documentation</summary> <ul> <li><a href="#">Introduction</a></li> <li><a href="#">Quick Start</a></li> </ul> </details> </li> <li><a href="#">Support</a></li> </ul> </nav>

Usage Notes

  • Accessibility: Always include aria-label on the <nav> element to identify its purpose
  • Active state: Use aria-current="page" on the link representing the current page
  • Open sections: Add the open attribute to <details> elements that should be expanded by default
  • Styling: The .tree class applies Vanilla Breeze navigation styles automatically

Related

Nav Element

Native navigation element documentation

Details Element

Native disclosure widget documentation

Article Layout

Page layout with sidebar navigation