Skip to main content

Menu

Visão geral#

O componente menu têm como objetivo viabilizar a navegação e orientar a pessoa usuária dentro de uma interface.

Componentes relacionados

Anatomia#

Em uma visão macro, o menu é composto pelas seguintes partes:

Variação de menu com visão macro com as partes sinalizadas, sendo 1 brand, 2 required text, 3 action-collapse e 4 ani searchVariação de menu com visão base com as partes sinalizadas, sendo 4 ani search, 5 border, 6 base e 7 ani divider
  1. Brand: Área reservada para a logo da solução;
  2. Submenu: Apresenta elementos de que permite a navegação na interface;
  3. Action-Collapse: Região de interação que permite variar entre as formas collapsed ou extended.
  4. Ani Search
  5. Border: forma que “emoldura” o conteúdo do componente
  6. Base: fundo que dos itens do conteúdo da navegação
  7. Ani Divider

Variações#

O componente menu pode ser apresentado e/ou variar entres duas formas: Collapsed ou Extended.

Imagem apresentando 2 variações do menu, sendo 1 collapsed e 2 extended.

Variação 1#

O Formato collapsed apresenta-se quando não há uma interação com o menu, proporcionando área de conteúdo maior.

Variação 2#

O formato extended é apresentado quando o usuário precisa navegar dentro da solução.

Comportamento#

Hover sobre o menu#

Quando o mouse estiver sobre o componente ele deve expandir para apresentar os seus itens e sub-níveis

Imagem do menu na forma collapse mostrando em destaque a área de interação

Expandir ou Retrair#

A área action-collapse for acionada o menu deve expandir ou fechar de acordo com seus estado anterior.

Imagem do menu na forma collapse e extended

Boas práticas#

Para navegação aninhada ou hierárquica, respeitando 2 níveis de navegação para navegação vertical;

Faça:#

  • Crie grupos lógicos que melhore o acesso ao conteúdo;
  • Escreva rótulos de itens sempre com a primeira palavra maiúscula;
  • Utilize o mínimo de palavras possíveis para descrever rótulo de itens;
  • Utilize títulos descritivos;
  • Links de navegação devem ser curtos e objetivos;

Não faça:#

  • Em rótulo de ítens, não utilize artigos como: um, uma;
  • Não coloque pontuação ao fim de rótulo de itens;
  • Não escreva tudo em letras maiúsculas rótulos de itens e títulos de grupos;
  • Não construa menus com mais de 3 níveis de profundidade;
  • Não torne a largura condensada para que não haja confusão do usuário com outros controles;

Acessibilidade tratada no componente#

O componente menu foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conteúdo Web (WCAG).

Algumas diretrizes de acessibilidade já são tratadas no componente internamente e não devem ser alteradas por quem utilizar. São elas: