How to set up the navigation mode of your app
Hello and welcome to your new GoodBarber tutorial.
Today, we will talk about the different navigation templates
They play a crucial role in your users’ experience and it’s the main navigation of your app
For this tutorial we’ll use the app for our local business Freyja Spa
To select one, go to the menu My app > 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 app, depending on your needs.
Let’s choose the Slate template.
It consists of 3 parts.
My 1st part is the header. You can add your logo, a shortcut towards the user profile, if you’ve activated the authentication add-on, other shortcuts and/or separators
I’m simply adding my logo.
`then let’s move on to the main navigation.
You’ll find here all the sections you selected for the main navigation in the menu my app> content > sections
I want to highlight the link towards the services offered by the Spa, so they’re easily accessible to my users.
I click on the link “our services” and activate the option “feature this link”.I change the color and voila! There’s my link!
All I need now is to create the footer.
Like for the header, you can add links. I’m adding a link towards the user profile. Towards the settings and towards the Spa Facebook page
Now let’s go to the settings menu. You can change the design of the navigation mode. The display of the logo we added earlier, the color and the background effect.
The colors and font used.
And finally we configure the menu options.
It display: always closed or open when launching the app
I’m happy with my final design
Let me show you from the client side.
This is the Slate design
To give you an idea of the other versions:
- Swipe
- Little swipe
- Tabbar and
- Grid
You can create your menu from scratch or deactivate the menu and simply use the home page as navigation.
You now know how to set the navigation menu of your app
See you very soon for another tutorial