Navigation Menu
@/components/kamod-ui/navigation-menu
Installation
Import NavigationMenu primitives and optional `navigationMenuTriggerStyle` from `@/components/kamod-ui/navigation-menu`.
pnpm add @kamod-ch/uiUsage
Wrap each branch in NavigationMenuItem. Pair NavigationMenuTrigger with NavigationMenuContent for flyouts; use NavigationMenuLink with `navigationMenuTriggerStyle()` for a top-level link that matches trigger styling. Submenus share one open panel with delay and skip-delay behavior similar to Radix.
import { NavigationMenu } from "@/components/kamod-ui/navigation-menu";<NavigationMenu />Demo
Full example from the shadcn/ui docs: Getting started list, responsive Components grid, and a trigger-styled Docs link.
Basic
Minimal trigger and content pair inside a list.
Link with trigger style
Use `navigationMenuTriggerStyle()` on NavigationMenuLink so a plain anchor matches submenu triggers (shadcn Link composition pattern).
Delay tuning
Adjust hover open delay and rapid-switch skip window (defaults 200ms / 300ms, Radix-like).
API Reference
Props, slots and variants for this component.
Navigation Menu
Navigation Menu component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| delayDuration | number | 200 |
| skipDelayDuration | number | 300 |
| dir | "ltr" | "rtl" | — |
| value (Item) | string | auto id |
| asChild (Link) | boolean | false |
| active (Link) | boolean | false |
Accessibility Notes
Triggers are buttons with aria-expanded; Escape and outside click close the menu. Keep link text descriptive; ensure focus order remains logical when mixing triggers and links.