Navigation & Headers
Mobile Menu (Basic)
Mobile off-canvas drawer paired with `HeaderBasic`, hosting links, a social row, locale selector, and dark-mode toggle.
Overview
MobileMenuBasic is the touch-optimized off-canvas drawer that pairs with HeaderBasic. It hosts the mobile navigation list, an optional social row, a locale selector, and a dark-mode toggle. The drawer renders inside a Sheet, so focus trap and Escape-to-close come from the underlying reka-ui Dialog. Press-state feedback on link items uses the CSS :active pseudo-class.
Pass items, social links, locale select, and the mode switcher as props on MobileMenuBasic itself, then mount it inside HeaderBasic's mobile slot.
Key Business & UX Benefits
- Touch-optimized drawer with main content visible behind it keeps mobile users grounded, so they can browse without losing context on the page they came from.
- Focus is trapped while the drawer is open, which removes a common accessibility failure and keeps keyboard and screen-reader users on a clean path.
- Locale switching, dark mode, and social links share one mobile surface, so secondary controls do not fight for space in the main header on small screens.
- Configured once in Studio and reused across pages, so marketing changes ship without engineering tickets.
Pro-Tip from Larry: Share the same items array between
MobileMenuBasic and the desktop menu component so both views stay in sync from a single config.Usage
LMobileMenuBasic
Feature List
- Off-canvas drawer renders inside a `Sheet`, inheriting focus trap and Escape-to-close from the underlying reka-ui Dialog
- Touch-optimized list with `:active` press-state feedback for tappable feel on mobile
- Hosts mobile navigation links, optional social row, locale selector, and a dark-mode toggle inside one surface
- Pairs with `HeaderBasic` — mount it inside the header's `mobile` slot
- Exposes items, social links, locale select, and the mode switcher as props for direct configuration
- Main content stays visible behind the drawer so mobile users keep context on the page they came from
API Reference
| Prop | Default | Type |
|---|---|---|
openrequired | boolean | |
menuItems | MenuItem[] { label, href, saleDesign, 3 more } | |
hasLanguageSwitcher | boolean | |
hasDarkModeSwitcher | boolean | |
socialLinks | SocialLinks { backgroundColor, textColor, text, 1 more } | |
background | "solid" | "transparent" | |
hasGlassEffect | boolean | |
banner | MobileMenuBannerProps { title, content, ctaLink, 1 more } | |
currentLocale | string | |
availableLocales | AvailableLocale[] { code, endonym, regionCode, 1 more } |
| Event | Type |
|---|---|
update:open | (event: "update:open", value: boolean): void |
localeChange | (event: "localeChange", locale: string): void |