Função

A barra de navegação é um componente que já vem por padrão nas páginas home privada (Localização: Formulário/Web/Autenticado/ ) ou home pública (Localização: Formulário/Web/Público/ ) e será visível por todas as outras páginas, facilitando a navegação entre as páginas da aplicação web. Ela pode ser alterada para a posição vertical.

Figura 1 - Barra de navegação exibida em um browser

O componente Barra de navegação é responsivo, ou seja, em telas pequenas ele muda seu formato para menu vertical que é exibido ao clicar no botão sanduíche, melhorando a usabilidade para o usuário (Figura 1.1).

Figura 1.1 - Barra de navegação na posição horizontal sendo exibida em uma tela menor

Como destacado na figura 1.2, o componente possui 3 subcomponentes.

Figura 1.2 - Componentes presentes na barra de navegação

Imagem, contém a logomarca da aplicação.
Menu Dinâmico, por padrão, o primeiro menu direcionar o usuário para as outras páginas da aplicação, enquanto o segundo possui o modal de alteração de senha do usuário e a opção de logoff na aplicação.

Propriedades do componente

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Nome	Propriedade	Função
Identificador	id	Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
Posição	xattr-class	Define uma das três posições da barra de navegação: Horizontal, Vertical e Vertical retrátil.
Tipo de menu retrátil	menu-type	Define se o ícone do menu será "hambúrguer" ou "seta".
Estilo	style	Altera o estilo geral do componente da forma inline.
Exibir	ng-show	Propriedade Angular usada para exibir ou oculta o componente.
Index da tabela	tabindex	Atributo do tipo numérico, ele especifica a ordem que o componente será selecionado quando a navegação é através da tecla TAB do teclado.
Repetir	crn-repeat	Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança	cronapp-security	Abre a janela de seleção dos grupos com permissões para visualização ou edição.
Skin	crn-skin	Permite selecionar um skin que afetará apenas o componente selecionado.
Classe CSS	class	Adiciona classes CSS que já foram criadas.

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.
Item Selecionado	Hover Subitem	Estiliza o item selecionado do menu.
Subitem	Subitem	Estiliza o subitem do componente.

Posição

A propriedade Posição define como será exibida a barra de navegação e funciona de forma semelhante ao que ocorre quando a Barra de navegação no formato horizontal é acessado por telas pequenas. Possui as seguintes opções:

Horizontal: barra na parte superior do site (figura 1);
Vertical: barra na lateral esquerda (figura 2).
Vertical Retrátil: barra na lateral esquerda com um ícone de seta ou menu hambúrguer para expandir ou recolher o menu (figura 2.1)

Figura 2 - Barra de navegação na posição vertical

Figura 2.1 - Barra de navegação na posição vertical retrátil

Alterar imagem

Para alterar a imagem que representa o logo da aplicação, clique sobre o subcomponente Imagem (destaque 1 da figura 2.2) e, em seguida, no botão "..." da propriedade Origem (destaque 2) para abrir a janela contendo as imagens da aplicação web. Também é possível informar um endereço de imagem diretamente no campo, veja mais detalhes na documentação do componente.