Navigation & Headers
Header Basic
Compact, slot-based header with a frosted-glass effect on scroll, sticky option, light/dark logo variants, and CTA buttons.
Overview
HeaderBasic is the compact navigation header for landing pages and simpler sites. It accepts paired logo assets (logoLight and logoDark) and swaps between them based on the active color mode and the textColor prop, so the wordmark stays legible against both dark hero imagery and a light page background.
Visual options:
background:'transparent'(default) or'solid'for a flat surface.hasGlassEffect: when true (default), a backdrop-blurred layer fades in on scroll, giving the on-scroll frosted-glass look.sticky: toggles between CSSposition: stickyandposition: fixed. There is no hide-on-scroll variant; the header stays put once scrolling starts.padding:'none' | 's' | 'm' | 'l'for the vertical block padding.
Action slots in the right-hand cluster:
ctaButtonsrenders an array ofButtons with text, variant, and link.hasLanguageSwitchermountsLLanguageSwitcherbound tocurrentLocaleandavailableLocales; selecting a language emitslocaleChange.hasDarkModeSwitchermountsLDarkModeSwitch.- A mobile menu trigger emits
menuClickfor the hosting section to handle.
Composition is slot-based. HeaderBasic exposes desktop and mobile named slots that accept any menu component (typically NavigationMenu for desktop and MobileMenuBasic for mobile). It does not own menu open state; it emits menuClick and lets the consumer coordinate the drawer.
Key Business & UX Benefits
- Paired light/dark logo assets switch automatically with color mode and text-color context, so a single header config covers dark heroes, bright landing pages, and dark-mode sessions without per-page overrides.
- Frosted-glass-on-scroll keeps the header visible without dominating hero imagery, so landing pages feel premium and on-brand from the first paint.
- CTA buttons, language switcher, and dark-mode toggle plug in via props, so marketing can ship a fresh landing page header from config alone.
- Slot composition lets the same header back marketing sites, docs, and landing pages, so brand teams ship a consistent look across properties without forking code.
Pro-Tip from Larry: For landing pages, fill only the
desktop slot with a NavigationMenu and leave the mobile slot empty so the hamburger collapses cleanly.Usage
LHeaderBasic
Feature List
- Paired `logoLight` and `logoDark` assets swap with color mode and `textColor` so the wordmark stays legible on dark heroes and light backgrounds
- `background` of `'transparent'` or `'solid'` paired with `hasGlassEffect` produces a backdrop-blurred surface that fades in on scroll
- `sticky` prop toggles between CSS `position: sticky` and `position: fixed` once scrolling starts
- `padding` accepts `'none' | 's' | 'm' | 'l'` for vertical block padding
- Right-hand cluster slots in `ctaButtons`, `hasLanguageSwitcher`, and `hasDarkModeSwitcher` from props
- `localeChange` and `menuClick` emits let the hosting section coordinate locale state and the mobile drawer
- `desktop` and `mobile` named slots accept any menu component (typically `NavigationMenu` for desktop and `MobileMenuBasic` for mobile)
API Reference
| Prop | Default | Type |
|---|---|---|
logoLightrequired | MediaImage { type, sources, placeholder, 2 more } | |
logoDarkrequired | MediaImage { type, sources, placeholder, 2 more } | |
logoLink | / | string |
textColor | dark | "light" | "dark" |
sticky | false | boolean |
hasLanguageSwitcher | false | boolean |
hasDarkModeSwitcher | false | boolean |
ctaButtons | [] | { text, variant, link }[] |
background | transparent | "solid" | "transparent" |
hasGlassEffect | true | boolean |
padding | none | "none" | "s" | "m" | "l" |
currentLocale | string | |
availableLocales | AvailableLocale[] { code, endonym, regionCode, 1 more } |
| Slot | Type |
|---|---|
desktop | {} |
mobile | {} |
| Event | Type |
|---|---|
menuClick | (event: "menuClick"): void |
localeChange | (event: "localeChange", locale: string): void |