Skip to Content

How To Configure a Tabbed or Mobile Menu

Vinyl supports the ability to create and use a Tabbed or Mobile Menu for app navigation on mobile devices. Using a Tabbed or Mobile Menu allows you to display a familiar tabbed style navigation to mobile users, which can provide for a better UI / UX experience. This article will step through the basic configuration for creating a Tabbed or Mobile Menu in Vinyl.

mobilemenu.png

Step 1: Create a Tabbed or Mobile Menu

In this first step you will create a Tabbed or Mobile Menu the app will use. In the second step we will then create an association to the menu from our app.

  1. Navigate to the App Workbench
  2. Click on Menu
  3. Click the pencil edit icon for the Mobile entry
  4. Click the + Menu Item button
  5. Assign a Name for the navigation tab. For example: Home
  6. If the tab should link to a page, set the Link to Page value. For example: Order Detail
  7. Review additional settings and determine if you want to specify the Label, a Tooltip Label, an Image, an Icon, etc.
  8. Click Save
  9. Click the + Menu Item button
  10. Configure information for the next tab and Save. Continue until menu is complete.

Step 2: Associate the Tabbed or Mobile Menu with the App

  1. Navigate to the App Workbench
  2. Click on More > Edge Case
  3. Click the Regions - Controls tab
  4. Set the Mobile Menu to the Mobile Menu created in Step 1
  5. Test the application from a mobile device to confirm update