Dropdown Componentes

O que é

Lista de ações ou links que aparece ancorada a um botão. Usado em menus de ação, seletores simples, menus de usuário e botões de contexto.

Como funciona

O clique no gatilho .sw-drop-tgl (ou .sw-dropdown-tgl) alterna a classe is-open no contêiner [sw-drop] pai. O gatilho ganha efeito nativo de botão e cursor: pointer, e você também pode combiná-lo com qualquer variante sw-btn (ex: class="sw-btn sw-btn-pri sw-drop-tgl"). Um listener no documento fecha ao clicar fora; ESC também fecha.

Exemplos

<div class="demo-row" style="flex-wrap:wrap; gap:0.6rem;">
  <div sw-drop>
    <button sw-btn class="sw-btn-pri sw-drop-tgl">
      Primary <i class="swi-chevron-down sw-drop-arrow"></i>
    </button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Novo Registro</a>
      <a class="sw-drop-it" href="#!">Editar Dados</a>
      <a class="sw-drop-it is-dis" href="#!">Excluir (desabilitado)</a>
    </div>
  </div>

  <div sw-drop>
    <button sw-btn class="sw-btn-sec sw-drop-tgl">
      Secondary <i class="swi-chevron-down sw-drop-arrow"></i>
    </button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Visualizar Detalhes</a>
      <a class="sw-drop-it" href="#!">Duplicar Item</a>
    </div>
  </div>

  <div sw-drop>
    <button sw-btn class="sw-btn-suc sw-drop-tgl">
      Success <i class="swi-chevron-down sw-drop-arrow"></i>
    </button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Aprovar Pedido</a>
      <a class="sw-drop-it" href="#!">Exportar Relatório</a>
    </div>
  </div>

  <div sw-drop>
    <button sw-btn class="sw-btn-war sw-drop-tgl">
      Warning <i class="swi-chevron-down sw-drop-arrow"></i>
    </button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Sinalizar Alerta</a>
      <a class="sw-drop-it" href="#!">Pausar Serviço</a>
    </div>
  </div>

  <div sw-drop>
    <button sw-btn class="sw-btn-err sw-drop-tgl">
      Error <i class="swi-chevron-down sw-drop-arrow"></i>
    </button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Revogar Acesso</a>
      <a class="sw-drop-it" href="#!">Excluir Definitivamente</a>
    </div>
  </div>

  <div sw-drop>
    <button sw-btn class="sw-btn-out sw-drop-tgl">
      Outline <i class="swi-chevron-down sw-drop-arrow"></i>
    </button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Configurações</a>
      <a class="sw-drop-it" href="#!">Histórico de Logs</a>
    </div>
  </div>
</div>

<div class="demo-row" style="flex-wrap:wrap; gap:0.6rem;">
  <div sw-drop>
    <button class="sw-drop-tgl">Padrão (Esquerda) <i class="swi-chevron-down sw-drop-arrow"></i></button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Opção 1</a>
      <a class="sw-drop-it" href="#!">Opção 2</a>
    </div>
  </div>

  <div sw-drop class="is-rgt">
    <button class="sw-drop-tgl">Alinhado à Direita (.is-rgt) <i class="swi-chevron-down sw-drop-arrow"></i></button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Alinhado à direita 1</a>
      <a class="sw-drop-it" href="#!">Alinhado à direita 2</a>
    </div>
  </div>

  <div sw-drop class="is-up">
    <button class="sw-drop-tgl">Abre pra Cima (.is-up) <i class="swi-chevron-down sw-drop-arrow"></i></button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Ação superior 1</a>
      <a class="sw-drop-it" href="#!">Ação superior 2</a>
    </div>
  </div>
</div>

<div class="demo-row" style="flex-wrap:wrap; gap:0.6rem;">
  <div sw-drop class="is-zoom">
    <button sw-btn class="sw-btn-soft sw-btn-pri sw-drop-tgl">
      Entrada com Zoom (.is-zoom) <i class="swi-chevron-down sw-drop-arrow"></i>
    </button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Efeito de escala suave</a>
      <a class="sw-drop-it" href="#!">Transição refinada</a>
    </div>
  </div>

  <div sw-drop class="is-tint">
    <button sw-btn class="sw-btn-soft sw-btn-sec sw-drop-tgl">
      Fundo Tint (.is-tint) <i class="swi-chevron-down sw-drop-arrow"></i>
    </button>
    <div class="sw-drop-mn">
      <a class="sw-drop-it" href="#!">Fundo sutil na cor primária</a>
      <a class="sw-drop-it" href="#!">Bordas com brilho suave</a>
    </div>
  </div>
</div>

<div sw-drop>
  <button sw-btn class="sw-btn-pri sw-drop-tgl">
    Ações do Projeto <i class="swi-chevron-down sw-drop-arrow"></i>
  </button>
  <div class="sw-drop-mn">
    <a class="sw-drop-it" href="#!">Editar Informações</a>
    <div sw-drop>
      <button class="sw-drop-tgl sw-drop-it">Compartilhar <i class="swi-chevron-right sw-drop-arrow"></i></button>
      <div class="sw-drop-mn">
        <a class="sw-drop-it" href="#!">Copiar Link Público</a>
        <a class="sw-drop-it" href="#!">Enviar por E-mail</a>
        <a class="sw-drop-it" href="#!">Gerar QR Code</a>
      </div>
    </div>
    <div sw-drop>
      <button class="sw-drop-tgl sw-drop-it">Exportar Arquivo <i class="swi-chevron-right sw-drop-arrow"></i></button>
      <div class="sw-drop-mn">
        <a class="sw-drop-it" href="#!">Formato PDF</a>
        <a class="sw-drop-it" href="#!">Planilha Excel (XLSX)</a>
        <a class="sw-drop-it" href="#!">Dados JSON</a>
      </div>
    </div>
    <a class="sw-drop-it is-dis" href="#!">Arquivar Projeto (bloqueado)</a>
  </div>
</div>

Atributos

Variantes

Eventos

API (JavaScript)

Requisitos

Nenhuma.

Limitações — o que ele não faz

• Comportamento herdado do SW original: se você clica direto no gatilho de um segundo dropdown enquanto o primeiro está aberto, o primeiro pode ficar aberto.
• Não possui cálculo dinâmico de colisão com a viewport (use is-rgt ou is-up conforme o posicionamento no layout).