What is the Navbar?
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.
How to access the Navbar
Simply go to App Components >> Navbar
What are the different options for the Navbar and how do you set them up?
Here we’ll go over the different options that you have for the Navbarr. 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.
Options & Style
In this section, you have a couple of visual options for your Navbar.
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.
Note: In order for this to be visible, you’ll need to have more than one action added to the 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!
What are some Pro Tips you should know about to take your app to the next level?
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:
- Branding Page Tutorial
- How To Set Up Your Side Menu
- How To Customize Your App’s Login Screen
- How To Create Action Items with the Action Builder
Still have questions? No problem! Reach out to us and we’d be happy to help :)