Side menu configuration in the Purple Experience
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:
Instead of 'app menu xml', you can also add any combination of Experience blocks there, including menus, buttons, custom HTML.
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
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 |