The Navigation section lets you add a Header and/or a Sidebar to your app pages. The header/sidebar will be the same across all of your pages.

The header/sidebar can be set up to link to your pages, so you can navigate between your pages easily. To do this simply:

Navigation Items will only be visible if the page they are linked to a) Isn't completely blank, and b) the logged in user has access to that page (If Auth Required is used)

1. Select the “Navigation” tab from your App Home Screen

Navigation Tab

2. To add a Header or Sidebar, click their respective tabs and click "+ New Section"

3. Name your section, add a Icon (optional), and choose whether to have this section expanded on the sidebar by default. *Leave the Label empty if you want to create navigation items WITHOUT a section. Remember to click Save.

Frontly Edit Section

4. `Then, in the section, click "+ New Item" and fill out the information for the Navigation Item:

Edit Navigation Item Frontly
  • Label - The name that will appear in your App in the navigation header/sidebar

  • Route - Type the Route in of the page you want to navigate to, the page Routes can be changed under each page under General

  • Icon - add an Icon to your navigation item

  • *Show In Dropdown* - Having this toggle ON will make so that this Navigation item is only shown in the separate Dropdown menu located on the header/sidebar

5. Turn on the header/sidebar for each page you’d like to see it in. The settings for heading/sidebar can be found under General. You can also change the Route name here.

6. You can rearrange the order your Navigation items appear

7. After you’ve added a Header or Sidebar, you can add a header/sidebar Logo by clicking here:

8. If you are using our Auth module and you have an active user logged in, you will see this nice dropdown menu in the bottom of the Sidebar or in the right of the Header.

If you select the 'show in dropdown menu' toggle, items will only show in the dropdown, not in the main navigation.

When moving to mobile sizes, our navigation will intelligently choose to collapse all items into a single dropdown menu for a cohesive experience.

Did this answer your question?