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

Aba de Propriedades

Na tabela abaixo estão descritas as principais propriedades do componente Barra de navegação.

Nome	Propriedade	Função

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".
Expandir sub-menu	expand-sub-menu	Define se o sub-menu será exibido "ao clicar" ou "ao passar o mouse".
Estilo	style	Altera o estilo geral do componente da forma inline.
Exibir	ng-show	Propriedade Cronapp MVC 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 Eventos

O componente não possui eventos configurados.

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

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 É possível selecionar uma imagem a partir de uma URL externa, veja mais detalhes na documentação do componente.