Navigation menu
A horizontal nav that opens one anchored panel at a time
Installation
npx shadcn@latest add @sudokw/components-navigation-menuimport { NavigationMenu } from "@gpuixui/components";Usage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@gpuixui/components/navigation-menu";
<NavigationMenu label="Product" onValueChange={setSection} value={section}>
<NavigationMenuList>
<NavigationMenuItem value="platform">
<NavigationMenuTrigger>Platform</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink onSelect={() => open("overview")}>
Overview
</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>;Composition
NavigationMenu
└── NavigationMenuList
└── NavigationMenuItem
├── NavigationMenuTrigger
└── NavigationMenuContent
└── NavigationMenuLinkAPI reference
| Part | Renders | Props |
|---|---|---|
NavigationMenu | role="navigation", named by label | label (required), value, defaultValue, onValueChange, openDelay, closeDelay, className, children |
NavigationMenuList | role="list" row | className, children |
NavigationMenuItem | role="listitem" | value (required), className, children |
NavigationMenuTrigger | button carrying aria-expanded and a fixed-slot chevron | every Button prop, plus disabled; trailing renders before the chevron; onActivate is the action's handler and onClick its deprecated alias |
NavigationMenuContent | anchored role="group" panel | className, children |
NavigationMenuLink | full-width ghost button row | onSelect; onActivate with onClick as the deprecated alias; every Button prop |
Keyboard
- Arrow DownCtrl+N
- opens the trigger's panel and moves focus into it
- Arrow LeftArrow Right
- moves between triggers
- HomeEnd
- the first or last trigger
- Escape
- dismisses the open panel
read from navigation-menu.tsx
Edit this page on GitHubapps/docs/content/docs/components/navigation-menu.mdx