Commmerce Docs
← Web Components

Web Components · Header

<mmm-header-navigation-mobile>

Hamburger trigger + slide-in side drawer. Same menu data source as the desktop nav (navigation-id → editor preferences). Supports nested submenus, submenu thumbnails, and animated open / close transitions.

Overview

Only renders below 1032px viewport width — above that it's display: none. Tap the hamburger icon to slide a drawer in from the left. Drawer width is configurable; the overlay dim and animation are built in.

Set show-submenu-images="true" to render thumbnails next to each submenu link — useful for category navigation that includes preview imagery.

When to use

  • Inside <mmm-header> as the mobile companion to <mmm-header-navigation-desktop>.
  • For nested category navigation that needs to fit on small screens.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-header-navigation-mobile navigation-id="main"></mmm-header-navigation-mobile>

Attributes

AttributeTypeDefaultDescription
navigation-idstring—ID of the saved menu in editor preferences. Required.
hamburger-iconstringbuilt-in SVGURL of the hamburger trigger icon.
hamburger-icon-widthnumber24Trigger icon width (px).
sidebar-widthnumber80Drawer width as a percentage of viewport (e.g. 80 → 80vw).
show-submenu-imagesbooleanfalseRender submenu thumbnails (from editor preferences).
submenu-image-widthstring2.5remWidth of submenu thumbnails.
submenu-image-heightstring2.5remHeight of submenu thumbnails.
submenu-image-object-fitstringcoverCSS object-fit for submenu thumbnails.
host-font-familystringinheritFont family for the entire drawer.
host-colorstringinheritBase text colour for the drawer host.
border-colorstring#e5e7ebBorder colour between drawer rows.
title-colorstring#111Colour of the drawer header (e.g. "Menu").
close-btn-colorstring#111Colour of the close button icon.
menu-colorstring#111Colour of top-level menu rows.
submenu-colorstring#444Colour of submenu rows.
submenu-hover-colorstringtheme accentColour of submenu rows on hover.

Events

EventTargetPayload
sidebar-openelement{}
sidebar-closeelement{}

Live preview

store sample-store tag <mmm-header-navigation-mobile>

Resize this iframe narrow to see the hamburger trigger appear.

Examples

1. Default

<mmm-header-navigation-mobile navigation-id="main"></mmm-header-navigation-mobile>

2. Drawer with submenu thumbnails

<mmm-header-navigation-mobile
  navigation-id="main"
  sidebar-width="85"
  show-submenu-images="true"
  submenu-image-width="3rem"
  submenu-image-height="3rem">
</mmm-header-navigation-mobile>

3. Dark-mode drawer styling

<mmm-header-navigation-mobile
  navigation-id="main"
  host-color="#fafafa"
  border-color="#1f1f1f"
  title-color="#fff"
  close-btn-color="#fff"
  menu-color="#fafafa"
  submenu-color="#9ca3af"
  submenu-hover-color="#c8a8ff">
</mmm-header-navigation-mobile>

4. Hook drawer open / close to scroll-lock

const nav = document.querySelector('mmm-header-navigation-mobile');
nav.addEventListener('sidebar-open',  () => document.body.style.overflow = 'hidden');
nav.addEventListener('sidebar-close', () => document.body.style.overflow = '');