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 |
Tokens
CSS custom properties zyra-header reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-header-bg | var(--zyra-color-background) | Fill color once opaque (scrolled past the threshold, or transparent is false). |
Border--zyra-header-border | var(--zyra-color-border) | Bottom border color, tinted with the primary color on hover regions. |
Glass background--zyra-header-glass-bg | var(--zyra-color-header-glass-bg) | Translucent fill used with the backdrop blur while transparent and not yet scrolled. |
Backdrop blur--zyra-header-backdrop | var(--zyra-header-backdrop-base) | backdrop-filter value for the glass effect. |
Elevation shadow--zyra-header-shadow | var(--zyra-header-shadow-base) | Drop shadow applied once elevateOnScroll triggers. |
Divider--zyra-header-divider-color | var(--zyra-color-border) | Color of the section dividers inside the mobile drawer. |
Burger background--zyra-color-background-elevated | var(--zyra-color-bg-panel) | Fill color of the mobile menu toggle button. |
Burger icon--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Icon/border color of the toggle button, resting state. |
Drawer background--zyra-color-drawer-bg | var(--zyra-color-surface) | Fill color of the mobile nav drawer panel. |
Focus / active accent--zyra-color-primary | var(--zyra-color-accent) | Border-tint on scroll, and the toggle button's focus outline. |
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