About Page Menus & Dropdown Menus

In this article, we will explore the functionality and features of page menus and dropdown menus.

This article covers the following topics:

 

What are page menus?

The Page menu is the primary menu that is displayed at the top of your Live App. It includes a link to each of your starting pages, allowing Live App users to effortlessly navigate between the main pages of your app.

The page menu will remain visible, irrespective of the page being viewed, unless the menu has been disabled or the user lacks permission to access that specific page.

Here's an example of a page menu for the Project Management Database sample app when logged in as an Admin:

Image of a page menu highlighted in the Live App

Note: The Page Menu is separate from the user menu in the top-right corner of the Live App. For more information on the user menu, see our User Pages article here.

 

Activating Page Menus

By default, the page menu is enabled for every starting page added to your app. However, you can enable and disable the page menu at any time from your App Settings.

From the Settings section of the Builder, select the “App Settings” option. To manage the page menu, select “Live App Design” and then select “Header & Page Menu”:

pagemenus2

 

Managing Page Menus

Adding Links

To include a new link in your page menu, simply add a new page to your app. The page menu will then display a link for each starting page in your Live App.

pagemenu4

To add a new page to your app, simply click on the "+" button in the Pages section of the Builder. This will open a dropdown menu where you can choose to add a public page, login page, or dropdown menu.

  • Public Page: This option adds a new page to your app that does not require a login. It allows anyone with the link to easily access this page.

  • Login Page: This option allows users to access a page after logging in. You have the flexibility to choose which user roles can log in to the page.

  • Dropdown Menu: This feature enables you to organize pages from your page menu into a new dropdown menu, providing a more streamlined and organized navigation experience for your Live App users.

Note: As soon as you add a new page, it will be available as the last link in the page menu.

 

Hiding Individual Links

While each starting page is included in the page menu by default, you may not want every page to be visible from the page menu. Each individual page’s visibility can be controlled from the Settings tab of the specific page.

To hide a page from the page menu, uncheck the "Include this page in the Page Menu" option in the page's settings

pagemenus5

Note: Not seeing the page menu option in the Settings tab? Please note that the Page Menu exclusively consists of start pages, such as the "login" page.

 

Hiding the Page Menu from a Specific Page

You also have the option to hide the entire page menu from a specific page. To remove the page menu from the page, simply uncheck the "Display the Page Menu when viewing this page" option in the page's settings.

pagemenus6

Changing the Order of the Links in Your Page Menu

To change the order of the page menu links, you can easily rearrange the starting pages in your pages tree by dragging and dropping them to a new position:

pagemenus7

 

Adding Icons

You can add icons to the page menu links by editing the icon option in the settings for each page.

Open the page settings by clicking the dropdown arrow next to the page's name or by selecting "Settings" in the page preview.  Then, select the “add icon” link and you will be able 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.

pagemenus8

 

Dropdown Menus

You can group pages on the page menu into dropdown menus. This is helpful for consolidating related links in your page menu: 

pagemenus9

pagemenus10

Adding a Dropdown Menu

To add a new dropdown menu, navigate to the Pages section of the Builder and click the "+" button above the page list. Then, click the “Dropdown Menu” option:

pagemenus11

Selecting this will prompt you to select which starting pages to include in the dropdown menu in the toolbox. Check the pages you wish to include and then click “Continue”.

Next, you can give your dropdown menu a name and click “Add Page”.

Notes:

  • A page may only belong to one dropdown menu.
  • If you have a page that has the page setting option of "Include this page in the Page Menu" disabled, once you add the page to a dropdown menu, the page menu setting for that page will be ignored. You can learn more about page settings in our article here

 

Managing Dropdown Menus

To modify the pages included in an existing dropdown menu, simply click on the dropdown menu in the page tree. From there, you can edit the pages displayed in the dropdown on the right side or access the "Settings" for that menu to change the name of the dropdown menu, include or exclude this page from the page menu, or add an icon.

pagemenus12

pagemenus13

Note: To change the order of the pages displayed in the dropdown menu, you can remove the pages from the dropdown menu and then reselect them in the desired order.

 

 Deleting a Dropdown Menu

To remove a dropdown menu, simply click on the downward arrow button beside the Dropdown Menu in the page tree. Then, choose the "Delete" option and the dropdown menu will be removed from the page menu.

pagemenus14

Note: Please be aware that removing a dropdown menu will not result in the deletion of any pages from the application.

 

User Roles and the Page Menu

If your app is set up with user roles, you can set the page menu so that the page links will show based on the user roles.

When a user logs in, they will only see page links for the pages that are accessible to their assigned user role. They will also see page links for any pages that do not require a login.

To enable or disable user-based page links, access the app's Settings section and navigate to Live App Design > Header and Page Menu. From there, you can edit the "Page Menu Options".

pagemenus15

Note: If you are encountering a situation where the page menu does not appear for a user who has access to a page because of the user role they possess, please verify if that is the only page the user can access. If that is indeed the case, rest assured that this is the intended behavior.

To ensure that the page menu appears for users who have access to only one page, it is necessary to include a homepage that all users can access. This way, each user role will always have at least two pages they can access, guaranteeing the display of a page menu for them when they are viewing the Live App.