Navigation & Headers
Top Bar
Desktop-only utility strip above the header with locale selector, dark-mode toggle, and information links.
Overview
TopBar is an optional desktop-only utility strip that sits above the main header. It hosts an informationLinks array (store locator, contact, help, etc.), a LanguageSwitcher, and a DarkModeSwitch. The bar is hidden below the lg breakpoint (hidden lg:flex); place the same controls inside the off-canvas mobile menu when you need them on phones.
Pick the look with modeColor:
modeColor | When to use |
|---|---|
'grey' | Subtle bar that inherits the surrounding light surface tone (the default). |
'black' | High-contrast bar with always-dark tone for headers that ride bright heroes. |
Toggle showLocaleSelector and showDarkModeToggle to drop either control. The component emits localeChange when the user picks a new locale.
Key Business & UX Benefits
- A dedicated strip carries service links, locale, and theme, so the main header stays focused on shopping and conversion without crowding.
- Two color modes (subtle grey, high-contrast black) cover most brand needs, so the top bar fits minimal and bold visual identities without custom theming work.
- Desktop-only by design keeps mobile viewport free for shopping, where every pixel above the fold counts.
- The
localeChangeemit gives international storefronts a single entry point for switching markets, instead of wiring up locale state per route.
Pro-Tip from Larry: Use
modeColor="grey" for a subtle top bar that reads as utility chrome; reach for 'black' only when the header sits over a bright hero and needs the contrast.Usage
LTopBar
Feature List
- Optional desktop-only utility strip that sits above the main header
- Hidden below the `lg` breakpoint via `hidden lg:flex` so it never crowds mobile viewports
- Hosts an `informationLinks` array for store locator, contact, help, and similar service links
- `modeColor` of `'grey'` or `'black'` picks between a subtle inherited tone and a high-contrast bar over bright heroes
- `showLocaleSelector` and `showDarkModeToggle` toggle either control independently
- `localeChange` emit gives international storefronts a single entry point for market switching
API Reference
| Prop | Default | Type |
|---|---|---|
modeColor | grey | "black" | "grey" |
informationLinks | { label, href }[] | |
showLocaleSelector | true | boolean |
showDarkModeToggle | true | boolean |
currentLocale | string | |
availableLocales | AvailableLocale[] { code, endonym, regionCode, 1 more } |
| Event | Type |
|---|---|
localeChange | (event: "localeChange", locale: string): void |