← 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-colorstringwhiteBackground colour of the menu bar.
dropdown-background-colorstringwhiteBackground colour of the hover dropdown panel.
host-font-familystringinheritFont family for the entire navigation block.
host-colorstringtheme primary / #111Base text colour for the navigation host.
menu-font-sizenumber12Top-level link font size (px).
menu-font-weightstring500Top-level link font weight.
menu-font-familystringinheritTop-level link font family.
uppercasebooleanfalseUppercase top-level menu items.
menu-text-colorstringtheme secondary / #666Top-level link text colour.
menu-hover-colorstringtheme primary / #111Top-level link text colour on hover.
menu-hover-background-colorstringtransparentBackground on hover.
menu-letter-spacingstring.2emLetter-spacing of top-level items.
xl-menu-gapstring2.25remGap between top-level items on xl viewports (default desktop spacing).
desktop-menu-gapstring0.625remGap between top-level items on the tablet-to-desktop range (769–1280px).
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-paddingstring0Outer padding of the dropdown container.
dropdown-item-colorstringtheme secondary / #666Dropdown link colour.
dropdown-item-hover-colorstringtheme primary / #111Dropdown link colour on hover.
dropdown-item-text-colorstringtheme secondary / #666Dropdown 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>