Navigation Menu
A collection of links for navigating websites, with viewport, indicator, and rich dropdown content panels — built on Radix UI's NavigationMenu primitive.
Install
npx shadcn@latest add https://atomx.acau.net/r/navigation-menu.jsonUsage
Use Navigation Menu for the primary site navigation header that hosts rich dropdown panels (feature grids, link lists, mega-menus). Reach for Menubar for desktop-style File/Edit/View bars, and Dropdown Menu for a single action menu off a button.
Wrap items in NavigationMenuList. Each NavigationMenuItem either uses NavigationMenuTrigger + NavigationMenuContent for a dropdown panel, or NavigationMenuLink for a plain link.
By default (viewport={true}) dropdown content renders inside a shared NavigationMenuViewport that is absolute top-full of the NavigationMenu root. That works when the root sits at the top of a page or header — but if the root lives inside a flex column that stretches it vertically, the viewport will render below the stretched root rather than below the trigger. In those cases (and on mobile, where the upstream shadcn demo uses viewport={isMobile}), pass viewport={false} so each panel renders inline directly under its item.
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/docs">Introduction</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Preview
Props
| Component | Notable props |
|---|---|
NavigationMenu | viewport (default true) — set to false to render NavigationMenuContent inline instead of in the floating viewport. value / onValueChange to control which item is open. |
NavigationMenuItem | Wraps a single top-level entry. |
NavigationMenuTrigger | The clickable label that opens the content panel. Renders with a rotating chevron. |
NavigationMenuContent | Rich panel content. Renders inside the viewport (or inline, if viewport={false}). |
NavigationMenuLink | A standalone link entry. Accepts standard <a> props plus Radix's active data-attribute. |
NavigationMenuIndicator | Optional triangle indicator that tracks the active item. |
NavigationMenuViewport | The floating panel where NavigationMenuContent renders. Auto-mounted by default. |
navigationMenuTriggerStyle | Exported cva helper for styling custom links to match the trigger. |