Site Header
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { SiteHeader } from "@corew500/ui/site-header"
<SiteHeader>Content</SiteHeader>Variants
siteHeaderVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultsolidtransparent | default |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | enum | — | Logo element or component |
| logoHref | string | / | URL for logo link (defaults to "/") |
| navigation | NavItem[] | [] | Navigation items |
| actions | enum | — | Actions to show on the right side (buttons, etc.) |
| mobileMenuContent | enum | — | Custom content for mobile menu (replaces default nav rendering) |
| sticky | enum | false | Make header sticky |
| fullWidth | enum | false | Use full viewport width instead of container max-width |
| linkComponent | enum | a | Link component to use for navigation (defaults to anchor) |
| variant | enum | — | — |
Accessibility
Keyboard Navigation
- Keyboard accessible navigation and menu toggle
Screen Readers
- Mobile menu button has aria-label and aria-expanded
- Menu icons use aria-hidden="true"
- Sheet has sr-only title and description for screen readers
Additional
- - Uses semantic <header> element
- Navigation uses proper list and link semantics
Localization
Translatable Content
- - All text content flows through navigation prop
- NavItem labels and descriptions should be pre-translated
- Mobile menu button labels are hardcoded ("Open menu"/"Close menu")