Navigation & Headers
Mobile Menu
Mobile off-canvas navigation with category grid and hierarchical menus.
Overview
The MegaMenuMobile component provides mobile shoppers with a touch-optimized, full-screen navigation experience. It presents the store's category structure in a compact grid format within an off-canvas sheet overlay. The component splits into three parts: MegaMenuMobile (wrapper with sheet and login), RootMenu (main category grid), and ChildMenu (subcategory view). Content slots accept CMS-managed content like CTA banners. Language and dark mode controls are relocated from the desktop top bar.
Key Business & UX Benefits
- Full-screen mobile nav keeps categories and subcategories easy to browse on small screens.
- Category grid and child menu reduce taps to reach deep categories.
- Content slots support CTA banners and promo content in the menu.
- Login and locale in the sheet keep the main header clean.
Pro-Tip from Larry: Use the category grid in the mobile menu so users see all top categories at once.
Usage
LuiMobileMenu
Feature List
- Category grid layout using compact node components
- Hierarchical navigation between root and child menus
- User login button in sticky header
- Free content slots for CTA banners or additional nodes
API Reference
LuiMobileMenu
No component metadata found for MobileMenu. Did you mean
LuiMobileMenu?LuiMobileMenuBanner
No component metadata found for MobileMenuBanner. Did you mean
LuiMobileMenuBanner?LuiMobileMenuButton
No component metadata found for MobileMenuButton. Did you mean
LuiMobileMenuButton?LuiMobileMenuButtonGrid
No component metadata found for MobileMenuButtonGrid. Did you mean
LuiMobileMenuButtonGrid?LuiMobileMenuList
No component metadata found for MobileMenuList. Did you mean
LuiMobileMenuList?LuiMobileMenuListItem
No component metadata found for MobileMenuListItem. Did you mean
LuiMobileMenuListItem?