Commmerce Docs
← Web Components

Web Components · Footer

<mmm-footer-menu>

Multi-column link list. Each top-level entry in the named navigation menu becomes a column heading; its children become the rows. Reads from window.PREFERENCES.navigationMenus by navigation-id, with a legacy fallback to STORE_INFO_DATA.navigations.footer.

Overview

Configure the menu in the editor (Preferences → Navigation menus); point this element at it via navigation-id. The column count is responsive — four CSS breakpoints (xl / desktop / tablet / small-mobile) each take their own count attribute.

Live-updates on commmerce:preferences-updated — editor saves push the new menu in immediately. The top-level entry's own URL becomes the column-heading link (rendered as the section title).

When to use

  • Inside <mmm-footer> for the link-column grid.
  • For sitemap-style footers ("About / Support / Shop / Legal" columns).
  • For multi-store footers where the menu is editor-driven per tenant.

Quick start

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

<mmm-footer-menu navigation-id="footer" desktop-column-count="4"></mmm-footer-menu>

Attributes

AttributeTypeDefaultDescription
navigation-idstring—ID of the saved menu in editor preferences. When omitted, falls back to the legacy menu named footer in store config.
desktop-column-countnumber4Number of columns above ~1024px.
tablet-column-countnumber3Columns between ~768–1024px.
mobile-column-countnumber2Columns between ~548–768px.
small-mobile-column-countnumber2Columns below ~548px.
menu-font-sizenumber17Section-heading font size (px).
menu-font-colorstringtheme primary textSection-heading colour.
menu-font-weightstringtheme button weightSection-heading font-weight.
menuList-font-sizenumber14Link-row font size (px).
menuList-font-colorstringtheme hyperlink colorLink-row text colour.
menuList-hover-colorstringtheme hyperlink hoverLink-row colour on hover.
font-familystringtheme description fontFont-family for the whole menu.
text-colorstringtheme primary textBase text colour for the menu host.
map-img-widthnumber264Width of an optional location-map thumbnail (px). Used when a column entry has an image asset.
map-img-heightnumber98Height of the location-map thumbnail (px).

Events

No custom events. Listens to commmerce:preferences-updated on window to re-render when the editor saves.

Live preview

store sample-store tag <mmm-footer-menu>

Examples

<mmm-footer-menu navigation-id="footer"></mmm-footer-menu>

2. Compact 3-column for narrower footers

<mmm-footer-menu
  navigation-id="footer"
  desktop-column-count="3"
  tablet-column-count="2"
  mobile-column-count="1"></mmm-footer-menu>
<mmm-footer-menu
  navigation-id="footer"
  menu-font-color="#fff"
  menuList-font-color="#9ca3af"
  menuList-hover-color="#c8a8ff"
  menu-font-size="13"
  menu-font-weight="700">
</mmm-footer-menu>