Horizontal site navigation that combines dropdown panels with direct links.
tsx
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu"const components = [ { title: "Alert Dialog", href: "#", description: "A modal dialog that interrupts the user with important content.", }, { title: "Hover Card", href: "#", description: "Preview content available behind a link.", }, { title: "Progress", href: "#", description: "Shows the completion progress of a task.", }, { title: "Scroll Area", href: "#", description: "Native scroll with a custom scrollbar.", }, { title: "Tabs", href: "#", description: "Layered sections displayed one at a time.", }, { title: "Tooltip", href: "#", description: "Info popup on hover or focus.", },]export function Example() { return ( <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Getting started</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-full min-w-0 max-w-[26rem] gap-0.5 sm:grid-cols-[.75fr_1fr]"> <li className="row-span-3"> <NavigationMenuLink href="#" className="flex h-full min-h-20 flex-col items-start justify-end rounded-md bg-accent/40 p-3 no-underline sm:min-h-24 sm:p-4" > <div className="mt-2 mb-1 text-sm font-medium text-foreground sm:mt-3 sm:mb-1.5 sm:text-base"> arctis/ui </div> <p className="text-[11px] leading-snug text-muted-foreground sm:text-xs"> Re-usable components built with Tailwind CSS. </p> </NavigationMenuLink> </li> <ListItem href="#" title="Installation"> How to install dependencies and structure your app. </ListItem> <ListItem href="#" title="Typography"> Styles for headings, paragraphs, lists...etc </ListItem> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Components</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-full min-w-0 max-w-[26rem] gap-0.5 sm:grid-cols-2"> {components.map((component) => ( <ListItem key={component.title} title={component.title} href={component.href} > {component.description} </ListItem> ))} </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>With Icon</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-40 gap-0.5 sm:w-44"> <li> <NavigationMenuLink href="#" className="flex-row items-center gap-2" > <CircleIcon className="size-3.5 text-muted-foreground" /> Backlog </NavigationMenuLink> </li> <li> <NavigationMenuLink href="#" className="flex-row items-center gap-2" > <CircleIcon className="size-3.5 text-muted-foreground" /> To Do </NavigationMenuLink> </li> <li> <NavigationMenuLink href="#" className="flex-row items-center gap-2" > <CircleIcon className="size-3.5 text-muted-foreground" /> Done </NavigationMenuLink> </li> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem className="hidden sm:block"> <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()} > Docs </NavigationMenuLink> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> )}function ListItem({ title, children, href, ...props}: React.ComponentPropsWithoutRef<"li"> & { href: string; title: string }) { return ( <li className="h-full" {...props}> <NavigationMenuLink href={href} className="h-full items-start gap-0.5"> <div className="flex flex-col gap-0.5"> <div className="text-xs font-medium text-foreground sm:text-sm"> {title} </div> <p className="line-clamp-2 text-[11px] leading-snug text-muted-foreground sm:text-xs"> {children} </p> </div> </NavigationMenuLink> </li> )}function CircleIcon({ className }: { className?: string }) { return ( <svg viewBox="0 0 24 24" fill="none" aria-hidden className={className}> <circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="2" /> </svg> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add navigation-menuUsage
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu"<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Item One</NavigationMenuTrigger> <NavigationMenuContent> <NavigationMenuLink href="#">Link</NavigationMenuLink> </NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList></NavigationMenu>Composition
NavigationMenu ├── NavigationMenuList │ ├── NavigationMenuItem │ │ ├── NavigationMenuTrigger │ │ └── NavigationMenuContent │ │ ├── NavigationMenuLink │ │ └── NavigationMenuLink │ └── NavigationMenuItem │ └── NavigationMenuLink └── NavigationMenuIndicator
Basic
A complete navigation example with getting-started links, a component grid, and icon links. The Docs link hides below sm.
tsx
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu"const components = [ { title: "Alert Dialog", href: "#", description: "A modal dialog that interrupts the user with important content.", }, { title: "Hover Card", href: "#", description: "Preview content available behind a link.", }, { title: "Progress", href: "#", description: "Shows the completion progress of a task.", }, { title: "Scroll Area", href: "#", description: "Native scroll with a custom scrollbar.", }, { title: "Tabs", href: "#", description: "Layered sections displayed one at a time.", }, { title: "Tooltip", href: "#", description: "Info popup on hover or focus.", },]export function Example() { return ( <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Getting started</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-full min-w-0 max-w-[26rem] gap-0.5 sm:grid-cols-[.75fr_1fr]"> <li className="row-span-3"> <NavigationMenuLink href="#" className="flex h-full min-h-20 flex-col items-start justify-end rounded-md bg-accent/40 p-3 no-underline sm:min-h-24 sm:p-4" > <div className="mt-2 mb-1 text-sm font-medium text-foreground sm:mt-3 sm:mb-1.5 sm:text-base"> arctis/ui </div> <p className="text-[11px] leading-snug text-muted-foreground sm:text-xs"> Re-usable components built with Tailwind CSS. </p> </NavigationMenuLink> </li> <ListItem href="#" title="Installation"> How to install dependencies and structure your app. </ListItem> <ListItem href="#" title="Typography"> Styles for headings, paragraphs, lists...etc </ListItem> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Components</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-full min-w-0 max-w-[26rem] gap-0.5 sm:grid-cols-2"> {components.map((component) => ( <ListItem key={component.title} title={component.title} href={component.href} > {component.description} </ListItem> ))} </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>With Icon</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-40 gap-0.5 sm:w-44"> <li> <NavigationMenuLink href="#" className="flex-row items-center gap-2" > <CircleIcon className="size-3.5 text-muted-foreground" /> Backlog </NavigationMenuLink> </li> <li> <NavigationMenuLink href="#" className="flex-row items-center gap-2" > <CircleIcon className="size-3.5 text-muted-foreground" /> To Do </NavigationMenuLink> </li> <li> <NavigationMenuLink href="#" className="flex-row items-center gap-2" > <CircleIcon className="size-3.5 text-muted-foreground" /> Done </NavigationMenuLink> </li> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem className="hidden sm:block"> <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()} > Docs </NavigationMenuLink> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> )}function ListItem({ title, children, href, ...props}: React.ComponentPropsWithoutRef<"li"> & { href: string; title: string }) { return ( <li className="h-full" {...props}> <NavigationMenuLink href={href} className="h-full items-start gap-0.5"> <div className="flex flex-col gap-0.5"> <div className="text-xs font-medium text-foreground sm:text-sm"> {title} </div> <p className="line-clamp-2 text-[11px] leading-snug text-muted-foreground sm:text-xs"> {children} </p> </div> </NavigationMenuLink> </li> )}function CircleIcon({ className }: { className?: string }) { return ( <svg viewBox="0 0 24 24" fill="none" aria-hidden className={className}> <circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="2" /> </svg> )}Link Component
Pass asChild to compose a router link such as Next.js Link. Use navigationMenuTriggerStyle() when the link sits in the top bar like a trigger.
import Link from "next/link"import { NavigationMenuItem, NavigationMenuLink, navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu"export function Example() { return ( <NavigationMenuItem> <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}> <Link href="/docs">Documentation</Link> </NavigationMenuLink> </NavigationMenuItem> )}API Reference
NavigationMenu
Opens on hover when the pointer supports hover; click toggles on touch and desktop. Closes on Escape, outside click, or pointer leave (hover devices).
| Prop | Type | Default |
|---|---|---|
| className | string | — |
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuLink href="/docs">Docs</NavigationMenuLink> </NavigationMenuItem> </NavigationMenuList></NavigationMenu>NavigationMenuList
| Prop | Type | Default |
|---|---|---|
| className | string | — |
<NavigationMenuList> <NavigationMenuItem>...</NavigationMenuItem></NavigationMenuList>NavigationMenuItem
The optional value identifies the open item. One is generated when omitted.
| Prop | Type | Default |
|---|---|---|
| value | string | — |
| className | string | — |
<NavigationMenuItem value="docs"> <NavigationMenuTrigger>Docs</NavigationMenuTrigger> <NavigationMenuContent>...</NavigationMenuContent></NavigationMenuItem>NavigationMenuTrigger
Includes a chevron that rotates when open. Shared styles: navigationMenuTriggerStyle().
| Prop | Type | Default |
|---|---|---|
| className | string | — |
<NavigationMenuTrigger>Docs</NavigationMenuTrigger>NavigationMenuContent
A portaled panel that stays within the viewport. It chooses start, center, or end alignment, flips above when needed, and caps its width and height.
| Prop | Type | Default |
|---|---|---|
| className | string | — |
<NavigationMenuContent> <NavigationMenuLink href="/docs">Overview</NavigationMenuLink></NavigationMenuContent>NavigationMenuLink
Pass asChild to merge onto a child link. Use active for the current page. Hover fills the full cell (w-full / h-full) with rounded-md.
| Prop | Type | Default |
|---|---|---|
| href | string | "#" |
| asChild | boolean | false |
| active | boolean | — |
| className | string | — |
<NavigationMenuLink href="/docs" active> Docs</NavigationMenuLink>NavigationMenuIndicator
Optional. Reserved for an active-item underline.
| Prop | Type | Default |
|---|---|---|
| className | string | — |
<NavigationMenuIndicator />