Side menu configuration in the Purple Experience

4min

Per default, the Purple Experience will use the app_menu.xml to display the side menu that appears when tapping the burger menu for the web, the same as it works in the Apps.
With below input you are able to adjust menus in web according to your liking. 
Configuration
Create a storefront/assets/menus.json
The following is the default that you can use as a starting point:
JSON
{
  "sideMenus": [
    {
      "id": "default",
      "side": "LEFT",
      "content": [{
        "type": "app-menu-xml"
      }]
    }
  ]
}
{
  "sideMenus": [
    {
      "id": "default",
      "side": "LEFT",
      "content": [{
        "type": "app-menu-xml"
      }]
    }
  ]
}
﻿
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
﻿

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

Updated 20 Mar 2024

Did this page help you?

Account Deletion from the App

Purchases, Entitlement & Coupons