What is the Menu Component? 

The menu component is a System Component that, when added to a page or layout, adds a navigation menu bar with links to route users to specific pages or other system components. 



Adding menus

You can add a menu component to a page or layout by adding it within an existing column, similarly to how you would add any other component. You can then select the menu component from the list of System Components.


A new window will pop up prompting you to add items to your new menu by clicking on the +Add New Item button.


Enter the name of the item as you would like it to appear on your menu on the live app and select the item type


There are five types of items that can be added to a menu:

Let's define each menu item type.


As a reminder, parent pages are pages at the top level of your app's list of layouts and pages, and aside for the three default pages that are built-in to each app (the login, sign up, and profile parent pages), parent pages are those that you manually create by adding a new page as opposed to child pages which are dynamically created via components (Details, Edit, and Add New child pages). When adding a page to your menu, you can not link to child pages, rather only to parent pages. 


As you can see in the image below, this menu now has a link to the Time Sheets parent page using the display name “Time Sheet Hours”. No matter how many additional items are added to this menu, when users click on the Time Sheet Hours link on this menu they will be routed to the Time Sheets page. 




As you can see in the GIF below, this menu now has a link to the website.




Select the custom item type to add any text to your menu. Text added to the menu as a text item type will not be a clickable link, rather the text can be used as a separator or placeholder text on your menu. For instance, you can add a text item to your menu to add a slogan following your logo on the menu.


Once a logo image item is added to your menu as well, the menu can appear as such:




Select the Image item type to add an image, such as a logo, to your menu. 


You can choose to link a URL to the image, making it a clickable image that will route users to your desired website when clicked. 


As you can see in the GIF below, the logo image on this menu links to the website when clicked. 




There are four types of User Links you can add to your menu to route users to accomplish a specific user-related function:

Let's define each type of Special Link you can add to your menu.

Adding a Sign Up link to your menu is functionally equivalent to adding a page link to the default sign up page. However, the Sign Up link is "special" because using this method results in the Sign Up link disappearing from the menu when a user is logged in. 

Profile Link

Adding a Profile link to your menu is functionally equivalent to adding a page link to the default profile page. However, the Profile link is "special" because using this method results in the Profile link disappearing from the menu when a user is logged out. In other words, when using a profile link as opposed to a page link to the default profile page, the profile link will only appear on the menu when a user is logged in.

Logout Link



New window

When adding items to a menu that are clickable links, you can choose whether the link should open as a pop-up. At default it opens the link in the current page. 2022-01-28_11-38-26.png


Menu item alignment

When adding items to a menu, you can choose to align items to the Left or Right of the menu.


At default, the Alignment setting is set to Left



Adding icons

You can add icons to each menu item to enhance the appearance of your menu: 



Renaming Menus

Every new menu is automatically named in order in which it was created. For instance, the newly created menu below has the default name of "Menu 2" as this is the 2nd menu created within this particular app.

You can rename menus within the menu's Options tab in order to more easily identify menus when assigning pages to particular menus. 

Now, when adding a new page in the Page Builder, you can easily link that page to a particular menu by identifying the menu's name within the drop-down list of your app's menus.   


You can link a page to a particular menu either when adding the page in the Page Builder and selecting the menu from the drop-down list of existing app menus, or by adding the page as an item to a particular menu as demonstrated above within this article. 

Menu style

Within the Settings tab of a menu, you can change the menu style from horizontal to vertical. 


By default, all menus are structured horizontally and appear as such:

By changing a menu's style to vertical, the menu would appear as such




Keep in mind, changing a menu's style to vertical will also change the structure of the layout, making the Page Container within the row of the menu. Please keep in mind that this may add some limitations in restricting the granular permissions over this row. 



If you would like a full-length menu as seen bellow. This requires a bit of CSS code. 

You can see in the GIF below that the menu changes from partial to full-length by using CSS.

You can go to your layout pages setting, click CSS, and copy and paste the code below. 

bottom: 0;
top: 0;
left: 0;
height: 100vh;
margin: 0;
overflow: inherit;
position: fixed;
width: 317.16px;
z-index: 1049;
margin-left: 317.16px;
@media (max-width: 768px){
height: auto;
position: inherit;
width: auto;
margin-left: auto;

.dropdown-submenu:hover>.dropdown-menu {
display: none;

Child Menu Items

To add a child menu item to a menu, click on the "+" icon within the parent menu item that you would like to add the child item. You can then name and configure your child item just as you would any other menu item.  


As a result, your menu will include a child menu item as a drop-down option within its parent menu item. You can add multiple child items under a parent item.

You can add multiple levels of child menu items.