# Navigation Menu
A collection of links for navigating websites.
## When to use
* Build the main navigation of a website, with menus that show links and descriptions.
* Group many pages under a few top-level items.
## How it works
Parts: `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink` and `NavigationMenuIndicator`, plus `navigationMenuTriggerStyle`. With Base UI it wraps `@base-ui/react/navigation-menu` and adds `NavigationMenuPositioner`; with Radix it wraps `NavigationMenu` from `radix-ui` and adds `NavigationMenuViewport`. The official example uses `next/link`; this site does not run Next.js, so the demo uses ``.
## Example
### Base UI
```tsx
'use client'
import * as React from "react"
// next/link replaced by : this site does not run Next.js.
import {
CircleAlertIcon,
CircleCheckIcon,
CircleDashedIcon,
} from "lucide-react"
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/shadcn/base/ui/navigation-menu"
const components: { title: string; href: string; description: string }[] = [
{
title: "Alert Dialog",
href: "/docs/primitives/alert-dialog",
description:
"A modal dialog that interrupts the user with important content and expects a response.",
},
{
title: "Hover Card",
href: "/docs/primitives/hover-card",
description:
"For sighted users to preview content available behind a link.",
},
{
title: "Progress",
href: "/docs/primitives/progress",
description:
"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
},
{
title: "Scroll-area",
href: "/docs/primitives/scroll-area",
description: "Visually or semantically separates content.",
},
{
title: "Tabs",
href: "/docs/primitives/tabs",
description:
"A set of layered sections of content—known as tab panels—that are displayed one at a time.",
},
{
title: "Tooltip",
href: "/docs/primitives/tooltip",
description:
"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
},
]
export default function NavigationMenuDemo() {
return (
Getting started
Re-usable components built with Tailwind CSS.
How to install dependencies and structure your app.
Styles for headings, paragraphs, lists...etc
Components
{components.map((component) => (
{component.description}
))}
With Icon
-
}
>
Backlog
}
>
To Do
}
>
Done
}
className={navigationMenuTriggerStyle()}
>
Docs
)
}
function ListItem({
title,
children,
href,
...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
return (
}>
)
}
```
```tsx [components/ui/navigation-menu.tsx]
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
import { cva } from "class-variance-authority"
import { cn } from "cn"
import { ChevronDownIcon } from "lucide-react"
function NavigationMenu({
align = "start",
className,
children,
...props
}: NavigationMenuPrimitive.Root.Props &
Pick) {
return (
{children}
)
}
function NavigationMenuList({
className,
...props
}: React.ComponentPropsWithRef) {
return (
)
}
function NavigationMenuItem({
className,
...props
}: React.ComponentPropsWithRef) {
return (
)
}
const navigationMenuTriggerStyle = cva(
"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
)
function NavigationMenuTrigger({
className,
children,
...props
}: NavigationMenuPrimitive.Trigger.Props) {
return (
{children}{" "}
)
}
function NavigationMenuContent({
className,
...props
}: NavigationMenuPrimitive.Content.Props) {
return (
)
}
function NavigationMenuPositioner({
className,
side = "bottom",
sideOffset = 8,
align = "start",
alignOffset = 0,
...props
}: NavigationMenuPrimitive.Positioner.Props) {
return (
)
}
function NavigationMenuLink({
className,
...props
}: NavigationMenuPrimitive.Link.Props) {
return (
)
}
function NavigationMenuIndicator({
className,
...props
}: React.ComponentPropsWithRef) {
return (
)
}
export {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIndicator,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
NavigationMenuPositioner,
}
```
### Radix
```tsx
'use client'
import * as React from "react"
// next/link replaced by : this site does not run Next.js.
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/shadcn/radix/ui/navigation-menu"
const components: { title: string; href: string; description: string }[] = [
{
title: "Alert Dialog",
href: "/docs/primitives/alert-dialog",
description:
"A modal dialog that interrupts the user with important content and expects a response.",
},
{
title: "Hover Card",
href: "/docs/primitives/hover-card",
description:
"For sighted users to preview content available behind a link.",
},
{
title: "Progress",
href: "/docs/primitives/progress",
description:
"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
},
{
title: "Scroll-area",
href: "/docs/primitives/scroll-area",
description: "Visually or semantically separates content.",
},
{
title: "Tabs",
href: "/docs/primitives/tabs",
description:
"A set of layered sections of content—known as tab panels—that are displayed one at a time.",
},
{
title: "Tooltip",
href: "/docs/primitives/tooltip",
description:
"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
},
]
export default function NavigationMenuDemo() {
return (
Getting started
Re-usable components built with Tailwind CSS.
How to install dependencies and structure your app.
Styles for headings, paragraphs, lists...etc
Components
{components.map((component) => (
{component.description}
))}
Docs
)
}
function ListItem({
title,
children,
href,
...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
return (
)
}
```
```tsx [components/ui/navigation-menu.tsx]
import * as React from "react"
import { cva } from "class-variance-authority"
import { cn } from "cn"
import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
import { ChevronDownIcon } from "lucide-react"
function NavigationMenu({
className,
children,
viewport = true,
...props
}: React.ComponentProps & {
viewport?: boolean
}) {
return (
{children}
{viewport && }
)
}
function NavigationMenuList({
className,
...props
}: React.ComponentProps) {
return (
)
}
function NavigationMenuItem({
className,
...props
}: React.ComponentProps) {
return (
)
}
const navigationMenuTriggerStyle = cva(
"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
)
function NavigationMenuTrigger({
className,
children,
...props
}: React.ComponentProps) {
return (
{children}{" "}
)
}
function NavigationMenuContent({
className,
...props
}: React.ComponentProps) {
return (
)
}
function NavigationMenuViewport({
className,
...props
}: React.ComponentProps) {
return (
)
}
function NavigationMenuLink({
className,
...props
}: React.ComponentProps) {
return (
)
}
function NavigationMenuIndicator({
className,
...props
}: React.ComponentProps) {
return (
)
}
export {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
navigationMenuTriggerStyle,
}
```
## Installation
```bash
npx shadcn@latest add navigation-menu
```
## Reference
Official page: https://ui.shadcn.com/docs/components/navigation-menu