Navigation & Headers
Top Bar
Optional top bar above header with locale switching and dark mode toggle.
Overview
The TopBar component provides international shoppers with quick access to essential site-wide controls above the main header. It enables locale switching with currency and language updates, plus dark mode toggling with persistent preferences. Two visual styles (default and black) accommodate different header designs. On mobile devices, these functions relocate to the off-canvas menu for a compact mobile header. Optional for single-locale stores.
Key Business & UX Benefits
- Locale and dark mode in one bar keep the main header focused on nav and search.
- Persisted preferences keep language and theme across sessions.
- Optional info links support store locator, contact, or help.
- Mobile relocation to off-canvas keeps the header clean on small screens.
Pro-Tip from Larry: Use Top Bar for locale and dark mode so the main header stays focused on navigation.
Usage
LuiTopBar
Feature List
- Language/locale selector with cookie persistence
- Dark mode toggle with saved preference
- Up to 3 configurable informational links per locale
- Desktop-only with mobile functions in off-canvas menu
API Reference
No component metadata found for TopBar. Did you mean
LuiTopBar?