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
{
  "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 12 Mar 2025

Did this page help you?

Account Deletion from the App

Purchases, Entitlement & Coupons