--- title: "Configurar e personalizar o menu de navegação" description: "O Menu de Navegação permite exibir o menu de navegação principal do aplicativo. Ele permite que os links direcionem o usuário para o conteúdo do seu aplicativo" canonical_url: "https://pt.goodbarber.com/help/personalizar-a-navegacao-a-home-e-o-header-r88/configurar-e-personalizar-o-menu-de-navegacao-a251/" lang: pt --- # Configurar e personalizar o menu de navegação Source: https://pt.goodbarber.com/help/personalizar-a-navegacao-a-home-e-o-header-r88/configurar-e-personalizar-o-menu-de-navegacao-a251/ O Menu de Navegação permite exibir o menu de navegação principal do aplicativo. Ele permite que os links direcionem o usuário para o conteúdo do seu aplicativo e/ou ações. Quando você [cria uma nova seção](https://pt.goodbarber.com/help/organizar-seu-conteudo-r93/entender-as-secoes-e-a-estrutura-do-seu-app-a34/) no seu aplicativo, um link que abre essa seção é criado automaticamente no menu de navegação. Para definir o seu menu de navegação: 1. Vá para o menu **Meu app > Estrutura > Menu** ## 1. Escolha o template 1. Clique em Selecionar abaixo do modelo de sua escolha para o seu menu de navegação na coluna à direita do seu back office O modelo aplicado é mostrado em verde. Escolha entre menus de navegação diferentes: - **Swipe, Little Swipe, Grid, Slate** e**Código Personalizado**, que se encontram acessíveis a partir do botão no [cabeçalho](https://pt.goodbarber.com/help/personalizar-a-navegacao-a-home-e-o-header-r88/configurar-e-personalizar-o-cabecalho-do-app-a378/) do app. *Este botão é exibido em páginas de conteúdo acessíveis a partir do seu menu de navegação (a menos que você defina o seu menu sempre visível no aplicativo da web, ou para ser exibido ao iniciar, dependendo das opções disponíveis).* - A **TabBar e a FloatingTabBar** são exibidos no fundo da tela nos apps nativos e como um banner no web app, sob o cabeçalho. *A TabBar é também exibido nas páginas de conteúdo acessíveis a partir do seu menu de navegação.* - **"Sem Menu":** Este modo permite-lhe não exibir nenhuma navegação no aplicativo. - **Código Personalizado:**não é um template, ele permite que você [mesmo](https://pt.goodbarber.com/help/personalizar-seu-app-com-as-ferramentas-de-desenvolvedor-r14/adicionar-codigo-personalizado-ao-seu-app-a297/) crie um menu de navegação. Reservado para programadores, selecione o menu "Código Personalizado" para construir o seu [próprio](https://pt.goodbarber.com/help/personalizar-seu-app-com-as-ferramentas-de-desenvolvedor-r14/adicionar-codigo-personalizado-ao-seu-app-a297/) menu de navegação em HTML. **Nota:** Dependendo do modo de navegação escolhido, o título de suas seções não deve exceder um determinado número de caracteres (ou o final pode ser cortado): **- Grid: 13 - Slate: 20** **- Little Swipe: 12 - Outros: 32** ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28037994-27897702.jpg?v=1782136773.3565898) ## 2. Construindo o menu 1. Clique em "**Editar**" em seu modelo ou selecione um novo modelo 2. Clique no botão verde "**+ Adicionar um elemento**" para adicionar um elemento* ao seu menu. **Os elementos: - Separador: um elemento de design para marcar uma separação - Quebra de título: permite-lhe inserir um título - Link: redirecionando para uma página, ação, ou link externo - Atalho: grupo de links - Logo: elemento que permite dar um título ou exibir uma imagem - Minha conta: elemento apontando para a página de perfil de usuário - Copyright: elemento que permite que exiba informação estática* Dependendo do Menu de Navegação que você escolhe, os elementos podem ser colocados em diferentes zonas do menu. **Swipe, Little Swipe, Grid e Slate** Estes menus de navegação são divididos em três zonas que comportam elementos: - Cabeçalho: utilizado para dar um título à página de navegação, exibir a conta de usuário, links e atalhos; - Navegação principal: a área principal do menu de navegação. Contém separadores ou quebras de título; - Rodapé: no fundo da página, pode ser utilizado para exibir a conta de usuário, o copyright, links e atalhos. **TabBar e FloatingTabBar** Este menu de navegação é dividido em 2 áreas que comportam diversos elementos. - TabBar: você pode adicionar até 5 links aqui; - Menu "Outros": quando existem mais do que 5 links no menu, a última posição do TabBar passa a ser o menu "Outros". Ele permite acessar links adicionais. **"Sem menu"** Este modo permite-lhe não não exibir nenhuma navegação no aplicativo. Pode ainda escolher qual a página a ser mostrada quando o app é lançado. **Código Personalizado** Reservado para **programadores**, selecione o menu "Código Personalizado" para construir o seu próprio menu de navegação em HTML ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28037994-27897703.jpg?v=1782136773.3765898) ## 3. Links para suas seções no menu de navegação 1. Vá para o menu **Meu app > Estrutura** 2. Arraste e solte a sua seção para "**Navegação principal**" ou para o menu abaixo de "**Outras seções**" O menu superior **Seções - Navegação principal** é a lista das seções que são exibidas no menu de navegação principal do seu aplicativo. *A ordem das seções é a mesma que para o seu menu:* - Organize suas seções a partir das configurações do menu de navegação ou da lista de seções arrastando e soltando. O menu inferior **Outras seções - As seções usadas fora da navegação** são a lista das outras seções, que não aparecem no menu de navegação principal do aplicativo. ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28037994-27897704.jpg?v=1782136773.4085898) ## 4. Criar links no menu de navegação Para criar um link diretamente nas **páginas Principais** do seu menu de navegação: 1. Vá para o menu **Meu app > Estrutura** 2. Adicione uma seção **Click-to**, que se comporta da mesma maneira que um link. Para criar um link no **rodapé** do seu menu de navegação: 1. Vá para o menu **Meu app > Estrutura** 2. Clique em "**Menu** " no painel direito 3. Clique no verde "**+ Adicionar um elemento**" 4. Escolha o elemento "**Link**" no popup que aparecerá Uma vez que o link é adicionado ao seu menu, clique nele para configurá-lo: - **Título**: este é o texto que aparece no seu menu - **Link**: este é o destino para o qual seu link aponta - **Destaque este link**: esta opção permite que você aplique cores e uma fonte específica ao link ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28037994-27897705.jpg?v=1782136773.41659) ## 5. Configuração do menu de navegação Gerencie as opções de exibição em cada uma das áreas do seu menu de navegação. 1. Vá para o menu **Meu app > Estrutura** 2. Clique em "**Menu** " no painel direito 3. Clique na aba "**Configurações** " 4. Definir por zona (cabeçalho, navegação principal e rodapé): - Alinhamento: posição vertical e horizontal dos elementos do menu - Fundo geral: uma cor ou uma imagem - Imagens/tipos de letra e cores: exibe uma imagem de fundo na área, define as cores padrão dos elementos ativos e inativos - Opções: dependendo do modelo, você pode optar por ocultar ou exibir por padrão o menu de navegação. ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28037994-27897706.jpg?v=1782136773.42459) ## 6. Video tutorial ***Nota:** Os menus foram alterados no back office, mas o comportamento explicado no vídeo ainda é válido.* [Video](https://www.youtube.com/watch?v=BK0YaPxwqmY)