Navigation Menu
shadcn/ui
Horizontal top-level menu with mega-menu panels. For marketing sites or app top bars with many destinations.
@/components/ui/navigation-menuMega menu — hover to open panels
In context — app top navigation bar
thilo
DA
Page content area
Item types
| Type | Example code | Usage |
|---|---|---|
| Trigger + content | <NavigationMenuTrigger>Products</NavigationMenuTrigger><NavigationMenuContent>...</NavigationMenuContent> | Multi-item section with a dropdown panel |
| Plain link | <NavigationMenuLink className="px-3 py-1.5 text-sm">Pricing</NavigationMenuLink> | Single destination — no dropdown |
| Link inside panel | <NavigationMenuLink className="block rounded-md p-3 hover:bg-accent">...</NavigationMenuLink> | Destination row inside an open content panel |
Sub-components
| Component | Role |
|---|---|
| NavigationMenu | Root — manages open/close and keyboard navigation between triggers |
| NavigationMenuList | Horizontal list of top-level menu items |
| NavigationMenuItem | Wrapper for each menu entry — trigger + content pair |
| NavigationMenuTrigger | Button that opens the dropdown panel on hover/click |
| NavigationMenuContent | Dropdown panel — absolutely positioned below the trigger |
| NavigationMenuLink | Individual link inside the content panel — handles active state |
NavigationMenu vs alternatives
| Component | Use when |
|---|---|
| NavigationMenu | Marketing sites, public app top bars with 3–6 top-level sections and rich dropdown panels |
| Sidebar | App shell primary navigation — persistent, vertical, icon + label rows |
| Menubar | Desktop app-style menu (File, Edit, View) — persistent horizontal bar |
| DropdownMenu | Single button action menu — not a navigation structure |
On this page