Disclosure Tree Navigation

This pattern creates a hierarchical navigation menu with collapsible sections, using native HTML5 <details> and <summary> for the expand/collapse behavior. No JavaScript required.

Key features:

• Progressive enhancement — works without JavaScript
• Native keyboard accessibility (Tab, Enter, Space)
• Supports unlimited nesting depth
• Active state via aria-current="page"
• Compact density option via data-layout-density

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

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

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

• 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
• Do not add role="tree" to nav.tree or its summaries. Partial ARIA is worse than none — it promises a widget contract this pattern does not implement.