Layout UI

Navigation Menu

A horizontal navigation bar with hover-triggered popover panels for rich content areas, built on Base UI NavigationMenu. Exports navigationMenuTriggerStyle for styling standalone link items consistently.

Preview

Installation

bash
npx shadcn@latest add @layout/navigation-menu

Usage

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

Examples

Simple links

Guidelines for AI agents

Use for top-level site navigation with rich content panels (feature grids, doc links, hero cards). Use NavigationMenuLink with navigationMenuTriggerStyle() for simple link items without a dropdown. NavigationMenuContent is placed inside NavigationMenuItem alongside the trigger.

Never

  • Neveruse NavigationMenu for application toolbar actions; use Menubar instead
  • Neveruse NavigationMenu for a context or row action; use ContextMenu or DropdownMenu
  • Neveromit the NavigationMenuViewport; it is required for the panel animation container
  • Neverhardcode colours; all surfaces must resolve through token utilities

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-accent--layout-accent-fg--layout-border--layout-radius--layout-shadow-md--layout-duration-base