---
title: "Como configurar seu menu de navegação | App de Loja Online - Tutoriais - GoodBarber"
description: "Hoje, vamos falar sobre os diferentes modelos de navegação\r Eles são muito importantes por muitos motivos:\r - estruturam sua loja\r - fazem parte do design final do seu aplicativo…"
canonical_url: "https://pt.goodbarber.com/tutorials/shop/design/como-configurar-seu-menu-de-navegacao/"
lang: pt
---

# Como configurar seu menu de navegação | App de Loja Online - Tutoriais - GoodBarber

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

# Como configurar seu menu de navegação

Hoje, vamos falar sobre os diferentes modelos de navegação
Eles são muito importantes por muitos motivos:
- estruturam sua loja
- fazem parte do design final do seu aplicativo
- desempenham um papel importante na experiência de usuário dos seus clientes

É a navegação principal da sua loja.

Para selecionar um, vá para o menu Conteúdo e 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 irá aprimorar as diferentes seções de sua loja, dependendo de suas necessidades.

Vamos escolher o modelo TabBar.

Consiste em 2 partes principais.
A navegação principal que será exibida na parte inferior do seu aplicativo
E uma navegação secundária, que estará em um menu separado.

Para organizar minhas seções, basta arrastá-las entre a navegação principal e o menu Outro.

Minha primeira seção é minha Home. Em seguida, estou adicionando minha lista de Coleção chamada Coleção, minha coleção de saldos e o perfil do usuário. Todo o resto estará no menu Outro.

Estou adicionando na barra de informações os vídeos sobre as coleções e lista de coleções.

Eu quero mudar o ícone da minha Home
Basta clicar nele e pronto. Estou adicionando um ícone personalizado, mas você também pode escolher um de nossa biblioteca de ícones. Estou adicionando o vídeo detalhado sobre como alterar os ícones na barra de informações.

Também posso destacar uma seção modificando a cor do ícone e a fonte. Vamos fazer isso para a coleção de saldos.

Na seção de configurações do menu de navegação, você também pode modificar o design do menu de navegação. A fonte geral, se exibe ou não os títulos sob os ícones, cor dos ícones, separadores etc.

Estou feliz com meu design final

Deixe-me mostrar do lado do cliente. Este é o design da TabBar
Para se ter uma ideia das outras versões:
- Swipe
- Little Swipe
- Grid
E Slate

Agora você sabe definir o menu de navegação de sua loja

Te vejo em breve para outro tutorial

## Vídeos semelhantes

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

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

[DesignComo configurar a página inicial (Home) do seu aplicativo](/tutorials/shop/design/como-configurar-a-pagina-inicial-do-seu-aplicativo/)

![Como configurar a página inicial (Home) do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DesignComo personalizar sua tela de lançamento](/tutorials/shop/design/como-personalizar-sua-tela-de-lancamento/)

![Como personalizar sua tela de lançamento](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignComo configurar o cabeçalho da sua loja](/tutorials/shop/design/como-configurar-o-cabecalho-da-sua-loja/)

![Como configurar o cabeçalho da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DesignComo configurar o estilo global da sua loja](/tutorials/shop/design/como-configurar-o-estilo-global-da-sua-loja/)

![Como configurar o estilo global da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignComo personalizar os principais ícones da sua loja](/tutorials/shop/design/como-personalizar-os-principais-icones-da-sua-loja/)

![Como personalizar os principais ícones da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DesignComo criar o design das seções de sua loja](/tutorials/shop/design/como-criar-o-design-das-secoes-de-sua-loja/)

![Como criar o design das seções de sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

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

![Como desengatar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignComo escolher o tamanho do seu cabeçalho](/tutorials/shop/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)