Tutorials
Back

How to set up your navigation menu


Hello and welcome to your GoodBarber back office

Today, we will talk about the different navigation templates
They are very important for many reasons:
They structure your shop
They are part of the final design of your app
They play an important role in the user experience of your clients

It’s the main navigation of your shop.

To select one, go to the menu Content & Design, Navigation menu

Select the template you want to apply to your app
Each navigation template has its own characteristics and will enhance the different sections of your shop, depending on your needs. 

Let’s choose the TabBar template.

It consists of 2 main parts.
The main navigation that will be displayed at the bottom of your app
And a secondary navigation, that will be in a separate menu.

To organize my sections, I simply need to drag them between the main navigation and the Other menu.

My 1st section is my Home. Then I;m adding my list of Collection called Collection, my Sales collection and the User profile. Everything else will be in the Other menu.

I’m adding in the info bar the videos regarding the collections and list of collections.

I want to change the Icon of My Home
Simply click on it and voila. I’m adding a customized icon but you can also pick one form our icon library. I’m adding the detailed video on how to change the icons on the info bar.

I can also highlight a section by modifying the color of the icon and the font. Let’s do this for the Sales collection.

In the settings section of your navigation menu, you can also modify the design of your navigation menu. The General font, display or not the titles under the icons, color of the icons, separators etc. 

I’m happy with my final design 

Let me show from the client side. This is the TabBar design
To give you an idea of the other versions:
Swipe
Little swipe
Grid
And Slate

You now know how to set the navigation menu of your shop

See you very soon for another tutorial

Related videos