Navigation & Headers
Mobile Menu (Shop)
Mobile off-canvas drawer paired with `HeaderShop`, hosting a root grid plus a drill-in child menu, login, and locale.
Overview
MobileMenuShop is the catalog-aware off-canvas drawer that pairs with HeaderShop. It renders a root menu (grid + nav links + locale/dark-mode) plus a drill-in child menu animated via a slide transition; child menus rely on the mobileMenuNavigationKey provide/inject context exposed by the root. The drawer also surfaces login state and a locale-change emit without crowding the main header.
Pass items, social links, locale select, and the mode switcher as props on MobileMenuShop. Reuse the same navigationMenuItems on MenuSideBySide so the catalog stays in lockstep between desktop and mobile.
Key Business & UX Benefits
- Tappable category grid on entry gives mobile shoppers a fast lane to top-selling sections, lifting conversion on the surface where most ecommerce traffic now lands.
- Drill-in child menus with slide transitions handle deep catalogs without a wall of nested lists, so even large stores keep the mobile menu fast to scan and quick to use.
- Login, locale, and dark mode live inside the drawer, which keeps the visible header lean and protects ad-driven first impressions on mobile.
- Shared category data with
BlockMenuSideBySidekeeps desktop and mobile in sync, so a single catalog edit does not require parallel mobile work.
Pro-Tip from Larry: Share
navigationMenuItems across MenuSideBySide (desktop) and MobileMenuShop (mobile) so a category change ships to both breakpoints at once.Usage
LMobileMenuShop
Feature List
- Root view combines a tappable category grid with nav links and locale/dark-mode controls for fast top-level access
- Drill-in child menus animate via a slide transition for deep catalogs without nested-list overload
- Child menus rely on the `mobileMenuNavigationKey` provide/inject context exposed by the root
- Login state and a `localeChange` emit sit inside the drawer, keeping the visible header lean on phones
- Pairs with `HeaderShop` — mount it inside the header's `mobile` slot
- Shares `navigationMenuItems` with `MenuSideBySide` so a single catalog edit ships to both breakpoints
API Reference
| Prop | Default | Type |
|---|---|---|
rootMenurequired | RootMenuProps { headline, href, contentHeadline, 4 more } | |
categoryNodeUirequired | CategoryNodeVisualConfig { nodesVariant, nodesColorMode, megaMenu } | |
openrequired | boolean | |
isUserLoggedInrequired | boolean | |
currentLocale | string | |
availableLocales | AvailableLocale[] { code, endonym, regionCode, 1 more } |
| Slot | Type |
|---|---|
root-content-items | {} |
child-content-items | {} |
| Event | Type |
|---|---|
update:open | (event: "update:open", value: boolean): void |
localeChange | (event: "localeChange", locale: string): void |
| Prop | Default | Type |
|---|---|---|
title | string |
| Slot | Type |
|---|---|
default | {} |