website logo
➡️ purplepublish.com
Overview
Support
Setup
Editorial
Experience
Growth
Developers
Navigate through spaces
⌘K
Purple Experience
Views
Widget Component
Generic Widget
Structure of Dynamic resources
experience.config
Configure recurring texts in the messages.json
Purple Experience Builder
Using the Purple Experience Builder
Update your Purple Experience Version
Edit 'dynamic resources' from Purple Manager
Edit 'dynamic resources' in Experience Builder
Deploy Resources to Multiple Brands
Experience Builder Pipelines
Basic Experience Set-up
App onboarding configuration
Configure SEO attributes
Configure Error Pages
Configure the Side Menu in the Purple Experience
Configure a login page in Experience Builder
App menu configuration in Dynamic Resources
Configure the feedback email in the app with Experience Builder
Configure a coupon code page in Experience Builder
Configure a custom domain
Branding of your Experience
Experience Styling
Change the brand logo in the HTML Experience with Experience Builder
Configure brand colours in the HTML Experience with Experience Builder
Deposit a font in the HTML Experience with Experience Builder
Configure legal information pages in Experience Builder
Builder Pipelines Architecture Info
Simple static ads in Experience
Traffective ads in Experience
Action URLs and Deep linking
List of Action URLs
Deep linking
Migration
Docs powered by
Archbee
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"
      }]
    }
  ]
}


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?
PREVIOUS
Configure Error Pages
NEXT
Configure a login page in Experience Builder
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration
Messages for app-menu-xml
Styling
Docs powered by
Archbee
ImprintPrivacy Policy
© Sprylab Technologies GmbH 2023