Navigationmenu

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download navigation-menu -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu";
import { Icon } from "@/components/ui/icon";
const primitives = [
  {
    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.",
  },
  {
    title: "Scroll-area",
    href: "/docs/primitives/scroll-area",
    description: "Visually or semantically separates content.",
  },
  {
    title: "Tabs",
    href: "/docs/primitives/tabs",
    description:
      "Layered sections of content — known as tab panels — displayed one at a time.",
  },
  {
    title: "Tooltip",
    href: "/docs/primitives/tooltip",
    description:
      "A popup that displays information related to an element on focus or hover.",
  },
];
const statuses = [
  { icon: "CircleHelp", label: "Backlog" },
  { icon: "Circle", label: "To Do" },
  { icon: "CircleCheck", label: "Done" },
];
<div className="flex h-[420px] w-[720px] items-start justify-center pt-4">
  <NavigationMenu viewport>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2">
            {primitives.map((component) => (
              <li key={component.title}>
                <NavigationMenuLink href={component.href}>
                  <div className="text-sm font-medium">{component.title}</div>
                  <p className="text-sm text-neutral-mid">
                    {component.description}
                  </p>
                </NavigationMenuLink>
              </li>
            ))}
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>List</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="grid w-[300px] gap-4">
            <li>
              <NavigationMenuLink href="#">
                <div className="text-sm font-medium">Components</div>
                <p className="text-sm text-neutral-mid">
                  Browse all components in the library.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="text-sm font-medium">Documentation</div>
                <p className="text-sm text-neutral-mid">
                  Learn how to use the library.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="text-sm font-medium">Blog</div>
                <p className="text-sm text-neutral-mid">
                  Read our latest blog posts.
                </p>
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="grid w-[200px] gap-4">
            <li>
              {statuses.map((status) => (
                <NavigationMenuLink
                  key={status.label}
                  href="#"
                  className="flex-row items-center gap-2"
                >
                  <Icon name={status.icon} />
                  {status.label}
                </NavigationMenuLink>
              ))}
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#">Docs</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>;

Examples

Default

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu";
import { Icon } from "@/components/ui/icon";
const primitives = [
  {
    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.",
  },
  {
    title: "Scroll-area",
    href: "/docs/primitives/scroll-area",
    description: "Visually or semantically separates content.",
  },
  {
    title: "Tabs",
    href: "/docs/primitives/tabs",
    description:
      "Layered sections of content — known as tab panels — displayed one at a time.",
  },
  {
    title: "Tooltip",
    href: "/docs/primitives/tooltip",
    description:
      "A popup that displays information related to an element on focus or hover.",
  },
];
const statuses = [
  { icon: "CircleHelp", label: "Backlog" },
  { icon: "Circle", label: "To Do" },
  { icon: "CircleCheck", label: "Done" },
];
<div className="flex h-[420px] w-[720px] items-start justify-center pt-4">
  <NavigationMenu >
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2">
            {primitives.map((component) => (
              <li key={component.title}>
                <NavigationMenuLink href={component.href}>
                  <div className="text-sm font-medium">{component.title}</div>
                  <p className="text-sm text-neutral-mid">
                    {component.description}
                  </p>
                </NavigationMenuLink>
              </li>
            ))}
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>List</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="grid w-[300px] gap-4">
            <li>
              <NavigationMenuLink href="#">
                <div className="text-sm font-medium">Components</div>
                <p className="text-sm text-neutral-mid">
                  Browse all components in the library.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="text-sm font-medium">Documentation</div>
                <p className="text-sm text-neutral-mid">
                  Learn how to use the library.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="text-sm font-medium">Blog</div>
                <p className="text-sm text-neutral-mid">
                  Read our latest blog posts.
                </p>
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="grid w-[200px] gap-4">
            <li>
              {statuses.map((status) => (
                <NavigationMenuLink
                  key={status.label}
                  href="#"
                  className="flex-row items-center gap-2"
                >
                  <Icon name={status.icon} />
                  {status.label}
                </NavigationMenuLink>
              ))}
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#">Docs</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>;

Without Viewport

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu";
import { Icon } from "@/components/ui/icon";
const statuses = [
  { icon: "CircleHelp", label: "Backlog" },
  { icon: "Circle", label: "To Do" },
  { icon: "CircleCheck", label: "Done" },
];
<div className="flex h-[320px] w-[520px] items-start justify-center pt-4">
  <NavigationMenu viewport={false}>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="grid w-[200px] gap-4">
            <li>
              <NavigationMenuLink href="#">Components</NavigationMenuLink>
              <NavigationMenuLink href="#">Documentation</NavigationMenuLink>
              <NavigationMenuLink href="#">Blocks</NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="grid w-[200px] gap-4">
            <li>
              {statuses.map((status) => (
                <NavigationMenuLink
                  key={status.label}
                  href="#"
                  className="flex-row items-center gap-2"
                >
                  <Icon name={status.icon} />
                  {status.label}
                </NavigationMenuLink>
              ))}
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>;

Simple

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu";
<div className="flex w-[420px] justify-center py-6">
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuLink href="#">Home</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#">Docs</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#">Pricing</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.