Basic Experience Set-up

Configure the Side Menu in the Purple Experience

5min

Purple Experience
﻿
Available from version 2.5
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.
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 and more.
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
﻿

Updated 30 Aug 2023

Did this page help you?

Configure Error Pages

Configure a login page in Experience Builder

Docs powered by

Archbee

TABLE OF CONTENTS

Configuration

Messages for app-menu-xml

Styling

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