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