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-tree.html
<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.
Default density
<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-labelon the<nav>element to identify its purpose - Active state: Use
aria-current="page"on the link representing the current page - Open sections: Add the
openattribute to<details>elements that should be expanded by default - Styling: The
.treeclass 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