Overview
The Header component renders the top navigation bar that persists across all documentation pages. It contains the site title, search widget, theme selector, and social icons.
Look at the top of this page to see the header in action.
Structure
The header is divided into three sections:
┌─────────────────────────────────────────────────────┐
│ [Site Title] [Search] [Social] [Theme] [≡] │
│ └─ left └─ center └─ right group ──────│
└─────────────────────────────────────────────────────┘
Composed Components
The header automatically includes:
| Component | Position | Description |
|---|---|---|
SiteTitle | Left | Site name and optional logo |
Search | Center | Pagefind search trigger |
SocialIcons | Right | Social media links |
ThemeSelect | Right | Dark/light/auto theme picker |
MobileMenuToggle | Right (mobile) | Hamburger menu button |
Framework Header vs. Mitosis Header
There are two header implementations:
- Framework Header (
packages/framework/src/components/Header.tsx) — Auto-composes all sub-components from RouteData context - Mitosis Header (
packages/components/src/Header.lite.tsx) — Slot-based version for custom layouts
The framework version is what gets used by default in the Page component.
Responsive Behavior
| Screen Size | Behavior |
|---|---|
| Mobile | Social icons and theme select are hidden; hamburger menu shown |
Medium+ (md:) | Full header with all elements visible |
Header is hidden via .print:hidden |
CSS Classes
.header— Main container.title-wrapper— Site title area.right-group— Right-aligned section with social/theme.sl-flex— Flexbox layout.sl-hidden/.md:sl-flex— Responsive visibility