Navigation Menu
betaSite navigation whose top-bar items open menus — a short list of links, or a full mega menu — with hover intent and full keyboard support.
- Navigation
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add navigation-menunpm packages installed: class-variance-authority, radix-ui.
import { NavigationMenu } from "@/components/ui/navigation-menu";<NavigationMenu>
Every prop of Radix UI’s NavigationMenu.Root, plus className.
<NavigationMenuList>
Every prop of Radix UI’s NavigationMenu.List, plus className.
<NavigationMenuItem>
Every prop of Radix UI’s NavigationMenu.Item, plus className.
<NavigationMenuTrigger>
Every prop of Radix UI’s NavigationMenu.Trigger, plus className.
<NavigationMenuContent>
Every prop of Radix UI’s NavigationMenu.Content, plus className.
<NavigationMenuLink>
Every prop of Radix UI’s NavigationMenu.Link, plus className.
<NavigationMenuViewport>
Every prop of Radix UI’s NavigationMenu.Viewport, plus className.
<NavigationMenuIndicator>
Every prop of Radix UI’s NavigationMenu.Indicator, plus className.
Built on Radix NavigationMenu: a nav landmark whose triggers are buttons with aria-expanded and aria-controls. Arrow keys move along the bar, Enter or Space opens a panel, Tab moves into it, Escape closes it and returns focus to its trigger. Mark the current page's link with `active`, which sets aria-current="page". Give the root an aria-label when a page has more than one navigation. Panels grow from their trigger with the theme's float animations, which reduced motion collapses.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes