Contextual Menu

O que é

É o menu que exibe uma lista de opções adicionais usado quando há uma restrição de espaço em tela para o desenvolvimento do fluxo.

Anatomia

1. Label

Deve comunicar a ação a ser tomada e conter um verbo.

2. Ícone (Opcional)

Reforço visual. Deve ser aplicado na cor darker. Não utilize o mesmo ícone para duas ações. Caso não seja óbvio qual ícone usar, opte por um Contextual Menu sem ícones.

3. Divisor (Opcional)

Serve para organizar e agrupar o menu contextual por seções.

4. Contêiner

Comporta todos os elementos do componente.

Estados

Aplicação

O Contextual menu é ativado por um botão de ação representado pelo ícone Options do Icon kit. Podemos utilizá-lo em casos onde necessitamos suprimir opções clicáveis.

• Deve ser usado no final da linha de uma tabela quando não há mais espaço em tela para mais opções.
• Os itens do menu devem ser curtos e objetivos.
• A posição do Contextual Menu na tela afeta onde e como ele aparecerá. Se aberto na parte superior da tela, ele se expandirá para baixo.

Exemplos

Exemplos de implementação

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>
        Label
      </th>
      <th>Label</th>
      <th>Label</th>
      <th>Label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
      <td>
        <div class="dropdown is-right is-active">
          <button class="button is-icon" aria-haspopup="true">
            <span class="icon is-medium">
              <i class="fak fa-options-medium" aria-hidden="true"></i>
            </span>
          </button>
          <div class="dropdown-menu" id="dropdown-menu" role="menu">
            <div class="dropdown-content">
              <a class="dropdown-item">
                <span class="icon is-small">
                    <i class="fak fa-edit-small"></i>
                </span>
                Editar
              </a>
              <a class="dropdown-item is-disabled">
                <span class="icon is-small">
                    <i class="fak fa-trash-small"></i>
                </span>
                Excluir
              </a>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>