---
title: Navigation Menu
description: "A collection of links for navigating websites, with animated popup panels."
---

```tsx
import * as stylex from '@stylexjs/stylex';

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { space, fontSize, fontWeight, container } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div {...stylex.props(styles.panel)}>
              <NavigationMenuLink href="#">
                <div {...stylex.props(styles.linkBody)}>
                  <span {...stylex.props(styles.linkTitle)}>Introduction</span>
                  <span {...stylex.props(styles.linkText)}>
                    Base UI + StyleX components you own.
                  </span>
                </div>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div {...stylex.props(styles.linkBody)}>
                  <span {...stylex.props(styles.linkTitle)}>Installation</span>
                  <span {...stylex.props(styles.linkText)}>
                    Set up StyleX and install components via the CLI.
                  </span>
                </div>
              </NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div {...stylex.props(styles.panel)}>
              <NavigationMenuLink href="#">
                <div {...stylex.props(styles.linkBody)}>
                  <span {...stylex.props(styles.linkTitle)}>Button</span>
                  <span {...stylex.props(styles.linkText)}>
                    Variants, sizes, and render-prop composition.
                  </span>
                </div>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div {...stylex.props(styles.linkBody)}>
                  <span {...stylex.props(styles.linkTitle)}>Dialog</span>
                  <span {...stylex.props(styles.linkText)}>
                    Modal dialogs with overlay and close button.
                  </span>
                </div>
              </NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Docs</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

const styles = stylex.create({
  panel: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s1,
    width: container.md,
  },
  linkBody: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s1,
  },
  linkTitle: {
    fontSize: fontSize.sm,
    fontWeight: fontWeight.medium,
  },
  linkText: {
    color: colors.mutedForeground,
    fontSize: fontSize.xs,
  },
});
```

## Install

```bash
npx shadcn@latest add @madeui/navigation-menu
```

## Usage

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

## Composition

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent />
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink />
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

## Link

A plain link item with no trigger or popup. `active` highlights the current page.

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

// Plain links with no trigger or popup — `active` marks the current page.
export default function NavigationMenuLinkExample() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuLink href="#" active>
            Overview
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Integrations</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Pricing</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}
```

## API reference

Built on [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu). `NavigationMenu` renders the shared popup (positioner + popup + viewport) itself — the popup morphs between panels as you move across triggers. All props are forwarded to the underlying Base UI parts; see the [Base UI Navigation Menu API reference](https://base-ui.com/react/components/navigation-menu#api-reference).

### NavigationMenu

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `'start' \| 'center' \| 'end'` | `'start'` | Popup alignment relative to the active trigger. |
| `style` | `StyleXStyles` | — | StyleX styles merged last — always win over the component's own styles. |

`NavigationMenuLink` supports `render` for framework link components (e.g. `render={<Link href="…" />}`) and highlights when `active`.