Overlay Mega Menu Drawer

Theme: Multipurpose Fashion Theme

Help Center > Overlays > Mega Menu Drawer

Overview

The Mega Menu Drawer is a desktop slide-out panel that opens when customers click or hover the navigation menu icon. It uses a two-panel layout: left panel with main categories, right panel with mega content (links, collections, featured product, promos). It has its own overlay (data-mega-drawer-overlay) separate from the mobile drawer overlay.

Where It Appears

Desktop — When Header has Enable mega menu drawer turned on
Triggered by the menu icon or nav trigger in the header

Files

File	Purpose
`snippets/mega-menu-drawer.liquid`	Drawer markup, panels, category blocks
`assets/mega-menu-drawer.js`	Opens/closes, panel switching, hover/click
`assets/mega-menu-drawer.css`	Drawer styles
`sections/header.liquid`	Renders mega drawer; provides mega_category_blocks

Structure

Mega Drawer (data-mega-drawer)
├── Panel 1 (data-mega-panel-1) — 280px
│   ├── Close button (data-mega-drawer-close)
│   ├── Logo (optional)
│   └── Nav list — Mega Menu Category blocks
│       └── Items (data-mega-item) with triggers (data-mega-trigger)
├── Panel 2 (data-mega-panel-2) — 700px
│   ├── Back button (data-mega-back) — mobile/sub-nav
│   └── Content panels (data-mega-content-panel) — one per category

Data Attributes

Attribute	Element	Purpose
`data-mega-drawer`	Drawer root	Identifies mega drawer
`data-mega-drawer-close`	Close button	Closes drawer
`data-mega-panel-1`	Left panel	Category list
`data-mega-panel-2`	Right panel	Mega content
`data-mega-trigger`	Category link	Opens Panel 2 content
`data-mega-content-panel`	Content panel	Links, collection, product, promo
`data-mega-back`	Back button	Returns from sub-view
`data-mega-item`	Category item	Wraps trigger and state

Overlay

Mega drawer overlay (data-mega-drawer-overlay) — dedicated overlay for mega drawer
Separate from mobile/screen overlay
Clicking overlay closes mega drawer

Panel 2 Content

Each Mega Menu Category block can have:

Content type	Block setting
Link list	Menu (navigation)
Collection	Featured collection
Featured product	Product
Promo	Image, heading, link

Behavior

Opening

Customer clicks menu icon or nav trigger (desktop)
Mega drawer slides in (typically from left)
Mega overlay appears
Panel 1 shows categories; Panel 2 shows content for focused/hovered category

Closing

Overlay click — closes
Close button — closes
Escape key — closes

Panel Switching

Hover (desktop): Hovering a category shows its content in Panel 2
Click (tablet/touch): Clicking may open Panel 2
Back button: Returns from a sub-panel if applicable

Header Settings

Setting	Effect
Enable mega menu drawer	Turns on mega drawer; uses Mega Menu Category blocks
Show logo in mega menu drawer	Shows store logo in Panel 1

Label — Must match a navigation menu item title
Icon — Optional image for category
Link — Category URL
Menu — Link list for Panel 2
Collection — Featured collection
Featured product — Product for Panel 2
Promo — Image, heading, button

Mobile Behavior

On mobile, when mega menu drawer is enabled, the mobile menu drawer may use the same two-panel layout or an accordion. Behavior depends on header configuration.

Accessibility

role="navigation", aria-label for main menu
aria-expanded, aria-controls on triggers
Focus trap when open
Escape and overlay for close

Multipurpose theme documentation