TopNavigation

O componente de navegação superior (top navigation) é um elemento recorrente e de estruturação básica do layout da maioria das aplicações, principalmente quando se tratam de sistemas corporativos.

Representa o conjunto fundamental de informações que um usuário deve ter acesso no topo de cada uma das interfaces de um mesmo sistema (ou ao menos na maioria delas), contendo os acessos rápidos à tela principal do sistema, seu título, campo de pesquisa persistente, e ações globais e recorrentes como alternância de modo de cor e Avatar de usuário atualmente autenticado. Dependendo das necessidades de navegação do sistema, outras opções podem ser exibidas, desde que adequadamente visualizáveis em diferentes resoluções.

Este componente eventualmente possui nomes genéricos como cabeçalho (header) em outros design systems. Por vezes também é decomposto em peças menores, como a separação da barra de título (title bar) da barra de navegação (navigation bar) em componentes distintos. Aqui, optou-se por tratar como variações de um mesmo componente.

Variações

Este componente pode ser utilizado conforme as variações descritas a seguir.

Padrão

A variação padrão deste componente apresenta sua composição mínima em um cabeçalho contendo o logo do CPS e título da aplicação (acionáveis direcionando o usuário à tela principal do sistema em questão), barra de busca persistente para localizar informações em todo o sistema de forma rápida, botões de apoio para alternância de modo de cor e para controle de usuário autenticado (ou botão para acesso ao sistema quando não autenticado). Outros elementos podem ser acomodados nesta área, como ícone de notificações ou botão de ajuda, caso estritamente imprescindíveis à utilização do sistema em questão, mas com grande cautela para que não se quebra a visualização linear em resoluções pequenas.

A aparência desta variação em modo claro:

A aparência desta variação em modo escuro:

Menu Superior

A variação com menu superior mantém as mesmas características já abordadas para a área principal do componente, porém acrescenta a chamada "barra de navegação" como uma segunda fileira de opções. Os itens da barra são apresentados com ícones exclusivos e sugestivos, bem como com texto de apoio simples e direto para cada item. Esta variação só deve ser utilizada em cenários onde a quantidade de itens de navegação é pequena, garantindo-se boa visualização de todas as opções mesmo em resoluções pequenas.

A aparência desta variação em modo claro:

A aparência desta variação em modo escuro:

Boas práticas

Para que este componente seja utilizado da melhor maneira possível, observe as práticas a seguir.

Exibição e comportamento

Utilize este componente em praticamente todas as telas de um sistema corporativo, com exceção às poucas telas de conteúdo mínimo e centralizado tanto verticalmente quanto horizontalmente, como em telas de login.

O campo de pesquisa persistente é um TextField com acionamento da busca ao pressionar-se a tela Enter ou através de clique/toque no ícone de pesquisa (lupa) e, como tal, deve respeitar todos os comportamentos e boas práticas já documentos neste componente.

O campo de pesquisa persistente é altamente recomendado, mas podem existir casos extremos onde não precise ser exibido. Por exemplo, em sistemas com poucas telas e poucas informações exibidas nelas, ou seja, onde a necessidade de utilização de uma ferramenta de busca global não seria justificável.

Este design system foi projetado com alternância de Modos de Cor como princípio básico de sua concepção. Dado que este é um recurso constante em todos os grandes sistemas operacionais atuais, é essencial que as aplicações Web respeitem a configuração de modo de cor do sistema operacional, quando existir, mas que permitam que o usuário alterne especificamente para a aplicação em questão, quando desejado. Desta forma, o botão de alternância de modo de cor neste componente é obrigatório.

Quando utilizando menu superior, cada item do menu atua como um ToggleButton com aparência personalizada, ou seja, o item selecionado representa a tela atualmente em exibição no sistema e, portanto, acionar outro item automaticamente remove a seleção do item atual, bem como conduz a navegação à nova tela.

Itens de menu devem ser grafados em notação Sentence case, conforme explanado em Tipografia.

Em resolução maiores, principalmente a partir de 1024px de largura (medida convencionalmente considerada o ponto de partida para desktops), é natural que o maior espaço horizontal possa ser aproveitado de forma diferenciada pelas interfaces. Desta forma, é recomendável que a variação com menu superior não seja utilizada em resoluções maiores. Ao invés disso, alterna-se para a variação padrão e complementa-se o layout com a exibição do componente SideNavigation para oferecer as mesmas opções de navegação, porém dispostas na lateral esquerda da página ao invés de fazerem parte da área de navegação superior. Observe um exemplo animado desta alternância responsiva:

Acessibilidade

Este componente em si não possui características de acessibilidade, mas cada um de seus elementos internos, sejam eles Button, Hyperlink, TextField ou ToggleButton, devem respeitar suas próprias características de acessibilidade e usabilidade.