Commmerce Docs
← Web Components

Web Components · Header

<mmm-header-navigation-desktop>

Horizontal multi-level navigation for desktop viewports. Reads its menu structure from window.PREFERENCES keyed by navigation-id. Supports simple links and mega-menu-style dropdown items.

Overview

Menu data is configured in the editor under Preferences → Navigation menus; each saved menu has an ID. Set navigation-id to that ID and the component renders the menu — items with children render a dropdown on hover.

Below 1032px viewport width the desktop navigation hides itself — pair it with <mmm-header-navigation-mobile> for the mobile hamburger drawer.

When to use

  • Inside <mmm-header> as the main desktop nav.
  • For stores with category trees, mega menus, or curated top-level links.
  • Pair with <mmm-header-navigation-mobile> for full responsive cover.

Quick start

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

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

Attributes

AttributeTypeDefaultDescription
navigation-idstring—ID of the saved menu in editor preferences. Required.
background-colorstringtransparentBackground colour of the menu bar.
host-font-familystringinheritFont family for the entire navigation block.
host-colorstringinheritBase text colour for the navigation host.
menu-font-sizestring0.875remTop-level link font size.
menu-font-weightstring500Top-level link font weight.
menu-font-familystringinheritTop-level link font family.
uppercasebooleanfalseUppercase top-level menu items.
menu-text-colorstringinheritTop-level link text colour.
menu-hover-colorstringtheme accentTop-level link text colour on hover.
menu-hover-background-colorstringtransparentBackground on hover.
menu-letter-spacingstringnormalLetter-spacing of top-level items.
max-itemsnumber—Cap the number of top-level items rendered. Useful when the menu data has many entries but the design only allows a few.
dropdown-outer-paddingstring0.5remOuter padding of the dropdown container.
dropdown-item-colorstringinheritDropdown link colour.
dropdown-item-hover-colorstringtheme accentDropdown link colour on hover.
dropdown-item-text-colorstringinheritDropdown supporting text colour (used by mega-menu descriptions).

Events

No custom events. Internal hover state drives the dropdown opening — clicks navigate via standard anchors.

Live preview

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

Renders against navigation-id="main" as configured in sample-store's editor preferences.

Examples

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

2. Uppercase wide-spaced wordmark menu

<mmm-header-navigation-desktop
  navigation-id="main"
  uppercase="true"
  menu-letter-spacing="0.18em"
  menu-font-size="0.75rem"
  menu-font-weight="600"
  menu-hover-color="#c8a8ff">
</mmm-header-navigation-desktop>

3. Capped to 6 top-level items

<mmm-header-navigation-desktop
  navigation-id="main"
  max-items="6"
  dropdown-outer-padding="1rem"
  dropdown-item-hover-color="#6f43d6">
</mmm-header-navigation-desktop>