Horizontal Navigation
Navigation
Layout
Top navigation bar with logo, primary links, search, and user profile section.
Preview
Full-featured navigation with dropdown menus
Simple Links
A clean horizontal navigation bar with simple clickable links
Props
Component API reference
NavigationMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Trigger and content elements |
NavigationMenuLink
| Prop | Type | Default | Description |
|---|---|---|---|
href* | string | — | Link destination |
icon | LucideIcon | — | Icon component |
description | string | — | Link description text |
featured | boolean | false | Highlight as featured |
NavigationMenuDropdown
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 400 | Dropdown width in pixels |
children* | ReactNode | — | Dropdown content |
Usage
Import and implementation examples
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
NavigationMenuDropdown,
NavigationMenuSimpleLink,
} from '@/components/ui/navigation-menu'
import { Layers, Zap, Shield } from 'lucide-react'
// Navigation with dropdowns
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger id="products">
Products
</NavigationMenuTrigger>
<NavigationMenuContent id="products">
<NavigationMenuDropdown width={600}>
<div className="grid grid-cols-2 gap-3">
<NavigationMenuLink
href="/design-system"
icon={Layers}
description="Build beautiful interfaces"
featured
>
Design System
</NavigationMenuLink>
<NavigationMenuLink
href="/components"
icon={Zap}
description="Lightning-fast development"
>
Components
</NavigationMenuLink>
</div>
</NavigationMenuDropdown>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuSimpleLink href="/pricing">
Pricing
</NavigationMenuSimpleLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Dropdown menus: Hover-activated dropdowns with icons
- Active states: Visual indicator for current page
- Notification badge: Attention indicator on bell icon
- Responsive: Navigation links hide on mobile
- Featured items: Highlight important links
- Icon support: Icons and descriptions in dropdowns
- Search button: Integrated search trigger
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses nav element with role="navigation"aria-haspopup for dropdown triggersaria-expanded for dropdown statearia-current="page" for active linkKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between items |
| Enter | Open dropdown or follow link |
| Escape | Close dropdown |
| Arrow Down | Move to next item in dropdown |
Notes
- Focus is trapped in open dropdown
- Dropdown closes on click outside
- Screen reader announces navigation structure