Table of Contents

Menus

Danielle Kellogg Updated by Danielle Kellogg

A menu is used to display links to other pages in your app or other websites.

How Menus Work

Menus contain links the user can click to navigate to other pages in the app, or to other websites entirely. 

Menus are often used to help organize views into multiple pages. For example, a page containing both a table listing multiple records and a form to add a new record could be too crowded. You could instead link to that form view from a menu view making it easy to navigate for your users. 

What do menus look like in a Live App?

This menu is below a details view and will open up modal popups for the user to edit or add records.

Manage Menus

To learn how to add, edit, and delete views from your app, see About Views. 

Build Menu Settings

To access the settings of a menu view, hover your mouse over the view and click on the pencil icon that appears at the top left of the view. 

In the menu settings, you can edit aspects of the menu such as the title, description, format, and design of the menu view.

Link to a new page

This will add a link to a new page in your app that you create. You'll be guided through the setup to add your new page.

Link to an existing page

This will add a link to an existing page in your app. You can select another parent page or a page that originates from a Menu view on a parent page.

Link to a URL

This will add a link to an external website.

Title 

This settings option allows you to give your menu view a title that will appear above the view.

Description

This setting option will appear along with the title above the menu view. Descriptions are a great way to give your users more context on the links in your menu view.

Tabbed Menu

Menus can be formatted to display in buttons or tabs. The default is buttons, where each button is separated. If the Tabs option is enabled, your menu button will appear even on child pages and the tabs will appear to persist on the page as they are clicked through. 

Auto Link

The Auto Link option is available when the menu is set to the tabbed option. This lets you automatically navigate users to the first link in the menu view. 

The active menu is indicated by a down arrow. The menu will also stay visible as you navigate to any child pages.

Editing menu buttons

Existing menu buttons can be edited by interacting with the individual buttons on the page preview. There you can update the link properties, change the link order and delete links.

Each menu link can be edited by hovering over the menu link in the page preview and clicking the pen icon to open the editor. 

Page

This section of the Link Properties displays a link to the page your link redirects to when clicked.

Link Text

Here you can update the text that will appear in the button on the menu view. 

Icon

Icons can be added when adding or editing a button in the menu view. From the "Link Properties" section when editing a link, you can select the “add icon” text to choose an icon.

When selecting an icon, you can also edit the alignment.

  • Left: the icon will appear on the left side of the button text.
  • Right: the icon will appear on the right side of the button text.

New Window

Enabling this will open all button links in new windows in your browser.

The order of the menu buttons can be changed by clicking and dragging a button and dropping it in a new order on the menu view in the page preview.

Menu buttons can be deleted by hovering over a button on in the page preview and clicking the "trash can" icon. 

If the link is connected to a child page that page will also be deleted. However, if another page also links to the child page then that other page will become the parent page once the menu button has been deleted.

Notes and Troubleshooting

If the Header colors and Page Menu and Submit colors are the same, then it will appear that menus are not displaying on your mobile device. You can double-check and update the colors of your app in the Live App Design section of the Builder.

How did we do?

Details

Using Action Links

Contact