Side Menu

O que é?

O Side Menu é localizado na lateral esquerda da tela e pode conter quantas opções forem necessárias, além de rolagem vertical, se preciso.

Como usar

• Apresentar uma lista de itens agrupados no contexto das ferramentas;
• Lista de ações (funcionalidades) de uma ferramenta;
• Exibir lista de itens do contexto dentro de uma página;
• Não use para ações que transpassem a ferramenta, como opções de conta na plataforma ou ir para outra ferramenta. Para isso, use o Menu Global (megamenu), o Menu de Apoio ou o Perfil do Usuário, dependendo da opção.

Anatomia

O Side Menu possui 2 níveis: o primeiro nível contém itens e categorias e o segundo subitens. Deve ser usado para permitir que as pessoas usuárias naveguem em projetos, espaços e repositórios correlacionados.

Ver diretrizes de tabs >

Estrutura

1. Customization (Optional) Para localizar a pessoa usuária dentro da plataforma, é possível adicionar no topo do menu uma customização com nome e ícone da ferramenta ou canal.

2. Divider Servem para organizar e agrupar de maneira global o menu por seções; separam o conteúdo em grupos claros.

3. Item Os itens são agrupados pelo Divider e encaminham a pessoa usuária para uma página ou realizam uma ação (que não implique na abertura de subitens no Side Menu).

4. Category As categorias possuem uma seta e não levam a pessoa usuária para uma página. A ação realizada ao clica-la é a abertura de mais itens no menu (que chamamos de subitens).

5. Subitem Os Subitens são agrupados pela Category, devem abordar o mesmo assunto ou segmento.

Estados do Side Menu

Os estados do Side Menu possuem variações de estado de acordo com a interação, são denominados: Inactive, Selected e Hover. Por exemplo:

Aplicação

Através da Library linkada, acesse o asset Menu e puxe o componente para o seu projeto. Saiba mais através do tutorial “Como Aplicar o Side Menu no meu projeto?”

Acessar tutorial >

Badges de notificação

É possível notificar o usuário com versões de badges exclusivas para o Side Menu. Ao contrário do componente Badge, essa versão é um asset exclusivo do menu e possui três versões.

Badge	Uso
Novo	Indica novidades ou features novas
Beta	Sinaliza funções em estágio de testes / beta
	Notificação por número, relacionadas a quantidade

Abaixo a aplicação das badges no menu:

<aside class="menu">
  <p class="menu-label">
    <span class="title">Title</span>
  </p>
  <p class="menu-label">
    divider
  </p>
  <ul class="menu-list">
    <li>
      <a>
        <span>Item</span>
        <span class="badge is-primary is-light">Novo</span>
      </a>
    </li>
    <li>
      <a>
        <span>Item</span>
        <span class="badge is-danger" data-value="1"></span>
      </a>
    </li>
    <li>
      <a class="is-active">
        <span>Item</span>
        <span class="badge is-grey">Beta</span>
      </a>
    </li>
  </ul>
</aside>

Boas Práticas

• Se existir navbar com menu, o Side Menu torna-se secundário, ou seja, do contexto da página que está inserido. Ex.: Página de produto;
• O Side menu pode ser usado como menu primário; quando usado como menu secundário, é importante utilizar Breadcrumbs para indicar o caminho percorrido pelo usuário;
• Todo o item no menu deve levar o usuário até uma página ou ação associada;
• O nível secundário deve estar hierarquicamente relacionado com o primário;
• Não deve ter mais do que 2 níveis de menu;
• Quando selecionamos um subitem, a categoria não deve colapsar. O item deve ficar visível quando selecionado.
• Item e Category são hierarquicamente iguais e visualmente parecidos, mas realizam ações diferentes.
• Se o usuário desejar abrir outras categorias para visualizar todos os subitens, deve ser possível.
• Quando um subitem for selecionado e uma nova página aberta, todas as categorias devem ser colapsadas e apenas a aquela com o subitem selecionado deve se manter aberta.
• Caso as categorias estejam abertas e um item seja selecionado, todas as categorias devem ser fechadas.
• Não exclua as células do menu.
• O Empty State serve para informar que não há conteúdo na célula do menu.

Conteúdo

• As opções devem ser listadas em ordem lógica, seja por ordem cronológica, de importância ou outra;
• Os subitens do menu devem ter relação direta com as categorias do mesmo;
• Caso os itens do menu sejam de ação, siga as diretrizes de conteúdo de Botões;
• Caso sejam atalhos para páginas, utilize substantivos;
• O título da página e o atalho devem ser os mesmos. Por exemplo, se o título da página é “Monitoramento”, o item do menu que correspondente deve conter a mesma nomenclatura.
• Evite o uso de artigos nos itens de menu. Por exemplo, use “Adicionar a fila” em vez de “Adicionar a uma fila”;
• Aplique a tipografia em caixa alta no Divider. Ex.: FINANCEIRO
• Seja sucinto. Não forme frases.

Acessibilidade

O menu como um todo deve receber apenas uma parada de foco. Use as setas do teclado para navegar no menu (para cima e para baixo).