Docs›Componentes (Admin)›mad-dropdown
Componentes (Admin)

mad-dropdown

Menu suspenso com items, separators, labels.

Menu suspenso disparado por um botao/elemento trigger. Reutiliza o padrao de navegacao dos demais componentes MAD (navigate, mad:click, open-drawer, open-modal).

Props do <mad-dropdown>

Prop Tipo Default Descricao
trigger string (HTML) '' HTML do elemento clicavel que abre o menu
align string 'start' start (alinha a esquerda) ou end (alinha a direita)
class string '' Classes CSS extras

O conteudo (slot) sao os itens do menu (<mad-dropdown-item>, <mad-dropdown-label>, <mad-dropdown-separator>).

Como trigger recebe HTML, pre-computar no @php quando for mais que uma string simples:

@php
    $trigger = '<mad-btn variant="ghost" icon="more-horizontal">Acoes</mad-btn>';
@endphp
<mad-dropdown :trigger="$trigger" align="end">
    ...
</mad-dropdown>

Props do <mad-dropdown-item>

Prop Tipo Default Descricao
icon string '' Icone Lucide (a esquerda do label)
variant string '' danger
href string '' Link externo (renderiza como <a>)
disabled bool false
class string '' Classes CSS extras

Suporta as mesmas diretivas de navegacao/acao do <mad-btn>: mad:click, navigate, open-drawer, open-modal.

Sub-componentes

Tag Descricao
<mad-dropdown-item> Item de acao
<mad-dropdown-separator /> Divisor visual
<mad-dropdown-label> Titulo/heading de grupo

Uso basico

@php $trigger = '<mad-btn variant="ghost" icon="more-horizontal">Acoes</mad-btn>'; @endphp

<mad-dropdown :trigger="$trigger" align="end">
    <mad-dropdown-label>Edicao</mad-dropdown-label>
    <mad-dropdown-item icon="pencil">Editar</mad-dropdown-item>
    <mad-dropdown-item icon="copy">Duplicar</mad-dropdown-item>
    <mad-dropdown-separator />
    <mad-dropdown-item icon="trash-2" variant="danger">Excluir</mad-dropdown-item>
</mad-dropdown>

Com mad:click (acao no servidor)

<mad-dropdown :trigger="$trigger">
    <mad-dropdown-item icon="check-circle" mad:click="onAprovar">Aprovar</mad-dropdown-item>
    <mad-dropdown-item icon="download" mad:click="onExportar">Exportar</mad-dropdown-item>
</mad-dropdown>

Com navegacao (navigate)

<mad-dropdown :trigger="$trigger">
    <mad-dropdown-item icon="pencil" navigate="ProdutoForm">Editar</mad-dropdown-item>
    <mad-dropdown-item icon="eye" navigate="ProdutoDetalhe">Visualizar</mad-dropdown-item>
</mad-dropdown>

Com open-drawer / open-modal

<mad-dropdown :trigger="$trigger">
    <mad-dropdown-item icon="sliders-horizontal" open-drawer="filtro-avancado">Filtro Avancado</mad-dropdown-item>
    <mad-dropdown-item icon="info" open-modal="detalhes">Detalhes</mad-dropdown-item>
</mad-dropdown>

<mad-dropdown :trigger="$trigger">
    <mad-dropdown-item icon="external-link" href="https://docs.empresa.com">Documentacao</mad-dropdown-item>
</mad-dropdown>

Com grupos/labels

<mad-dropdown :trigger="$trigger" align="end">
    <mad-dropdown-label>Acoes</mad-dropdown-label>
    <mad-dropdown-item icon="pencil" mad:click="onEditar">Editar</mad-dropdown-item>
    <mad-dropdown-item icon="copy" mad:click="onDuplicar">Duplicar</mad-dropdown-item>
    <mad-dropdown-separator />
    <mad-dropdown-label>Perigo</mad-dropdown-label>
    <mad-dropdown-item icon="archive" variant="danger" mad:click="onArquivar">Arquivar</mad-dropdown-item>
    <mad-dropdown-item icon="trash-2" variant="danger" mad:click="onExcluir">Excluir</mad-dropdown-item>
</mad-dropdown>

Item desabilitado

<mad-dropdown-item icon="lock" disabled>Bloqueado</mad-dropdown-item>

Alinhamento

align Comportamento
start Menu abre alinhado a borda esquerda do trigger (padrao)
end Menu abre alinhado a borda direita do trigger — usar quando o trigger esta proximo da borda direita da tela

NUNCA fazer

{{-- ERRADO: trigger como filho do dropdown --}}
<mad-dropdown>
    <mad-btn icon="more-horizontal">Acoes</mad-btn>
    <mad-dropdown-item ...>Editar</mad-dropdown-item>
</mad-dropdown>

{{-- CERTO: trigger e prop HTML --}}
@php $trigger = '<mad-btn icon="more-horizontal">Acoes</mad-btn>'; @endphp
<mad-dropdown :trigger="$trigger">
    <mad-dropdown-item ...>Editar</mad-dropdown-item>
</mad-dropdown>

{{-- ERRADO: attrs com data-mad-click manual --}}
<mad-dropdown-item attrs='data-mad-click="onEditar"'>Editar</mad-dropdown-item>

{{-- CERTO: mad:click direto --}}
<mad-dropdown-item mad:click="onEditar">Editar</mad-dropdown-item>

{{-- ERRADO: href para engine.php --}}
<mad-dropdown-item href="engine.php?class=ProdutoForm&method=show">Editar</mad-dropdown-item>

{{-- CERTO: usar navigate --}}
<mad-dropdown-item navigate="ProdutoForm">Editar</mad-dropdown-item>

{{-- ERRADO: montar dropdown manualmente com Alpine --}}
<div x-data="{ open: false }">
    <button @click="open = !open">Acoes</button>
    <div class="mad-dropdown-menu" x-show="open">...</div>
</div>

{{-- CERTO --}}
<mad-dropdown :trigger="$trigger">...</mad-dropdown>