Commmerce Docs
← Web Components

Web Components · Header

<mmm-header-user-account>

The account icon in the header. When logged out, links to login-href. When logged in, opens a dropdown with the user's name, email, and links to orders, wishlist, profile, and sign out.

Overview

Reads auth state from the Commmerce SDK. The dropdown is rendered via a portal so it isn't clipped by the header's shadow boundary. Set show-dropdown="false" to make the element behave as a plain link in both states.

The element dispatches commmerce:auth-changed on window after a successful sign-out — other components (cart icon, navigation) listen for this to refresh their UI.

When to use

  • Inside <mmm-header> as the sign-in / account entry point.
  • For stores that require accounts to checkout.
  • When you want a single icon that shows different UI for logged-in vs guest users.

Quick start

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

<mmm-header-user-account
  href="/account"
  login-href="/login"></mmm-header-user-account>

Attributes

AttributeTypeDefaultDescription
iconstringsample-store / user iconIcon image URL.
icon-widthnumber17Icon width (px).
icon-heightnumber17Icon height (px).
button-sizenumber38Width & height of the round button (px).
border-colorstringtheme / #e5e7ebBorder around the icon button.
background-colorstring#fffBackground colour of the icon button.
hover-background-colorstringtheme / #333Background on hover.
hover-border-colorstringtheme / #e5e7ebBorder colour on hover.
hrefstring/accountLogged-in destination (or the link target when show-dropdown="false").
login-hrefstring/loginLogged-out destination.
targetstring_selfAnchor target for navigation.
logged-inbooleanSDK-drivenManual override for the auth state — useful when you want to force a UI variant in the editor.
user-namestringSDK-drivenManual override for the user display name in the dropdown.
show-dropdownbooleantrueWhen false, click navigates instead of opening the dropdown.
trigger-menustringclickHow the dropdown opens — click or hover.
show-circular-backgroundbooleantrueToggle the round button background.
show-iconbooleantrueWhether the icon image renders.
mobile-hover-background-colorstring—Hover background colour on mobile.
mobile-hover-borderstring—Hover border on mobile.
mobile-show-circular-backgroundbooleantrueToggle the circular button background on mobile.
labelstring—Optional label rendered next to the icon (e.g. "Account").
label-colorstring#111111Label colour.
label-font-sizestring0.75remLabel font size.
label-font-weightstring600Label font weight.
label-letter-spacingstring0.18emLabel letter-spacing.
dropdown-border-colorstringthemeBorder colour of the account dropdown.
dropdown-name-colorstringtheme primary textColour of the user's name in the dropdown.
dropdown-email-colorstringtheme secondary textColour of the email line in the dropdown.
dropdown-item-colorstringtheme primary textColour of the dropdown action items (Orders, Wishlist, Sign out).

Events

EventTargetPayload
commmerce:auth-changedwindow{ loggedIn: boolean }

Dispatched after a sign-out completes. Other header pieces (cart, navigation) listen so they can refresh.

Live preview

store sample-store tag <mmm-header-user-account>

Examples

1. Default (SDK-driven auth state)

<mmm-header-user-account
  href="/account"
  login-href="/login"></mmm-header-user-account>

2. Hover-to-open dropdown

<mmm-header-user-account
  href="/account"
  login-href="/login"
  trigger-menu="hover"></mmm-header-user-account>

3. Plain anchor — no dropdown

<mmm-header-user-account
  href="/account"
  login-href="/login"
  show-dropdown="false"></mmm-header-user-account>

4. React to sign-out events

window.addEventListener('commmerce:auth-changed', (e) => {
  if (!e.detail.loggedIn) {
    console.log('User signed out — clearing local data');
    sessionStorage.clear();
  }
});