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 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 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" permite-lhe não exibir nenhum menu de navegação no seu app.
- Código Personalizado não é um template, ele permite que você mesmo crie um menu de navegação.

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
- Little Swipe: 12
- Others: 32

picture

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 se torna no 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 desenvolvedores, o menu de Código Personalizado permite que você mesmo crie um menu de navegação.

picture

3

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:
- Peça suas seções nas configurações do menu de navegação ou na 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.

picture

4

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

picture

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.

picture

6

Video tutorial

Nota: Os menus foram alterados no back office, mas o comportamento explicado no vídeo ainda é válido.


Outros artigos