---
title: Navigation Menu
description: A collection of links and menus for website navigation.
links:
  doc: https://base-ui.com/react/components/navigation-menu
  anatomy: https://base-ui.com/react/components/navigation-menu#anatomy
  api: https://base-ui.com/react/components/navigation-menu#api-reference
---

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

export function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Overview</NavigationMenuTrigger>
          <NavigationMenuContent className="max-w-sm">
            <ul className="grid grid-cols-2">
              {overviewLinks.map((item) => (
                <li key={item.href}>
                  <NavigationMenuLink href={item.href} className="flex-col items-start gap-0.5">
                    <h3 className="font-medium">{item.title}</h3>
                    <p className="text-muted-foreground">{item.description}</p>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuTrigger>Handbook</NavigationMenuTrigger>
          <NavigationMenuContent className="max-w-sm">
            <ul>
              {handbookLinks.map((item) => (
                <li key={item.href}>
                  <NavigationMenuLink href={item.href} className="flex-col items-start gap-0.5">
                    <h3 className="font-medium">{item.title}</h3>
                    <p className="text-muted-foreground">{item.description}</p>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuLink href="https://github.com/mui/base-ui" className="h-8">
            GitHub
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

const overviewLinks = [
  {
    href: "/react/overview/quick-start",
    title: "Quick Start",
    description: "Install and assemble your first component.",
  },
  {
    href: "/react/overview/accessibility",
    title: "Accessibility",
    description: "Learn how we build accessible components.",
  },
  {
    href: "/react/overview/releases",
    title: "Releases",
    description: "See what’s new in the latest Base UI versions.",
  },
  {
    href: "/react/overview/about",
    title: "About",
    description: "Learn more about Base UI and our mission.",
  },
] as const;

const handbookLinks = [
  {
    href: "/react/handbook/styling",
    title: "Styling",
    description:
      "Base UI components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.",
  },
  {
    href: "/react/handbook/animation",
    title: "Animation",
    description:
      "Base UI components can be animated with CSS transitions, CSS animations, or JavaScript libraries.",
  },
  {
    href: "/react/handbook/composition",
    title: "Composition",
    description:
      "Base UI components can be replaced and composed with your own existing components.",
  },
] as const;
```

## Installation

<ComponentSource name="navigation-menu" title="components/ui/navigation-menu.tsx" />

## Examples

### With submenus

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

export function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Overview</NavigationMenuTrigger>
          <NavigationMenuContent className="max-w-sm">
            <ul className="grid grid-cols-2">
              {overviewLinks.map((item) => (
                <li key={item.href}>
                  <NavigationMenuLink href={item.href} className="flex-col items-start gap-0.5">
                    <span className="font-medium">{item.title}</span>
                    <p className="text-muted-foreground">{item.description}</p>
                  </NavigationMenuLink>
                </li>
              ))}
              <li>
                <NavigationSubMenu>
                  <NavigationMenuItem>
                    <NavigationSubMenuTrigger>
                      <div className="flex flex-col items-start gap-0.5">
                        <div className="font-medium">Handbook</div>
                        <div className="text-muted-foreground">How to use Base UI effectively.</div>
                      </div>
                    </NavigationSubMenuTrigger>
                    <NavigationMenuContent className="max-w-sm">
                      <ul>
                        {handbookLinks.map((item) => (
                          <li key={item.href}>
                            <NavigationMenuLink
                              href={item.href}
                              className="flex-col items-start gap-0.5"
                            >
                              <h3 className="font-medium">{item.title}</h3>
                              <p className="text-muted-foreground">{item.description}</p>
                            </NavigationMenuLink>
                          </li>
                        ))}
                      </ul>
                    </NavigationMenuContent>
                  </NavigationMenuItem>
                </NavigationSubMenu>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

const overviewLinks = [
  {
    href: "/react/overview/quick-start",
    title: "Quick Start",
    description: "Install and assemble your first component.",
  },
  {
    href: "/react/overview/accessibility",
    title: "Accessibility",
    description: "Learn how we build accessible components.",
  },
  {
    href: "/react/overview/releases",
    title: "Releases",
    description: "See what’s new in the latest Base UI versions.",
  },
] as const;

const handbookLinks = [
  {
    href: "/react/handbook/styling",
    title: "Styling",
    description:
      "Base UI components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.",
  },
  {
    href: "/react/handbook/animation",
    title: "Animation",
    description:
      "Base UI components can be animated with CSS transitions, CSS animations, or JavaScript libraries.",
  },
  {
    href: "/react/handbook/composition",
    title: "Composition",
    description:
      "Base UI components can be replaced and composed with your own existing components.",
  },
] as const;
```

### Nested inline submenus

```tsx
"use client";

import { useMediaQuery } from "@base-ui/react/unstable-use-media-query";

import {
  NavigationInlineSubMenu,
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
  NavigationSubMenuTrigger,
} from "@/components/ui/navigation-menu";

export function NavigationMenuDemo() {
  const isDesktop = useMediaQuery("(min-width: 700px)", { defaultMatches: true });

  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
          <NavigationMenuContent className="max-w-2xl p-0">
            <NavigationInlineSubMenu
              orientation={isDesktop ? "vertical" : "horizontal"}
              defaultValue="developers"
            >
              <div className="grid grid-cols-1 overflow-hidden min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
                <NavigationMenuList className="overflow-x-auto p-2 md:flex-col md:overflow-y-clip md:overflow-x-visible md:border-r">
                  {audienceMenus.map((menu) => (
                    <NavigationMenuItem key={menu.value} value={menu.value}>
                      <NavigationSubMenuTrigger>
                        <div className="flex flex-col gap-0.5">
                          <span className="font-medium">{menu.label}</span>
                          <span className="text-muted-foreground">{menu.hint}</span>
                        </div>
                      </NavigationSubMenuTrigger>
                      <NavigationMenuContent className="flex w-auto flex-col gap-4 p-4">
                        <div>
                          <h4 className="font-medium text-base">{menu.title}</h4>
                          <p className="text-muted-foreground text-sm">{menu.description}</p>
                        </div>
                        <ul className="-mx-2">
                          {menu.links.map((link) => (
                            <li key={link.href}>
                              <NavigationMenuLink
                                href={link.href}
                                className="flex-col items-start gap-0.5"
                              >
                                <h5 className="font-medium">{link.title}</h5>
                                <p className="text-muted-foreground">{link.description}</p>
                              </NavigationMenuLink>
                            </li>
                          ))}
                        </ul>
                      </NavigationMenuContent>
                    </NavigationMenuItem>
                  ))}
                </NavigationMenuList>
                <NavigationMenuViewport />
              </div>
            </NavigationInlineSubMenu>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
          <NavigationMenuContent className="max-w-md p-4 pb-2">
            <div className="flex flex-col gap-4">
              <div>
                <h4 className="font-normal text-base">{guidesPanel.title}</h4>
                <p className="mt-1 text-muted-foreground text-sm">{guidesPanel.description}</p>
              </div>
              <ul className="-mx-2">
                {guideLinks.map((link) => (
                  <li key={link.href}>
                    <NavigationMenuLink href={link.href} className="flex-col items-start gap-0.5">
                      <h5 className="m-0 font-normal text-sm leading-4">{link.title}</h5>
                      <p className="m-0 text-neutral-500 text-sm dark:text-neutral-400">
                        {link.description}
                      </p>
                    </NavigationMenuLink>
                  </li>
                ))}
              </ul>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/react/overview/releases" className="h-8">
            Releases
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="https://github.com/mui/base-ui" className="h-8">
            GitHub
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

export const audienceMenus = [
  {
    value: "developers",
    label: "Developers",
    hint: "Go from idea to UI faster.",
    title: "Build product UI without giving up control",
    description:
      "Start with accessible parts and shape them to your app instead of working around a preset design system.",
    links: [
      {
        href: "/react/overview/quick-start",
        title: "Quick start",
        description: "Install Base UI and get your first interactive primitive on screen fast.",
      },
      {
        href: "/react/handbook/composition",
        title: "Composition",
        description: "Wrap and combine parts to match your product structure without hacks.",
      },
    ],
  },
  {
    value: "systems",
    label: "Design Systems",
    hint: "Keep patterns aligned across teams.",
    title: "Turn shared standards into working components",
    description:
      "Connect tokens, states, and accessibility rules once, then give every product team the same solid starting point.",
    links: [
      {
        href: "/react/handbook/styling",
        title: "Styling",
        description: "Map tokens and component states to your own CSS or utility setup.",
      },
      {
        href: "/react/overview/accessibility",
        title: "Accessibility",
        description: "Review keyboard support and semantic defaults before anything ships.",
      },
      {
        href: "/react/components/tooltip",
        title: "Tooltip",
        description: "Set one clear pattern for lightweight help, hints, and field guidance.",
      },
      {
        href: "/react/components/popover",
        title: "Popover",
        description: "Handle richer anchored panels like menus, inspectors, and onboarding.",
      },
    ],
  },
  {
    value: "managers",
    label: "Engineering Leads",
    hint: "Roll out shared UI without drag.",
    title: "Give squads clear defaults and room to move",
    description:
      "Use the docs to align on quality bars, upgrades, and extension points while still leaving teams space to customize.",
    links: [
      {
        href: "/react/overview/releases",
        title: "Releases",
        description: "Track version changes and migration notes before upgrades surprise teams.",
      },
      {
        href: "/react/handbook/typescript",
        title: "TypeScript",
        description: "See how the primitives type custom wrappers and shared abstractions.",
      },
      {
        href: "/react/handbook/forms",
        title: "Forms",
        description: "Standardize validation and field patterns teams reach for constantly.",
      },
    ],
  },
  {
    value: "startups",
    label: "Startups",
    hint: "Ship polished basics while things change.",
    title: "Get sturdy UI foundations in place early",
    description:
      "Cover the hard interaction details now so your team can spend more time on the product ideas that actually differentiate you.",
    links: [
      {
        href: "/react/overview/quick-start",
        title: "Quick start",
        description: "Get the package installed and your first component working in minutes.",
      },
      {
        href: "/react/components/menu",
        title: "Menu",
        description: "Add action menus with keyboard support and focus handling already done.",
      },
      {
        href: "/react/components/dialog",
        title: "Dialog",
        description: "Launch settings or upgrade flows without rebuilding focus management.",
      },
    ],
  },
] as const;

export const guidesPanel = {
  title: "Where teams usually start",
  description:
    "These are the docs people reach for first when they are turning a prototype into shared UI.",
} as const;

export const guideLinks = [
  {
    href: "/react/overview/accessibility",
    title: "Accessibility handbook",
    description: "Take a practical pass over focus order, semantics, and keyboard support.",
  },
  {
    href: "/react/handbook/composition",
    title: "Composition handbook",
    description: "Learn when to wrap parts, share behavior, and expose flexible APIs.",
  },
  {
    href: "/react/handbook/styling",
    title: "Styling handbook",
    description: "Apply tokens and state styles without fighting the underlying markup.",
  },
] as const;
```

### Custom Links

The `<NavigationMenu.Link>` part can be customized to render the link from your framework using the `render` prop to enable client-side routing.

```tsx title="Next.js Example"
import Link from "next/link";

import { NavigationMenuLink } from "@/components/ui/navigation-menu";

function NextLink(props: React.ComponentProps<typeof NavigationMenuLink>) {
  return <NavigationMenuLink render={<Link href={props.href} />} {...props} />;
}
```

### Large menus

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

export function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Services</NavigationMenuTrigger>
          <NavigationMenuContent className="no-scrollbar max-h-96 max-w-sm overflow-y-auto">
            <ul className="grid grid-cols-2">
              {servicesLinks.map((item) => (
                <li key={item.href}>
                  <NavigationMenuLink href={item.href} className="flex-col items-start gap-0.5">
                    <h3 className="font-medium">{item.title}</h3>
                    <p className="text-muted-foreground">{item.description}</p>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

const servicesLinks = [
  {
    href: "/services/analytics",
    title: "Analytics",
    description: "Insights and reporting to help you grow.",
  },
  {
    href: "/services/consulting",
    title: "Consulting",
    description: "Expert guidance to solve complex problems.",
  },
  { href: "/services/design", title: "Design", description: "Product and visual design services." },
  {
    href: "/services/development",
    title: "Development",
    description: "Custom software development and integrations.",
  },
  {
    href: "/services/cloud",
    title: "Cloud Services",
    description: "Scalable cloud infrastructure and management.",
  },
  {
    href: "/services/security",
    title: "Security",
    description: "Protection, audits, and compliance services.",
  },
  {
    href: "/services/support",
    title: "Support",
    description: "Dedicated support and maintenance plans.",
  },
  {
    href: "/services/marketing",
    title: "Marketing",
    description: "Growth marketing and acquisition strategies.",
  },
  { href: "/services/seo", title: "SEO", description: "Improve visibility and organic traffic." },
  {
    href: "/services/content",
    title: "Content",
    description: "Content strategy, creation, and distribution.",
  },
  {
    href: "/services/training",
    title: "Training",
    description: "Workshops and training for teams.",
  },
  {
    href: "/services/automation",
    title: "Automation",
    description: "Automate workflows to increase efficiency.",
  },
  {
    href: "/services/integration",
    title: "Integrations",
    description: "Connect tools and streamline data flows.",
  },
  {
    href: "/services/mobile",
    title: "Mobile",
    description: "Native and cross-platform mobile apps.",
  },
  {
    href: "/services/qa",
    title: "QA & Testing",
    description: "Quality assurance and testing services.",
  },
  {
    href: "/services/architecture",
    title: "Architecture",
    description: "System and solution architecture design.",
  },
  {
    href: "/services/devops",
    title: "DevOps",
    description: "CI/CD, monitoring, and infrastructure as code.",
  },
  {
    href: "/services/data",
    title: "Data Engineering",
    description: "Data pipelines, warehousing, and ETL.",
  },
  {
    href: "/services/ai",
    title: "AI & ML",
    description: "Machine learning models and AI integrations.",
  },
  {
    href: "/services/compliance",
    title: "Compliance",
    description: "Regulatory compliance and risk management.",
  },
];
```