Função
A barra de navegação é um componente que já vem por padrão na tela home e será visível por todas as outras páginas, facilitando a navegação entre as páginas do sistema web. Ela pode ser alterada para a posição vertical.
Figura 1.1 - Barra de navegação exibida em um browser
O componente barra de navegação é responsivo, ou seja, em telas pequenas ele muda o formato do menu para um botão de menu sanduíche, melhorando a usabilidade para o usuário.
Figura 1.2 - Barra de navegação em um browser sendo exibido em uma tela menor
Ela é composta dos componentes Imagem (Destaques 1 e 3 da figura 1.3), Menu Dinâmico (2) e Item de Menu agrupados.
Figura 1.3 - Componentes presentes na barra de navegação.
Propriedades do componente
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
|---|---|---|
Configuração | options | Abre a janela de configurações da Barra de navegação. |
Posição | xattr-class | Define se a barra ficará horizontalmente, na parte superior da tela, ou verticalmente, na lateral esquerda. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Barra de navegação.
| Nome em português | Nome em inglês | Descrição |
|---|---|---|
Plano de Fundo | Background | Estiliza o plano de fundo do componente. |
Menu Marca | Brand Menu | Estiliza o do componente. |
Item Menu | Menu Item | Estiliza o menu de marca do componente. |
Subitem | Subitem | Estiliza o subitem do componente. |
Subitem Hover | Hover Subitem | Estiliza o subitem hover do componente. |
Configuração
O campo Configuração (Figura 2.1) permite que você abra a janela Opções de Menu que pertence ao subcomponente Menu Dinâmicodinâmico.
Figura 2.1 - Janela de opções do menu dinâmico
Adicionar novo item ou menu;
Excluir o item ou menu selecionado;
Área que exibe a árvore hierárquica para seleção dos itens e menus;
Propriedades do menu ou item selecionado.
| Dica | ||
|---|---|---|
| ||
Um item possui apenas um nível e o menu possui itens dentro dele. Por exemplo, o menu Admin possui os itens: usuários, log de auditoria e gruposNas configurações do Menu dinâmico é possível criar itens com até 10 níveis de hierarquia. Apesar da possibilidade, não é recomendado o uso de tantos níveis, pois deixa o sistema com uma usabilidade ruim. |
Alterar imagens
É possível alterar as imagens da barra de navegação:
- A imagem do perfil do usuário (destaque 3 da figura 1.3) está vinculada ao campo Picture da classe User, dessa forma, exibirá a foto do usuário quando o perfil estiver preenchido ou uma imagem padrão, caso o campo esteja vazio.
- Já a imagem do Logo pode ser alterada selecionando-a e alterando a propriedade Origem do componente Imagem.
Abaixo (Figura 2.2), mostraremos como alterar a imagem da logo na barra de navegação.
Figura 2.2 - Alterando imagem
- No editor de views, selecione a imagem da logo;
- No campo Origem na aba de Propriedades do componente, clique em Editar expressão;
Agora, é possível alterar a imagem por meio do endereço da árvore de arquivos.
Posição
A propriedade Posição define como será exibida a barra de navegação: na parte superior do site (horizontal) ou na lateral esquerda (vertical).
Da mesma forma como ocorre no menu horizontal, em telas pequenas a barra de navegação muda o seu formato, criando um botão sanduíche que exibe o menu ao clica-lo, melhorando a usabilidade para o usuário (Figura 2.3).
Figura 2.2 3 - Barra de navegação na posição vertical
Nome em inglês
Navbar
Nessa página
Índice maxLevel 3 printable false
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual