) } function NavigationMenuIndicator({ className, ...props }: React.ComponentPropsWithRef) { return (

) } export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLabel, NavigationMenuLink, NavigationMenuList, NavigationMenuPanel, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle, } ``` 3. Update the import paths to match your project. ## Usage ```tsx import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuPositioner, NavigationMenuPanel, NavigationMenuLink, NavigationMenuLabel, NavigationMenuIndicator } from "@/components/ui/navigation-menu" ``` ```tsx

Products

{product.title} {product.description}

Resources

{resource.title}

Pricing

``` Give each item with content a `value` so the menu can be opened by default or controlled with `value`, `defaultValue` and `onValueChange` on the root. The root also accepts `align` for the popover and `anchor` for either layout; in `panel` layout, pass a ref to the full-width bar as `anchor` so the panel spans its width. To style a top-level link like a trigger, pass `navigationMenuTriggerStyle()` as its `className`. Set `active` on a link to mark the current page. ## Examples ### By default A menu that opens the Products item on mount with `defaultValue`. **Example** ```tsx import { BookOpenIcon, ChartLineIcon, CodeIcon, LifebuoyIcon, LightningIcon, ShieldCheckIcon, } from "@phosphor-icons/react" import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu" const products = [ { title: "Analytics", description: "Track traffic and conversions in real time.", icon: ( ), }, { title: "Automations", description: "Run workflows when events happen.", icon: ( ), }, { title: "Security", description: "Single sign-on, audit logs, and roles.", icon: ( ), }, ] const resources = [ { title: "Documentation", icon: ( ), }, { title: "API reference", icon: ( ), }, { title: "Help center", icon: ( ), }, ] export default function NavigationMenuOpenByDefault() { return (

Products

{product.icon}
{product.title} {product.description}

Resources

{resource.icon} {resource.title}

Pricing

) } ``` ### Links only A bar of plain links styled like triggers, with the first marked `active`. **Example** ```tsx import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu" export default function NavigationMenuLinksOnly() { return (

{["Overview", "Customers", "Changelog", "Blog"].map( (label, index) => ( {label} ) )}

) } ``` ### Panel The `panel` layout anchored to a sticky header, with columns of labelled links and large primary links. **Example** ```tsx import * as React from "react" import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLabel, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu" const panelMenus = [ { value: "pos", label: "POS", explore: ["Terminals", "Handhelds", "Compare models"], shop: ["Shop POS", "Accessories", "Financing", "Trade in"], more: ["POS support", "Setup guide", "Integrations"], }, { value: "kitchen", label: "Kitchen", explore: ["Displays", "Printers"], shop: ["Shop Kitchen", "Mounts", "Cables"], more: ["Kitchen support", "Station layouts"], }, { value: "reservations", label: "Reservations", explore: ["Floor plans", "Waitlist", "Guest profiles", "Online booking"], shop: ["Plans", "Add-ons"], more: ["Reservations support", "Booking widget", "Calendar sync"], }, { value: "analytics", label: "Analytics", explore: ["Reports", "Forecasts"], shop: ["Plans", "Data exports"], more: ["Analytics support"], }, ] function PanelColumn({ label, links, size, }: { label: string links: string[] size?: "default" | "lg" }) { return (

{label}

{link}

) } function PanelExample() { const ref = React.useRef(null) return (

Store {panelMenus.map((menu) => ( {menu.label}

))} Support

Hestia POS

Orders, kitchen and tables in one place.

{["bg-blue-500", "bg-orange-500", "bg-green-500"].map((tint) => (

))}

) } export default function NavigationMenuPanel() { return (

) } ``` ## API Reference - `NavigationMenu` - `NavigationMenuList` - `NavigationMenuItem` - `NavigationMenuTrigger` - `NavigationMenuContent` - `NavigationMenuLink` - `NavigationMenuLink` ### NavigationMenu The root that manages open state and renders the popover or panel popup. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `layout` | `"popover" \| "panel"` | `"popover"` | Chooses the popup style: `popover` for a floating card, or `panel` for a full-width sheet with a backdrop. | Also accepts the props of the primitive parts it wraps. ### NavigationMenuList The horizontal list of top-level items. Also accepts the props of `React.ComponentPropsWithRef`. ### NavigationMenuItem One top-level entry, holding a trigger with content or a single link. Also accepts the props of `React.ComponentPropsWithRef`. ### NavigationMenuTrigger The button that opens its item's content, with a caret in the popover layout. Also accepts the props of the primitive part it wraps. ### NavigationMenuContent The content shown in the popup when its item is open. Also accepts the props of the primitive part it wraps. ### NavigationMenuPositioner The floating popover card used by the `popover` layout. Also accepts the props of the primitive part it wraps. ### NavigationMenuPanel The full-width sheet and backdrop used by the `panel` layout. Also accepts the props of the primitive part it wraps. ### NavigationMenuLink A navigation link, either in the bar or inside content. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `size` | `"default" \| "lg"` | `"default"` | Sets the link size; `lg` uses large, semibold text for primary destinations. | Also accepts the props of the primitive part it wraps. ### NavigationMenuLabel A small secondary heading above a group of links. Also accepts the props of `React.ComponentProps<"p">`. ### NavigationMenuIndicator A small arrow that fades in while its menu is open. Also accepts the props of `React.ComponentPropsWithRef`. ## Accessibility - Triggers are buttons with `aria-expanded` reflecting whether their content is open. - Enter opens a focused trigger, and Tab moves focus into the open content. - Escape closes the open content and returns focus to its trigger. - Hovering another trigger switches the open content. - A link with `active` set receives `aria-current="page"`. - The trigger's caret icon is `aria-hidden`. ## Notes - Styling hooks: `data-slot` values such as `navigation-menu`, `navigation-menu-trigger`, `navigation-menu-content`, `navigation-menu-popup`, `navigation-menu-panel`, `navigation-menu-backdrop` and `navigation-menu-link`. The root exposes `data-layout`; links expose `data-size` and `data-active`. - Triggers and links restyle themselves automatically in the `panel` layout, and panel list items animate in with a stagger that respects reduced motion. - `navigationMenuTriggerStyle` is exported for styling links as triggers. - Uses the `popover`, `background`, `accent` and `primary` colors, with a blurred `bg-black/20` backdrop (`backdrop-blur-lg`).