Pular para o conteúdo principal

Navbar

A Navbar funciona como template component, ou seja, além de oferecer estilos e comportamentos para o componente, também estiliza, posiciona e coordena componentes passados, através da propriedade children.

Deve existir apenas 1 componente Navbar por página, posicionado no topo.

Identificação do produto​

O logo do produto, ou da própria RD Station, deve obrigatoriamente ser o primeiro elemento da Navbar. Deve ser incluído através do componente Brand.

Alinhado ao centro​

Caso o logo seja o único elemento na Navbar você pode deixar ele centralizado.

Use o subcomponente Navbar.Section com o atributo fluid junto com o subcomponente Navbar.Item para criar a navegação principal. Se o item do menu tiver subitens, combine Navbar.Item com Dropdown. Caso o item seja um link, basta incluir o atributo href.

Você também pode envolver o subcomponente Dropdown.Item com o Badge ou adicionar internamente um componente Tag, como indicado no exemplo abaixo.

Utilize a propriedade active para indicar que o subcomponente Navbar.Item está ativo.

Caso seja necessário usar a mesma referência do Dropdown em outro componente, utilize o Dropdown.Anchor para envolver o componente que receberá essa referência (possivelmente um subcomponente Navbar.Item ou Navbar.AccountItem), para que ele seja renderizado com o estilo adequado.

Menu auxiliar​

No menu auxiliar, podemos inserir ícones com ou sem Dropdown e Badge. Veja no exemplo:

Dica

Para dar mais contexto ao usuário, envolva com um Tooltip o subcomponente Navbar.Item quando seu conteúdo for um ícone.

Menu da conta​

O subcomponente Navbar.AccountProvider é o responsável por receber as informações da conta do usuário, como nome de usuário, nome da conta e avatar, se houver, e por passá-las para os subcomponentes que irão renderizá-las (Navbar.AccountInfo e Navbar.AccountItem).

O Navbar.AccountItem deve ser usado como âncora do Dropdown.

Já o Navbar.AccountInfo somente será exibido em telas menores que 1280px (--breakpoint-lg) e conterá um resumo dos dados da conta. Este subcomponente deve ser inserido como primeiro elemento do Dropdown, antes do Dropdown.Container.

Atenção

O subcomponente para criação do menu da conta não deve ser envolvido por Navbar.Section e deve sempre ser o último componente adicionado à Navbar.

Seções​

Como demonstrado nos exemplos acima, o conteúdo da Navbar, com exceção do logo e do menu de conta, deve ser inserido por meio de uma sequência de seções, através da componente Navbar.Section.

Seção fluida​

Atenção

Deve existir apenas um Navbar.Section com a propriedade fluid dentro da Navbar.

Você pode indicar através da propriedade fluid que uma das seções da Navbar é fluida, ou seja, que ocupará todo o espaço disponível:

Seção sem borda​

Use o atributo unbordered para remover a borda esquerda do subcomponente Navbar.Section para aplicação padrão nos produtos. No caso da Navbar usada em editores a borda esquerda deve se manter.

Regras para links e textos dentro de seções​

Para adicionar links e textos dentro de uma Navbar.Section, algumas regras devem ser seguidas:

  • O componente Link deve sempre vir com a propriedade removeUnderline
  • Use a propriedade truncate sempre que existir a possibilidade do conteúdo do Link ou do Text aumentar a ponto de quebrar o layout da Navbar
  • Caso precise dar ênfase a um texto, não mude o elemento padrão do Text para h1, h2, etc. Use a propriedade token com o valor Text.tokens.TEXT_SM_BOLD

Tamanhos​

Pequeno​

Médio (padrão)​

Composição com outros componentes de layout​

Os estilos da Navbar interagem automaticamente com os estilos do StickyBarGroup, Sidebar e do Main para compor um padrão de layout para páginas. Desde a versão 8.14.0 este comportamento também funciona quando estes componentes estão separados em diferentes micro frontends.

Informação

Utiliza a propriedade disabledAutoPosisitioning para desabilitar o posicionamento automático do componente.

Esta propriedade pode ser útil em cenários onde o layout da página será organizado por uma biblioteca externa ou algum estilo curtomizado.

Feedback​

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.