Navigating the Submenu

Submenu

The submenu is used as a navigation menu to get around to different areas of your app easier. (  Think of the banner at the top of most websites, where there are clickable options, such as “Home”, “About”, and “Contact”)

In order for your app users to open the Submenu, you have a few options to choose from:

  1. Set an Interaction to open the submenu.
  2. Set an element’s link to open the submenu when tapped. Only certain elements can be set to open the submenu when tapped. These elements include headers, text, images, buttons, and icons.

Building the submenu:

  • To edit your submenu, click the bullet points icon on the left menu to see the Submenu settings.

There are two main sections within the submenu settings:

Submenu Links

Here is where you can add and configure the links on your Submenu.

  • On the left menu, you’ll see a button saying Add Link. Click the button to start adding your link.
  • Next, type into the text input box the text you want on display within the submenu. Then, in the dropdown menu, select the screen you’d like to link the text to. (For example, you could put “Home” as the text, and link it to your Home Screen.)
  • Click the "Add" button, and you’ll see a preview of your new link within the submenu. Now, whenever the submenu is opened in your app, if that new text is tapped, the app user will be brought to the linked screen.
  • You may follow this same process again multiple times to add more links to the Submenu.

After you’ve added your submenu links, they will be displayed in the left menu.

  • To change the order the links appear in the submenu, you can hold and drag each link in the left menu higher or lower than the other links.

Edit link

  • To edit an already created link, click on the pencil icon of the link within the left menu. Make your necessary changes, and click "Save" when complete.

Duplicate

  • To duplicate a link, click the duplicate icon. The icon looks like two little pieces of paper overlapping each other. After clicking, a clone of that link will appear at the bottom of your list of links on the left menu.

Delete

  • To delete a link, click the trash icon. After clicking, the link will be deleted from the submenu.

Submenu Style

These options, on the right side of the editor, is where you can add and configure a few things for your submenu:

Align

  • This determines whether your submenu appears on the left or the right side of the screen within your app. To edit, click the drop down menu, and select either Left or Right. After selecting your option, the submenu will appear on the chosen side of the screen preview.

Background Color

  • To set the background color of your submenu, click the color box to the left of where it says “Background Color”.
  • As you select and edit your color, you’ll see the preview of it within the screen preview.
  • Once satisfied, simply click anywhere else on the page to set the color.

Text Color

  • To set color of the text links within your submenu, click the color box to the left of where it says “Text Color”.
  • As you select and edit your color, you’ll see the preview of it within the screen preview.
  • Once satisfied, simply click anywhere else on the page to set the color.

If you have any questions about this article, feel free to reach out to our support team! We're happy to help.

UPDATE 2.0:

By default the submenu will slide out when swiping left/right on the screen.

Now, you can disable it with this checkbox: