Navigation Menu
Organize site navigation with optional disclosure panels.
Live example
A reviewed public example, isolated from this page.
import { NavigationMenu } from "heidi-ui";
import "heidi-ui/styles.css";Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.
Anatomy
content<div>The [popover=auto] disclosure panel; role=region named by its trigger; anchored below the trigger by default.
ARIA role: region
item<li>List item wrapping a Trigger+Content pair or a top-level Link. value identifies the open panel for controlled mode.
Uses native semantics
link<a>Navigation anchor; optional active sets aria-current=page. Usable as a top-level Item child or inside Content.
Uses native semantics
list<ul>Top-level <ul>; owns optional Arrow/Home/End focus movement among triggers and top-level links.
Uses native semantics
root<nav>The <nav> landmark; requires an accessible name via label.
ARIA role: navigation
trigger<button>Disclosure button: popoverTarget + aria-expanded/controls. Enter/Space toggles; ArrowDown opens and focuses the first link in Content.
Uses native semantics
Root properties
defaultValuelabelonValueChangevalue