Navigation Menu
Responsive disclosure navigation with ordinary links and familiar Tab order.
Interactive preview
Installation
Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.
npx antiflex-ui@0.1.0-alpha.2 add navigation-menuThis site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.
Usage
<NavigationMenu aria-label="Resources">
<NavigationMenuList>
<NavigationMenuItem value="learn">
<NavigationMenuTrigger>Learn</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>API reference
All components forward native attributes, className, and refs to their underlying elements.
| Prop | Type | Default |
|---|---|---|
value / defaultValue / onValueChange | open item key / (string) => void | '' |
NavigationMenuItem: value | unique non-empty string | required |
Content: side / align / sideOffset / collisionPadding | native floating placement | bottom / start / 8 / 8 |
Link: href / aria-current | native anchor attributes | ordinary link semantics |
Accessibility
Uses a named nav, a real list and ordinary anchors, with disclosure buttons rather than menu roles. Every top-level button/link remains in normal Tab order; open links participate in that order. Enter/Space toggles; optional Down/Up opens and focuses the first/last panel link. Escape returns to the controlling button; moving focus or pointer outside dismisses. Link activation preserves native navigation and modifier keys. One open item per root; controlled value is its key and empty string closes it. Panels flip/clamp in the native top layer and reflow on narrow screens. Root forwards a nav ref; List ul, Item li, Trigger button, Content div and Link anchor refs. No hover-open behavior or mobile drawer is implied.