Dropdown Componentes

O que é

É o menu "Minha conta ▾" (Perfil, Configurações, Sair), o "⋮" de ações numa linha de tabela, ou o "Exportar ▾" com PDF e planilha. A pessoa clica no botão e a lista aparece embaixo dele; escolheu uma opção, clicou fora ou apertou Esc, ela fecha. Você monta com atributos: o grupo (sw-dropdown), o botão (sw-dropdown-tgl), a lista (sw-dropdown-mn) e cada opção (sw-dropdown-it).

O JavaScript do SWCore, ao abrir, leva a lista para o fim da página e a posiciona exatamente embaixo do botão. Por isso ela aparece por cima de tudo, mesmo dentro de um cartão ou tabela que "corta" o que sai para fora. Se não couber embaixo, abre para cima; se não couber à direita, encosta na borda. Quando fecha, volta para o lugar de origem no HTML.

Quando usar

• Menu do usuário no topo do site ou do painel (foto + nome ▾).
• Ações de uma linha de tabela ou de um cartão ("⋮": Editar, Duplicar, Excluir).
• Botão com várias saídas: "Exportar ▾" → PDF, Planilha; "Compartilhar ▾" → WhatsApp, E-mail.
• Para escolher um valor dentro de um formulário, use o Select, não o dropdown.

Comece aqui

1. 1

   Coloque o SWCore: o CSS no <head> e o JavaScript no fim do <body> (é ele que abre e posiciona). O terceiro arquivo traz os ícones swi-*.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Escreva o grupo com o botão e a lista. Clique:

   Minha conta

   Meus pedidos Endereços Sair

   <div sw-dropdown>
     <button sw-dropdown-tgl sw-btn="pri">Minha conta <i class="swi-chevron-down" sw-dropdown-arr></i></button>
     <div sw-dropdown-mn>
       <a href="/pedidos" sw-dropdown-it>Meus pedidos</a>
       <a href="/enderecos" sw-dropdown-it>Endereços</a>
       <a href="/sair" sw-dropdown-it>Sair</a>
     </div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<header class="flx j-sb alc gap-3">
  <strong>Doces da Bia · Painel</strong>
  <div sw-dropdown="rgt">
    <button sw-dropdown-tgl sw-btn="ghost" aria-label="Menu do usuário">
      <span sw-avt="p">BR</span> Beatriz <i class="swi-chevron-down" sw-dropdown-arr></i>
    </button>
    <div sw-dropdown-mn>
      <div sw-dropdown-hdr>beatriz@docesdabia.com</div>
      <a href="/perfil" sw-dropdown-it><i class="swi swi-user"></i> Meu perfil</a>
      <a href="/loja" sw-dropdown-it><i class="swi swi-store"></i> Dados da loja</a>
      <div sw-dropdown-div></div>
      <a href="/sair" sw-dropdown-it="dgr"><i class="swi swi-log-out"></i> Sair</a>
    </div>
  </div>
</header>

<td>
  <div sw-dropdown="rgt">
    <button sw-dropdown-tgl sw-btn="ghost rnd p" aria-label="Ações do pedido">
      <i class="swi-dots-vertical-rounded"></i>
    </button>
    <div sw-dropdown-mn>
      <div sw-dropdown-it><i class="swi swi-show"></i> Ver detalhes</div>
      <div sw-dropdown-it><i class="swi swi-printer"></i> Imprimir etiqueta</div>
      <div sw-dropdown-div></div>
      <div sw-dropdown-it="dgr"><i class="swi swi-x-circle"></i> Cancelar pedido</div>
    </div>
  </div>
</td>

<div sw-dropdown id="compartilhar">
  <button sw-dropdown-tgl sw-btn="out">Compartilhar <i class="swi-chevron-down" sw-dropdown-arr></i></button>
  <div sw-dropdown-mn>
    <div sw-dropdown-it data-canal="whatsapp"><i class="swi swi-share-alt"></i> WhatsApp</div>
    <div sw-dropdown-it data-canal="email"><i class="swi swi-envelope"></i> E-mail</div>
  </div>
</div>

<script>
  // a lista vai para o fim da página quando abre: ouça no document
  document.addEventListener('click', (e) => {
    const it = e.target.closest('[data-canal]');
    if (it) console.log('escolheu', it.dataset.canal);
  });

  document.getElementById('compartilhar').addEventListener('sw:dropdown:open', () => {
    console.log('abriu');
  });

  SW.Dropdown.open('#compartilhar');   // abre por código
  SW.Dropdown.close('#compartilhar');  // fecha por código
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css — o visual.
• swcore.min.js — abrir, posicionar e fechar.
• swcore.compl.min.css — os ícones swi-* (seta e ícones das opções).

Cuidados — erros comuns

• dgr e dis são palavras DENTRO do atributo: sw-dropdown-it="dgr". Como classe (class="dgr") não funciona.
• A lista vai para o fim da página enquanto está aberta. Um CSS seu do tipo .meu-card [sw-dropdown-mn] deixa de valer nessa hora — estilize pela própria lista (dê uma classe a ela).
• A lista (sw-dropdown-mn) tem que ser filha direta do sw-dropdown. Embrulhada em outra div, o botão não abre nada.

O que ele não faz

• Não dá para andar pelas opções com as setas do teclado; o Esc fecha. Para as opções receberem o Tab, escreva-as como <a href> ou <button>.
• Submenu abre no passar do mouse ou no foco — no celular, prefira listas sem submenu.
• Abre só no clique, não ao passar o mouse sobre o botão.