Header Menu Drawer

Theme: Multipurpose Fashion Theme

Overview

The menu drawer is a sliding panel that opens when users tap the hamburger icon on mobile (or optionally on desktop). It contains navigation, and may include search, footer links, social icons, or mega menu content. This guide covers how to enable, configure, and customize the menu drawer. It is written for merchants, prospective merchants, and theme reviewers.

Term	Description
Menu drawer	Sliding panel that contains the main navigation
Hamburger icon	Three-line icon that opens the drawer
Overlay	Darkened background behind the drawer; tap to close
Mega menu drawer	Two-panel layout: main items on left, mega content on right

📷 Image placeholder: Add a screenshot of the menu drawer open on mobile.

The menu drawer is typically the default mobile navigation. If it's not appearing:

Go to Online Store > Themes > Customize.
Open the Header section.
Switch to mobile preview.
Look for:
- Menu drawer - May be always on for mobile
- Enable menu drawer - Toggle if present
- Mobile menu style - Drawer vs. dropdown vs. full-screen
Ensure the hamburger icon is visible in the header.
Save.

Drawer Content and Layout

What can appear in the drawer

Element	Description	Where to enable
Main navigation	Primary menu from Header	Assigned in Header section
Search	Search bar or icon	Header section or drawer block
Footer links	Policy, contact links	Show footer content on mobile
Social icons	Social links	Theme settings + section toggle
Logo	Store logo	Show logo in mega menu drawer
Mega menu content	Two-panel mega menu	Enable mega menu drawer

Customizing drawer content

In Header section settings, find:
- Show footer content on mobile - Include footer links in drawer
- Show logo in mega menu drawer - Logo at top of drawer (when mega drawer is on)
- Show search - Search inside drawer (if supported)
Adjust block order if the theme uses blocks for drawer content.
Save and test on mobile.

📷 Image placeholder: Add a screenshot of Header section settings showing menu drawer options.

When Enable mega menu drawer is on, the drawer uses a two-panel layout:

Left panel: Main menu items.
Right panel: Mega menu content for the selected item (links, images, promos).

Enable Enable mega menu drawer in Header section settings.
Add Mega Menu Category blocks.
Set each block's Label to exactly match a navigation menu item.
Configure each block:
- Icon (optional)
- Links
- Featured collection
- Promo image
Save.

The right panel shows the content of the Mega Menu Category block whose label matches the tapped nav item.

📷 Image placeholder: Add a screenshot of the mega menu drawer with main items on the left and content on the right.

Opening and Closing

Opening

Tap hamburger icon - Standard way to open.
Some themes support swipe from edge to open (if enabled).

Closing

Tap overlay (dark area outside the drawer).
Tap close (X) button - If the theme provides one.
Swipe drawer closed - On some themes.
Tap a link - Drawer typically closes when navigating.

Keyboard and accessibility

Escape key - Should close the drawer when open.
Focus trapping - Focus should stay inside the drawer when open.
Focus return - When closed, focus should return to the hamburger icon.

Drawer Direction and Animation

Some themes let you choose:

Slide from left - Most common.
Slide from right - Alternative.
Animation speed - How fast the drawer opens and closes.

These are often in Theme settings or the Header section.

Some themes offer a menu drawer on desktop as a design choice:

Look for Show menu drawer on desktop or similar.
Useful for minimal layouts or when you want a consistent experience across devices.

Third-Party Apps

For advanced drawer behavior (animations, custom content, analytics), consider:

Mega Menu by Buddha Themes - Enhanced drawer with more options.
Mobile Menu apps - Custom mobile menu experiences.

Apps may replace or augment the theme's default drawer.

For merchants

Include search and key links (e.g. Contact, Policies) in the drawer for quick access.
Use the mega menu drawer if you have many categories; it keeps navigation organized.
Test the drawer on real devices for smooth open/close and touch targets.

Common mistakes

Mistake	Fix
Mega menu drawer empty	Add Mega Menu Category blocks with labels matching nav items
Drawer won't close	Check overlay and close button; test Escape key
Footer links missing	Enable Show footer content on mobile
Logo missing in drawer	Enable Show logo in mega menu drawer
Block label mismatch	Set Mega Menu Category label to exactly match nav item title

Multipurpose theme documentation

Overview

What Is the Menu Drawer?

Enabling the Menu Drawer