---
title: Navigation Menu
description: A collection of links and menus for website navigation.
links:
doc: https://base-ui.com/react/components/navigation-menu
api: https://base-ui.com/react/components/navigation-menu#api-reference
---
```tsx
'use client';
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIcon,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPositioner,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
const overviewLinks = [
{
href: '#',
title: 'Quick Start',
description: 'Install and assemble your first component.',
},
{
href: '#',
title: 'Accessibility',
description: 'Learn how we build accessible components.',
},
{
href: '#',
title: 'Releases',
description: "See what's new in the latest versions.",
},
{
href: '#',
title: 'About',
description: 'Learn more about the project and our mission.',
},
] as const;
const handbookLinks = [
{
href: '#',
title: 'Styling',
description:
'Components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.',
},
{
href: '#',
title: 'Animation',
description:
'Components can be animated with CSS transitions, CSS animations, or JavaScript libraries.',
},
{
href: '#',
title: 'Composition',
description:
'Components can be replaced and composed with your own existing components.',
},
] as const;
export function NavigationMenuDefault() {
return (
Overview
{overviewLinks.map((item) => (
{item.title}
{item.description}
))}
Handbook
{handbookLinks.map((item) => (
{item.title}
{item.description}
))}
GitHub
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/navigation-menu
```
**Install the following dependencies:**
```bash
npm install @base-ui/react lucide-react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
import { ChevronDownIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
function NavigationMenu({
className,
...props
}: React.ComponentPropsWithRef) {
return (
);
}
function NavigationMenuList({
className,
...props
}: React.ComponentPropsWithRef) {
return (
);
}
function NavigationMenuItem({
className,
...props
}: React.ComponentPropsWithRef) {
return (
);
}
function NavigationMenuTrigger({
className,
...props
}: NavigationMenuPrimitive.Trigger.Props) {
return (
);
}
function NavigationMenuIcon({
className,
children,
...props
}: NavigationMenuPrimitive.Icon.Props) {
return (
{children ?? }
);
}
function NavigationMenuContent({
className,
...props
}: NavigationMenuPrimitive.Content.Props) {
return (
);
}
function NavigationMenuLink({
className,
...props
}: NavigationMenuPrimitive.Link.Props) {
return (
);
}
function NavigationMenuBackdrop({
className,
...props
}: NavigationMenuPrimitive.Backdrop.Props) {
return (
);
}
function NavigationMenuPortal({
...props
}: NavigationMenuPrimitive.Portal.Props) {
return (
);
}
function NavigationMenuPositioner({
className,
sideOffset = 12,
style: styleProp,
...props
}: NavigationMenuPrimitive.Positioner.Props) {
const defaultStyle = {
['--duration' as string]: '0.35s',
['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
};
return (
({
...defaultStyle,
...styleProp(state),
})
: { ...defaultStyle, ...styleProp }
}
{...props}
>
);
}
function NavigationMenuViewport({
className,
...props
}: NavigationMenuPrimitive.Viewport.Props) {
return (
);
}
function ArrowSvg(props: React.ComponentProps<'svg'>) {
return (
);
}
function NavigationMenuArrow({
className,
...props
}: NavigationMenuPrimitive.Arrow.Props) {
return (
);
}
export {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuIcon,
NavigationMenuContent,
NavigationMenuLink,
NavigationMenuBackdrop,
NavigationMenuPortal,
NavigationMenuPositioner,
NavigationMenuViewport,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
NavigationMenu,
NavigationMenuArrow,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPopup,
NavigationMenuPortal,
NavigationMenuPositioner,
NavigationMenuTrigger,
NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
```
```tsx
Item OneLink
```
## Examples
### Nested Submenus
```tsx
'use client';
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIcon,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuPositioner,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { ChevronRightIcon } from 'lucide-react';
const overviewLinks = [
{
href: '#',
title: 'Quick Start',
description: 'Install and assemble your first component.',
},
{
href: '#',
title: 'Accessibility',
description: 'Learn how we build accessible components.',
},
{
href: '#',
title: 'Releases',
description: "See what's new in the latest versions.",
},
] as const;
const handbookLinks = [
{
href: '#',
title: 'Styling',
description:
'Components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.',
},
{
href: '#',
title: 'Animation',
description:
'Components can be animated with CSS transitions, CSS animations, or JavaScript libraries.',
},
{
href: '#',
title: 'Composition',
description:
'Components can be replaced and composed with your own existing components.',
},
] as const;
export function NavigationMenuNested() {
return (
Overview