Header
Application header component with support for logo, navigation items, action buttons, and mobile menu. Can be sticky or transparent for hero sections.
Basic Example
With Logo Image
With Navigation Icons
Sizes
Sticky Header
Scroll content area (in actual usage, header would stick to viewport top)
Transparent Header
Hero Section
Transparent header overlays the background
With Mobile Menu
Mobile menu button appears on smaller screens (hidden on md+). Resize browser to see the button.
Multiple Action Buttons
Logo and Actions Only
Props
| Name | Type | Default | Description |
|---|---|---|---|
logo* | HeaderLogo | - | Logo configuration with text and/or image |
items | HeaderItem[] | [] | Navigation items to display in the header |
actions | React.ReactNode | - | Action buttons or elements to display on the right side |
sticky | boolean | false | Whether header sticks to top on scroll |
transparent | boolean | false | Whether header has transparent background |
size | 'sm' | 'md' | 'lg' | 'md' | Height and spacing of header (sm: h-14, md: h-16, lg: h-20) |
onMobileMenuClick | () => void | - | Callback for mobile menu button (shows button if provided) |
className | string | - | Additional CSS classes |
HeaderLogo Type
| Name | Type | Default | Description |
|---|---|---|---|
text | string | - | Logo text to display |
image | string | - | Logo image URL |
href | string | '/' | Logo link destination |
HeaderItem Type
| Name | Type | Default | Description |
|---|---|---|---|
label* | string | - | Display text for navigation item |
href* | string | - | Link destination |
active | boolean | - | Whether this is the current page |
icon | React.ReactNode | - | Optional icon to display before label |
Usage Guidelines
When to use
- •For primary application navigation at the top of every page
- •For consistent branding with logo placement
- •For global actions like search, notifications, or user account access
- •Use sticky variant when navigation should remain accessible while scrolling
- •Use transparent variant for hero sections with background images
Best practices
- •Keep navigation items concise (5-7 items maximum)
- •Use active state to indicate current page location
- •Place most important actions on the right side
- •Use consistent header across all pages for familiarity
- •Provide mobile menu callback for responsive navigation on small screens
- •Choose appropriate size based on content density needs
Accessibility
- •Uses semantic HTML with <header> and <nav> elements
- •Navigation has proper ARIA role
- •Active page marked with aria-current="page"
- •All interactive elements are keyboard accessible with visible focus indicators
- •Mobile menu button includes appropriate aria-label
- •Logo images include alt text for screen readers
Do's and Don'ts
✓ Do
- •Keep navigation items clear and concise (max 5-7 items)
- •Mark the current page with active state for wayfinding
- •Use consistent header placement and styling across all pages
- •Provide mobile menu for responsive navigation on smaller screens
- •Use sticky header for long pages where navigation should stay accessible
✗ Don't
- •Don't overcrowd navigation with too many items (causes cognitive overload)
- •Don't use different header styles across pages (breaks consistency)
- •Don't forget to mark the active page (users get lost)
- •Don't use transparent header on light backgrounds (readability issues)
- •Don't hide critical navigation on mobile without a menu button