Multipurpose theme documentation
Multipurpose Fashion Theme
Overlay Mobile Menu Drawer
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Overlays > Mobile Menu Drawer
Overview
The Mobile Menu Drawer is a slide-out panel that opens when customers tap the hamburger icon on mobile. It contains the main navigation (menus, links, blocks) and may include search, footer links, social icons, and nested panels. It slides in from the left with an overlay behind it.
Where It Appears
- Mobile/tablet — Primary way to access navigation
- Desktop — Optional; some header layouts use it on desktop too
- Header section controls when it shows
Files
| File | Purpose |
|---|---|
snippets/header-mobile-drawer.liquid |
Drawer markup, nav list, content panels |
sections/header.liquid |
Renders mobile drawer |
assets/section-header.js |
Opens/closes drawer, overlay, focus, Escape |
Structure
Mobile Drawer (data-mobile-drawer, aria-hidden)
├── Head
│ ├── Back button (data-drawer-back) — returns from sub-panel
│ ├── Title ("Menu")
│ └── Close button (data-mobile-menu-close)
├── Body (data-drawer-content)
│ ├── Nav list — menu blocks (tree, tabbed, column, etc.)
│ └── Content panels (data-drawer-content-panel) — sub-menus
Data Attributes
| Attribute | Element | Purpose |
|---|---|---|
data-mobile-drawer |
Drawer root | Identifies mobile drawer |
data-mobile-menu-close |
Close button | Closes drawer |
data-drawer-back |
Back button | Returns from sub-panel |
data-drawer-nav-trigger |
Nav item | Opens sub-panel |
data-drawer-content-panel |
Sub-panel | Nested menu content |
data-drawer-placeholder |
Placeholder | For dynamic content |
Overlay
-
Screen overlay (
data-screen-overlay) darkens the page when drawer is open - Clicking overlay closes the drawer
- On mobile stack, overlay may sync with drawer width (e.g. when sub-panel is open)
Drawer Content
Content comes from Header section blocks:
| Block type | Content |
|---|---|
| Tree menu | Navigation menu with nested links |
| Tabbed menu | Menu with tabs |
| Column menu | Multi-column links |
| Banner menu | Menu with banner image |
| Product menu | Featured product |
| Blog menu | Blog link |
| Contact menu | Contact info |
| Header button | CTA button |
Nested Panels
- Tapping a menu item with sub-links opens a content panel
- Back button returns to main nav
-
has-content-viewandhas-active-panelclasses control layout
Behavior
Opening
- Customer taps hamburger icon
- Drawer slides in from left
- Overlay appears
- Focus moves into drawer
Closing
- Overlay click — closes
- Close button — closes
- Escape key — closes
- Navigating to a page — closes on route change
Mega Menu Drawer Mode
When Enable mega menu drawer is on in the Header:
- Mobile drawer uses a two-panel layout (mega drawer)
- Left: main categories
- Right: mega content (links, collections, promos)
- See Mega Menu Drawer
Accessibility
aria-hiddentoggled on open/close- Focus trap when open
- Escape closes
- Back and close buttons have labels
Related Documentation
For detailed setup (blocks, mega drawer, footer content, etc.), see: