---
title: Navigation Menu
description: A collection of links for navigating websites.
icon: arrow-right-left
author:
  name: shadcn
  url: https://github.com/shadcn
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Base UI', url: 'https://base-ui.com/react/components/navigation-menu' },
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/navigation-menu' },
    { name: 'Lucide', url: 'https://lucide.dev/' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/navigation-menu
```

<ComponentPreview name="navigation-menu-demo" wide />

## When to use

The Navigation Menu component provides structured navigation with dropdowns and nested content. Use this decision tree to determine when it's appropriate:

```mermaid
graph TD;
    A[❓ Need site navigation?] --> B{Complex menu structure?};
    A --> C[ℹ️ Use simple navigation];
    B --> D{Dropdown content needed?};
    B --> E{Simple links only?};
    D --> F[✅ Use NavigationMenu];
    E --> G[ℹ️ Use nav with links];
    E --> H{Consistent styling needed?};
    H --> I[✅ Use NavigationMenu];
    H --> J[ℹ️ Use custom navigation];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class F,I recommended;
    class A,B,D,E,H decision;
    class C,G,J neutral;
```

## Usage

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuPositioner,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
```

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

## Examples

### Link Component

Use `variant="trigger"` on a top-level navigation link to match adjacent menu triggers. The default variant is for links inside a menu popup. The `render` prop supports your router's link component without changing its destination props.

```tsx
import { NavigationMenuLink } from '@/components/ui/navigation-menu';
```

```tsx {3-5}
<NavigationMenuItem>
  <NavigationMenuLink render={<Link href="/docs" />} variant="trigger">
    Documentation
  </NavigationMenuLink>
</NavigationMenuItem>
```

See also the [Base UI documentation](https://base-ui.com/react/components/navigation-menu) for handling client side routing.

### Link recipes

Choose a complete link recipe rather than overriding its padding, gap, colors, or shape:

| `variant`  | Purpose                                                               |
| ---------- | --------------------------------------------------------------------- |
| `default`  | Stacked title and description with an 8-pixel inset.                  |
| `trigger`  | A top-level destination styled like the adjacent menu triggers.       |
| `featured` | A promotional destination with a surface gradient and 24-pixel inset. |
| `icon`     | A compact icon and label row with an 8-pixel gap.                     |
| `rich`     | An icon alongside a title and description, with a 12-pixel gap.       |

Native link destinations, refs, and the `render` integration remain available for every recipe.

### Inline panel actions

Use `NavigationMenuPanelButton` for an action that changes the visible inline submenu, not for a destination. It is a native, non-submitting button composed with the registry Button. `direction="forward"` shows a trailing chevron and fills the row; `direction="back"` shows a leading chevron. Pass the panel-change callback through `onClick`.

Panel state and focus restoration belong to the composition: focus Back after entering a panel, then restore the originating action when returning. The inline submenu example below implements both transitions, including keyboard activation. Use `NavigationMenuLink` for actual navigation.

Popup dimensions and anchoring follow Base UI's measured values immediately. Entrance opacity/scale and directional content transitions remain; changing panel dimensions no longer interpolates layout properties.

### Panel dropdowns

<ComponentPreview
  name="navigation-menu-with-dropdowns-demo"
  description="Navigation menu with top-level items that open panel dropdowns of categorized links."
  wide
/>

### Multi-level nested

<ComponentPreview
  name="navigation-menu-nested-demo"
  description="Multi-level navigation menu via nested Root inside Content panels."
  wide
/>

### Inline submenus

<ComponentPreview
  name="navigation-menu-inline-submenu-demo"
  description="Navigation menu inline submenus that keep panel geometry stable between levels."
  wide
/>

### Large scrollable panel

<ComponentPreview
  name="navigation-menu-large-scrollable-demo"
  description="Large navigation panel using ScrollArea and max-height to handle tall content."
  wide
/>

### Custom link component

<ComponentPreview
  name="navigation-menu-custom-links-demo"
  description="Navigation menu links integrated with a router via the Link render prop."
  wide
/>

### Rich content mega-menu

<ComponentPreview
  name="navigation-menu-rich-content-demo"
  description="Navigation menu mega-panel with a grid of icons, titles, and descriptions."
  wide
/>

### Featured card

<ComponentPreview
  name="navigation-menu-featured-card-demo"
  description="Navigation menu panel with a featured card alongside standard link columns."
  wide
/>

### Vertical orientation

<ComponentPreview
  name="navigation-menu-vertical-demo"
  description="Vertically oriented navigation menu for sidebar mega-nav."
/>

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://base-ui.com/react/components/navigation-menu" text="Docs" />
  <ExternalLink href="https://base-ui.com/react/components/navigation-menu#api-reference" text="API Reference" />
</div>

## Keyboard interactions

| Key                             | Action                                                            |
| ------------------------------- | ----------------------------------------------------------------- |
| `Tab` into `NavigationMenuList` | Focus lands on the first top-level trigger.                       |
| `ArrowLeft` / `ArrowRight`      | Moves between top-level triggers.                                 |
| `ArrowDown` / `Enter` / `Space` | Opens the focused trigger's content panel and moves focus inside. |
| `Tab` inside a content panel    | Cycles focus through the panel's links.                           |
| `Escape`                        | Closes the open panel and restores focus to the trigger.          |

## Accessibility

- The menu container is `role="menubar"` (or `navigation` semantics when used as site nav). Use a real `<nav>` wrapper
  and give it an `aria-label` when there are multiple navigation regions on the page.
- Links inside panels must be real `<a>` elements — pass a framework-router link via the `render` prop on
  `NavigationMenuLink` so keyboard activation and focus handling still work.
- Always provide a keyboard-accessible hamburger / skip-link on small screens; the navigation menu primitive is
  desktop-first.

## Credits

- We use [Base UI](https://base-ui.com/react/components/navigation-menu) for the navigation menu component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/navigation-menu) for the navigation menu style.