Salesforce Docs Portal

Set Up a Hamburger Menu

Configure a hamburger menu in the POS app to access a wide range of features without cluttering the screen. This setup streamlines navigation, making it easier for users to find and use essential functions quickly.

A configured Point of Sale layout can provide a number of direct links for standard workflows whereas a hamburger menu can provide a longer list of links that can access different features. It's also a navigation tool that helps save space and can keep the user from being overwhelmed with too many choices. A hamburger menu is identified by the classic icon consisting of three horizontal lines (≡) and is usually placed at the top corner of the screen. Once the user clicks the icon, it will reveal a hidden navigation with menu items that will grant the user direct access to their respective pages.

Configure the Hamburger Menu

  1. In CMS, go to Layouts | Layout Templates | Hamburger Menus.
  2. Click Create New in the upper right of the screen.
  3. Under Layout Name, enter a label that uniquely identifies the hamburger menu.
  4. Click the blue + icon at the bottom to add a new menu item.
    • Menu Text: Enter the menu item text to be displayed in the app.
    • Icon: Select or upload an icon for the menu item.
    • Visibility: Select the type of visibility of the menu item (for example, menu item will only be displayed when a store associate signs in).
    • Menu Type: Select the menu item type, deeplink or submenu.
    • Deep Link: If the deep link is selected, you'll need to configure a deep link to associate with the menu item.
    • Submenu: If the submenu is selected, you'll have the option to configure additional menu items under the main submenu.
  5. Save your changes.
    Tip
    Tip You can arrange the order of the hamburger menu by clicking and dragging the specified menu item.

Assign the Hamburger Menu to an App Config

  1. In CMS, go to Apps | All.
  2. Edit an app config you wish to have the hamburger menu displayed in.
  3. Go to the UI tab and select Hamburger Menu.
  4. Under Hamburger Menu Layout, select the menu you've created.
  5. Save your changes.

Additional Settings

There are several settings in the app config that can customize the look and feel of the hamburger menu.

Set the text color, font style, and font size

  1. In CMS, go to Apps | All.
  2. Edit an app config you wish to have the hamburger menu displayed.
  3. Go to the UI tab and select iOS Menu Font.
  4. Configure the settings and save your changes.
    • iOS Menu Transition - "Slide" causes the menu to slide in, and "Rotate" causes the menu to rotate with perspective.
    • iOS Menu Background - Sets the background of the menu to an image or a color.
    • iOS Hamburger Menu Logo - The logo is centered at the top of the menu.
    • iOS Menu Font - Specifies the font of the menu item text.
    • iOS Menu Text Color - Specifies the color of the menu item text.
    • iOS Hamburger Menu Font Size - Specifies the font size of the menu item text.
    • iOS Hamburger Menu Font Style - Specifies the font style of the menu item text.

Remove a Hamburger Menu

  1. Set Hamburger Menu Layout to none
  2. Set Use Deep Link In Place Of Hamburger Menu
  3. Set Menu Icon URL

Test a Hamburger Menu

  1. Once you've completed setting up a hamburger menu, you can test it out by restarting and launching the POS app.
  2. You should see the Hamburger Menu icon (three horizontal bars) in the upper left corner of the app.
  3. Tapping on the icon will slide the hamburger menu into view from the left side.