UI ComponentsNavigation
Header
Site header with logo, navigation, search, and actions
Site header with logo, navigation, search, and action buttons.
Structure
Default Layout
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────────────────────┐ │
│ │ container │ │
│ │ ┌───────┐ ┌───────────────────────┐ ┌─────────┐ │ │
│ │ │ brand │ │ nav │ │ actions │ │ │
│ │ │ ┌───┐ │ │ Home Blog Pricing [▼] │ │ [🔍][⬇] │ │ │
│ │ │ │ 🏠│ │ │ │ │ │ │ │
│ │ │ └───┘ │ │ │ │ │ │ │
│ │ └───────┘ └───────────────────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Mobile Menu
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌───────┐ ┌─────────┐ │
│ │ brand │ │ toggle ☰│ │
│ └───────┘ └─────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ mobile-menu (expanded) │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ mobile-nav │ │ │
│ │ │ Home │ │ │
│ │ │ Blog │ │ │
│ │ │ Pricing │ │ │
│ │ │ Resources ▼ │ │ │
│ │ │ Documentation │ │ │
│ │ │ API Reference │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ mobile-actions │ │ │
│ │ │ [Sign In] [Get Started] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<Header
logo={{ src: '/logo.svg', alt: 'Company' }}
nav={[
{ label: 'Home', href: '/' },
{ label: 'Blog', href: '/blog' },
{ label: 'Pricing', href: '/pricing' },
{
label: 'Resources',
children: [
{ label: 'Documentation', href: '/docs' },
{ label: 'API Reference', href: '/api' },
{ label: 'Support', href: '/support' },
],
},
]}
actions={[
{ label: 'Sign In', href: '/login', variant: 'ghost' },
{ label: 'Get Started', href: '/signup', variant: 'primary' },
]}
search
sticky
/>Variants
<Header variant="default" /> // Logo left, nav center, actions right
<Header variant="centered" /> // Everything centered
<Header variant="split" /> // Logo center, nav split left/right
<Header variant="minimal" /> // Logo + hamburger onlyWith Search
<Header
search
searchPlaceholder="Search docs..."
onSearch={(query) => handleSearch(query)}
/>