---
title: "Como configurar o modo de navegação do seu aplicativo | Tutoriais - GoodBarber"
description: "Hoje, vamos falar sobre os diferentes modelos de navegação\r Eles desempenham um papel crucial na experiência dos usuários e são a navegação principal d…"
canonical_url: "https://pt.goodbarber.com/tutorials/design/como-configurar-o-modo-de-navegacao-do-seu-aplicativo/"
lang: pt
---

# Como configurar o modo de navegação do seu aplicativo | Tutoriais - GoodBarber

[Voltar](https://pt.goodbarber.com/tutorials/)

# Como configurar o modo de navegação do seu aplicativo

Hoje, vamos falar sobre os diferentes modelos de navegação
Eles desempenham um papel crucial na experiência dos usuários e são a navegação principal do seu aplicativo

Para este tutorial, usaremos o aplicativo para nossa empresa local Freyja Spa
Para selecionar um modo de navegação, vá para o menu Meu app > Design > Menu de navegação

Selecione o modelo que deseja aplicar ao seu aplicativo
Cada modelo de navegação tem suas próprias características e aprimorará as diferentes seções de seu aplicativo, dependendo de suas necessidades.

Vamos escolher o modelo Slate.

Consiste em 3 partes.

Minha primeira parte é o cabeçalho. Você pode adicionar seu logotipo, um atalho para o perfil do usuário, se você ativou o add-on de Autenticação, outros atalhos e / ou separadores
Estou simplesmente adicionando meu logotipo.

Então vamos passar para a navegação principal.
Você encontrará aqui todas as seções que selecionou para a navegação principal no menu Meu App > Conteúdo > Seções

Quero destacar o link para os serviços oferecidos pelo Spa, para que sejam facilmente acessíveis aos meus usuários.
Clico no link “Nossos Serviços” e ativo a opção “Destaque este link.” Mudo a cor e voila! Este é o meu link!

Tudo que preciso agora é criar o rodapé.
Como para o cabeçalho, você pode adicionar links. Estou adicionando um link para o perfil do usuário. Para as configurações e para a página de Facebook do Spa

Agora vamos ao menu Configurações. Você pode alterar o design do modo de navegação. A exibição do logotipo que adicionamos anteriormente, a cor e o efeito de fundo.

As cores e fontes usadas.

E finalmente configuramos as opções do menu.
É exibido: sempre fechado ou aberto ao iniciar o aplicativo

Estou feliz com meu design final

Deixe-me mostrar a você do lado do cliente.

Este é o design do Slate
Para ter uma ideia das outras versões:
Swipe
Little Swipe
TabBar e
Grid

Você pode criar seu menu do zero ou desativar o menu e simplesmente usar a página inicial como navegação.

Agora você sabe definir o menu de navegação do seu aplicativo

Te vejo em breve para outro tutorial

## Vídeos semelhantes

[DesignComo configurar seu cabeçalho](/tutorials/design/como-configurar-seu-cabecalho/)

![Como configurar seu cabeçalho](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignComo configurar o estilo global do seu aplicativo](/tutorials/design/como-configurar-o-estilo-global-do-seu-aplicativo/)

![Como configurar o estilo global do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignComo personalizar a tela de lançamento do seu aplicativo](/tutorials/design/como-personalizar-a-tela-de-lancamento-do-seu-aplicativo/)

![Como personalizar a tela de lançamento do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignComo personalizar os ícones do seu menu](/tutorials/design/como-personalizar-os-icones-do-seu-menu/)

![Como personalizar os ícones do seu menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignComo criar o design das suas seções](/tutorials/design/como-criar-o-design-das-suas-secoes/)

![Como criar o design das suas seções](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignComo copiar o design de uma seção](/tutorials/design/como-copiar-o-design-de-uma-secao/)

![Como copiar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignComo configurar sua página inicial (home) do seu aplicativo movel](/tutorials/design/como-configurar-sua-pagina-inicial/)

![Como configurar sua página inicial (home) do seu aplicativo movel](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignComo escolher o tamanho do seu cabeçalho ?](/tutorials/design/como-escolher-o-tamanho-do-seu-cabecalho/)

![Como escolher o tamanho do seu cabeçalho ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[DesignComo modificar o fundo do seu app](/tutorials/design/como-modificar-o-fundo-do-seu-app/)

![Como modificar o fundo do seu app](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)