DocumentationHeader
Header component for documentation sites with backdrop blur, fixed positioning, and responsive layout.
Features
- Backdrop blur effect
- Fixed positioning
- Responsive layout (mobile/desktop)
- Navigation menu integration
- Search integration
- Actions (theme toggle, GitHub, etc.)
- Mobile menu support
Usage
12345678910111213141516171819202122
API Reference
| Prop | Type | Default | Description |
|---|
| logo | React.ReactNode | - | Logo component or element |
| links | NavigationLink[] | [] | Array of navigation links |
| search | React.ReactNode | - | Search component |
| actions | React.ReactNode | - | Actions (ThemeToggle, GitHub link, etc.) |
| mobileMenu | React.ReactNode | - | Mobile menu component (hamburger menu) |
| blur | boolean | true | Enable backdrop blur effect |
| height | string | "60px" | Height of the header |
| maxWidth | string | "1536px" | Maximum width of the container |
| mobileBreakpoint | number | 1024 | Mobile breakpoint (in pixels) |
NavigationLink
| Prop | Type | Description |
|---|
| label | string | Link label |
| href | string | Link URL |
| external | boolean | Whether the link is external |
| target | string | Link target (e.g., "_blank") |
Examples
Custom Height and Max Width