Cognition

Components

Navigation Menu

A horizontal menu for top-level navigation. Items can open rich dropdown panels on hover or keyboard focus.

Navigation Menu is distinct from Sidebar navigation. It is horizontal, sits at the top of a surface, and is tuned for mouse and keyboard interaction.

Preview

Rendered with live Cognition tokens. Hover or focus "Resources" to open its panel, no dark: classes.

Variants

ResourcesPricingDocs

Default (links only)

  • Components

  • Tokens

  • Icons

  • Guidelines

With dropdowns

  • Components

  • Tokens

  • Icons

  • Guidelines

With icons

  • Components

    Buttons, inputs, and the full library.

  • Tokens

    Color, type, spacing, and radius.

  • Icons

    The lucide set, sized and tinted.

  • Guidelines

    How and when to use each piece.

With descriptions

A plain link bar, or a trigger that opens a panel of links, optionally with icons or descriptions. The panels are shown open for reference.

States

ResourcesPricingDocs

Default. Resting items.

ResourcesPricingDocs

Item hover.

ResourcesPricingDocs

Item active (current page).

ResourcesPricingDocs

Keyboard focused.

  • Components

    Buttons, inputs, and the full library.

  • Tokens

    Color, type, spacing, and radius.

  • Icons

    The lucide set, sized and tinted.

  • Guidelines

    How and when to use each piece.

Dropdown open, with the first item hovered.

Hover and the open dropdown cannot be shown at rest, so those states render statically. The preview opens the real panel.

API

Component
Description
NavigationMenu
Root, also renders the viewport for dropdowns.
NavigationMenuList
The horizontal list of items.
NavigationMenuItem
A single top-level item.
NavigationMenuTrigger
An item that opens a dropdown on hover or focus.
NavigationMenuContent
The dropdown panel for a trigger.
NavigationMenuLink
A link, on its own or inside content.
NavigationMenuIndicator
The arrow that points at the open item.
NavigationMenuViewport
The animated container the panels render into.

Don't and Do

Don't

Don't use a Navigation Menu to move between sections of a single page. Jumping around within one view is the job of Tabs or an anchor list. A Navigation Menu is for moving across the app or site, not within a page.

Do
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
      <NavigationMenuContent>...</NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Use it for primary app or site navigation where top-level items may carry rich dropdown content.

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

export function PrimaryNav() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[420px] gap-1 p-2 md:grid-cols-2">
              <li>
                <NavigationMenuLink href="/components">
                  Components
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}