Building a Purple Experience
Menus

Side menu configuration in the Purple Experience

3min

Per default, the Purple Experience will use the app_menu.xml to display a side menu that appears when tapping the burger menu for the web, the same as it works in the Apps.

In web, App_menu.xml is overridden via Hub Menus, which is overridden via menus.json.

Create a storefront/assets/menus.json

Add menus.json to urls.json.

The following is the default that you can use as a starting point:

JSON
JSON


Instead of 'app menu xml', you can also add any combination of Experience blocks there, including menus, buttons, custom HTML.

Messages for app-menu-xml

Error messages:

  • APP_MENU_XML_ERROR_MESSAGE
    • gets two arguments for %s, error code and error message
    • default: An Error occurred loading app_menu.xml: %s (message: %s)
  • APP_MENU_XML_ERROR_TITLE
    • default: Error loading app menu
  • APP_MENU_XML_ERROR_CONFIRM
    • default: Ok



Styling

By default, the app-menu-xml component pulls the color codes from the "App Design" page of the Purple Manager for that app or using the Purple Manager's defaults.

Available CSS variables to overwrite behaviour:

var

default

--sideMenuWidth

min(90vw, 250px)

--sideMenuBackground

var(--secondaryBackgroundColor) -> rgb(200, 200, 200)

--sideMenuTransitionTime

0.3s

--appMenuXmlItemNormalBg

App Design from Manager

--appMenuXmlItemHoverBg

App Design from Manager

--appMenuXmlIconNormal

App Design from Manager

--appMenuXmlIconActive

App Design from Manager

--appMenuXmlItemNormalText

App Design from Manager

--appMenuXmlItemHoverText

App Design from Manager