---
title: "How to set up the navigation mode of your app | Tutorials - GoodBarber"
description: "Hello and welcome to your new GoodBarber tutorial.\r \r Today, we will talk about the different navigation templates\r They play a crucial role in your users’ experience and it’s the main na…"
canonical_url: "https://www.goodbarber.com/tutorials/design/how-to-set-up-the-navigation-mode-of-your-app/"
lang: en
---

# How to set up the navigation mode of your app | Tutorials - GoodBarber

[Back](https://www.goodbarber.com/tutorials/)

# 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

## Related videos

[DesignHow to set up your header](/tutorials/design/how-to-set-up-your-header/)

![How to set up your header](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignHow to set up the global style of your app](/tutorials/design/how-to-set-up-the-global-style-of-your-app/)

![How to set up the global style of your app](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignHow to customize the splashscreen of your app](/tutorials/design/how-to-customize-the-splashscreen-of-your-app/)

![How to customize the splashscreen of your app](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignHow to customize the icons of your menu](/tutorials/design/how-to-customize-the-icons-of-your-menu/)

![How to customize the icons of your menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignHow to design your sections](/tutorials/design/how-to-design-your-sections/)

![How to design your sections](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignHow to copy the design of a section](/tutorials/design/how-to-copy-the-design-of-a-section/)

![How to copy the design of a section](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignHow to set up your home page](/tutorials/design/how-to-set-up-your-home-page/)

![How to set up your home page](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignHow to choose your header size ?](/tutorials/design/how-to-choose-your-header-size/)

![How to choose your header size ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[DesignHow to customize the background of your app](/tutorials/design/how-to-customize-the-background-of-your-app/)

![How to customize the background of your app](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)