Pular para o conte√ļdo principal

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: