The Navbar allows you to give users access to the most important areas of your app as well as allow them to perform actions outside of your app related to it. Once you enable it, it will display under the features of your app as users navigate throughout your app. This is also a great way to add user interaction to your app by showcasing limited-time features such as monthly contests. In this article, we’ll go over how to set up your Navbar.

Simply go to App Components > Navbar

Here we’ll go over the different options that you have for the Navbar. Before you begin working on the Navbar you’ll need to enable it by selecting “Turn On”.

Now that you have it enabled, we’ll go over the different options you have for the Navbar.

In this section, you have a couple of visual options for your Navbar.

Enable Shadow

This option allows you to display a shadow above the Navbar. This can help visually separate the Navbar from the rest of your app.

Enable Top Border

This option allows you to display a border above your Navbar. Just like the shadow option, it can help visually separate your Navbar from the rest of your app.

Enable Items Border

This option allows you to display a vertical line between the actions that you have set up in your Navbar.

In the Actions section, you use the Action Builder to add Action Items to your Navbar which allows users to navigate throughout your app as well as give them access to options outside of the app such as contacting you via phone or email. We have an in-depth article on the Action Builder which you can find here.
​
Here’s how you add an Action Item to your Navbar.

Step 1: Click On “Add Action Item”

Clicking on “Add Action Item” will bring up our Action builder.

Step 2: Set Up the Action Item that you want to add to the Navbar

Use the Action Builder to set up the Action Item that you’d like to add to the Navbar. For a comprehensive list of all of the Action Item types that you can add, we encourage you to check out our article on the Action Builder here.
​
In the Action Builder, you can give the Action Item an image or an icon, or you can use text instead if you opt-out of using an image. Once you’ve set up the Action Item click “Save” to apply it to the Navbar.

Once you’ve added more than one Action Item to your Navbar you can rearrange their order by clicking on and dragging the three horizontal lines next to the Action Item:

You can also edit and remove pre-existing Action Items in the Actions section:

Congratulations! You now know how to set up your Navbar!

Having worked with apps for years, we’ve learned a thing or two. So, to both help your app stands out and accomplish your primary goals, here are some tips you should consider.

Pro Tip: Don’t Overload the Navbar with Actions

You want to be mindful of the number of actions that you add to the Navbar. Having too many will make it harder to use. We recommend that you only put action items to the most important features in your app, or you use action items that will make navigating the app easier for the user.
​
​Pro Tip: Use Icons or One Word Text Descriptions

We recommend using icons for your Navbar feature; however, if you would like to use text, using one word will help limit layout and spacing issues.

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:

Still have questions? No problem! Reach out to us and we’d be happy to help :)