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 @deprecated Use `position="sticky"` instead |
| position | enum | "sticky" when `sticky` is true, otherwise "static" | Header positioning behavior. "fixed" removes from document flow. |
| responsiveHeight | enum | false | Enable taller header on larger screens (h-16 → sm:h-20) |
| skipToContentId | string | "main-content" | ID of the main content element for skip-to-content link |
| skipToContentLabel | string | "Skip to content" | Label for skip-to-content link |
| fullWidth | enum | false | Use full viewport width instead of container max-width |
| linkComponent | enum | — | Link component to use for navigation (defaults to anchor) |
| openMenuLabel | string | Open menu | Accessible label for the mobile menu button when closed (pre-translated). |
| closeMenuLabel | string | Close menu | Accessible label for the mobile menu button when open (pre-translated). |
| mobileMenuTitle | string | Navigation Menu | Screen-reader-only title for the mobile menu sheet (pre-translated). |
| mobileMenuDescription | string | Site navigation links | Screen-reader-only description for the mobile menu sheet (pre-translated). |
| 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 accept `openMenuLabel` and `closeMenuLabel` props (defaults to English)