The navigation mode allows for the display of your app's principal Menu.

Your app's navigation can be constructed in the Builder. A menu called Browsing mode allows for links to be created that direct the user towards content sections and/or actions.
 

1. Template choice

From the "Template" tab, choose a display model for your navigation mode

There are 7 different navigation modes.
-Swipe, Little Swipe, Grid, Slate, and From Scratch are accessible from the header of the application
-TabBar is permanently visible, on all pages of the app
-"No menu" allows you to not display any navigation mode in your app
-From Scratch is not a template, it allows you to create a navigation mode yourself in HTML
 

2. Constructing the menu

From the "Menu" tab, add different elements into your navigation mode. There are several types of elements.  

Click the green "+ Add an element" icon to add an element to your menu.

The elements
- Link : directing to a section, action, or external link
- Separator : design element to mark a separation
- Title break : allows you to insert a title
- Shortcut : group of links
- My account : element pointing to the user profile section
- Logo : element allowing you to title or display an image
- Copyright : element allowing you to display static information

Depending on the navigation mode you choose, the elements can be placed in different zones of the menu.

Swipe, Little Swipe, Grid, Slate
These navigation modes are divided into 3 zones that can hold elements.
- Header : used to give a title to the navigation page, display a user account, links, and shortcuts  
- Body : the principal zone of the navigation mode. Contains links, separators, or title breaks
- Footer : at the bottom of the page, it's used to display the user's account, the copyright, links, and shortcuts

TabBar
This navigation mode is split into 2 zones that can hold elements.  
- TabBar : add up to 5 links here
- "Others" menu : more than 5 links in the menu, the last position of the TabBar becomes the "Others" menu. It allows access to additional links.

No menu
This mode gives you the option not to display any navigation in the app. It allows you you choose the section displayed when the app is opened.


From scratch
Reserved for developers, the "From scratch" menu allows you to construct your own navigation in HTML. 

Creating a link

To add a link in your menu, click the green "+Add an element" icon. Choose the "link" element in the popup that will appear.
Once the link is added into your menu, click on it to set it up :
- Title : this is the text that appears in your menu
- Link : this is the destination your link points to
- Feature this link : this option allows you to apply colors and a specific font to the link
 

3. Display setup

From the "Settings" tab, you can manage the display options in each of the zones of your navigation mode : 

  • Alignment : vertically and horizontally position the elements of the menu in the zone 
  • Display : choose to or to not display the zone of the navigation mode 
  • Images and color : display a background image in the zone, define the default colors of the active and inactive elements 

https://youtu.be/BLunwdfNQK4

Did this answer your question?