Dropdown
Painel flutuante reutilizável para menus, selects e autocomplete. Sem trigger — cada componente que usa cuida do seu gatilho. Usa tokens overlay para cores. Dark mode automático.
Variantes
Padrão, com ícone, com avatar, checkbox e radio. Hover nos itens para ver os estados.
Carregando exemplo...
Propriedades
Classes disponíveis para configurar o dropdown.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.dropdown-menu | classe | — | Painel flutuante. Posição absolute, z-index 1000. |
.dropdown-menu.is-open | classe | — | Exibe o painel. |
.dropdown-list | classe | — | Lista interna com scroll. |
.dropdown-item | classe | — | Item clicável (48px). |
.dropdown-item--avatar | classe | — | Item com avatar (56px). |
.dropdown-item--danger | classe | — | Item destrutivo (vermelho). |
.dropdown-item--check | classe | — | Item com checkbox. |
.dropdown-item--radio | classe | — | Item com radio. |
.dropdown-divider | classe | — | Divisor horizontal entre itens. |
.dropdown-header | classe | — | Título de seção (não clicável). |
.dropdown-menu--bottom | classe | — | Posiciona abaixo do trigger (padrão). |
.dropdown-menu--top | classe | — | Posiciona acima do trigger. |
.dropdown-menu--bottom-right | classe | — | Abaixo, alinhado à direita. |
.dropdown-menu--top-right | classe | — | Acima, alinhado à direita. |
Código
Snippets prontos para copiar e usar.
Padrão
html
<div style="position: relative;">
<!-- Trigger (botão, input, etc.) -->
<div class="dropdown-menu dropdown-menu--bottom is-open">
<div class="dropdown-list">
<button class="dropdown-item">
<span class="dropdown-item-label">Opção 1</span>
</button>
<button class="dropdown-item">
<span class="dropdown-item-label">Opção 2</span>
</button>
</div>
</div>
</div>Com ícone e item destrutivo
html
<div class="dropdown-menu is-open">
<div class="dropdown-list">
<button class="dropdown-item">
<span class="dropdown-item-icon"><!-- SVG --></span>
<span class="dropdown-item-label">Editar</span>
</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item dropdown-item--danger">
<span class="dropdown-item-icon"><!-- SVG --></span>
<span class="dropdown-item-label">Excluir</span>
</button>
</div>
</div>Com avatar (pesquisa de usuários)
html
<div class="dropdown-menu is-open">
<div class="dropdown-list">
<button class="dropdown-item dropdown-item--avatar">
<img class="dropdown-item-avatar" src="foto.jpg" alt="">
<span class="dropdown-item-content">
<span class="dropdown-item-label">João Silva</span>
<span class="dropdown-item-support">123.456.789-00</span>
</span>
</button>
</div>
</div>Com checkbox
html
<div class="dropdown-menu is-open">
<div class="dropdown-list">
<button class="dropdown-item dropdown-item--check is-checked">
<span class="dropdown-check-box">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6L5 8.5L9.5 3.5"/></svg>
</span>
<span class="dropdown-item-label">Ativo</span>
</button>
</div>
</div>Tokens utilizados
Variáveis semânticas overlay aplicadas ao componente.
| Token | Uso |
|---|---|
--surface-overlay-neutral-container-default | Background do item |
--surface-overlay-neutral-container-hover | Background no hover |
--surface-overlay-alert-container-error | Background do item destrutivo no hover |
--border-overlay-neutral-default | Borda do painel e divisor |
--border-overlay-neutral-strong | Borda do checkbox/radio |
--text-overlay-neutral-secondary | Cor do texto padrão |
--text-overlay-neutral-default | Cor do texto no hover |
--text-overlay-neutral-subtle | Cor do texto de suporte |
--text-overlay-error-default | Cor do texto destrutivo |
--icon-overlay-neutral-secondary | Cor do ícone padrão |
--icon-overlay-neutral-default | Cor do ícone no hover |
--icon-overlay-error-default | Cor do ícone destrutivo |
--radius-default | Border-radius do painel (6px) |
--spacing-3 | Padding vertical / gap item (12px) |
--spacing-4 | Padding horizontal item (16px) |