Header
An app-shell header with brand, nav and action slots — built-in mobile drawer, scroll elevation, and sticky/fixed positioning.
API
All inputs and configuration options for zyra-header.
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'static' | 'sticky' | 'fixed' | 'static' | Positioning behavior of the header |
variant | 'contained' | 'full-width' | 'contained' | Whether the bar content is max-width constrained or edge-to-edge |
align | 'split' | 'center' | 'split' | Layout of the start/nav/end zones |
size | 'sm' | 'md' | 'lg' | 'md' | Header height and padding density |
transparent | boolean | false | Renders transparent until scrolled past the threshold |
elevateOnScroll | boolean | true | Applies a shadow/border once scrollY passes scrollThreshold |
scrollThreshold | number | 12 | Scroll distance in pixels before elevation is applied |
mobileBreakpoint | number | 768 | Viewport width in pixels below which the nav collapses behind the burger menu |
mobileOpenChange (output) | boolean | - | Emits when the mobile menu is opened or closed |
scrolledChange (output) | boolean | - | Emits when the scroll-elevated state changes |
zyraHeaderStart (directive) | attribute | - | Marks projected content as the brand/logo slot |
zyraHeaderNav (directive) | attribute | - | Marks projected content as the primary nav; automatically collapses into the mobile menu |
zyraHeaderEnd (directive) | attribute | - | Marks projected content as the actions/CTA slot |
zyraHeaderMobileEnd (directive) | attribute | - | Optional extra content shown only inside the open mobile panel. Legacy: appended below the desktop nav in the drawer. Independent mode (see below): becomes the drawer's Content section |
zyraHeaderMobileNav (directive) | attribute | - | Independent mobile drawer navigation. Once projected, the drawer never falls back to zyraHeaderNav's content — desktop and mobile navigation become completely independent |
zyraHeaderMobileFooter (directive) | attribute | - | Optional drawer footer content (version info, links, branding) — only used in independent mode |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Rendered as a header element with role="banner"
- The mobile toggle button exposes aria-expanded and an aria-label that updates between "Open" and "Close navigation menu"
- Escape closes the open mobile panel
- Focus moves into the drawer on open and returns to the toggle button on close
- Desktop and mobile nav landmarks are mutually exclusive in the accessibility tree — only the currently relevant one is ever exposed to assistive tech