Menu

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. 

menu-image.png

 

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.

adding-menu.png

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

add-new-menu-item.png

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

item-type.png

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

Let's define each menu item type.

Page

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. 

xNtadding-menu-ex.png

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. 

live-app-menu.png

 

add-link-to-menu.png

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

ezgif-link-menu.gif

 

Text

Select the Text 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.

text-menu.png

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

slogan-text-menu.png

 

Image

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. 

image-menu.png

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

image-link-menu.gif

 

special-link.png

There are four types of Special 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 within a new window. At default, the New Window setting is set to No.

new-window.png

 

Menu item alignment

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

menu-alignment.jpg

At default, the Alignment setting is set to Left

alignment-menu.png

 

Adding icons

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

icon-in-menu.png

 

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 8" as this is the 8th menu created within this particular app.

menu-8.png

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

naming-menu-gif.gif

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.   

new-page-menu.png

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. 

menu-style.png

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. 

 

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.  

add-child-menu.jpg

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.