MAD Lab

Navegação e overlays

mad-dropdown mad-dropdown-item mad-context-menu mad-menu-item

Básico

mad-dropdown com trigger HTML, align start/end, label, separator e item danger.

resources/views/tutor/examples/navegacao-dropdown/basico.blade.php

@php
    // trigger recebe HTML — pre-computar no @php evita aspas quebrando o
    // atributo do <mad-dropdown> (a tag NAO tem slot nomeado pra isso).
    $triggerAcoes = '<mad-btn variant="ghost" icon="more-horizontal">Ações</mad-btn>';
@endphp
<div style="display:flex;gap:1rem;flex-wrap:wrap;">
    <mad-dropdown :trigger="$triggerAcoes" align="start">
        <mad-dropdown-label>Edição</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>

    <mad-dropdown :trigger="$triggerAcoes" align="end">
        <mad-dropdown-item icon="download">Exportar</mad-dropdown-item>
        <mad-dropdown-item icon="external-link" href="https://mad.dev">Documentação</mad-dropdown-item>
        <mad-dropdown-item icon="lock" disabled>Bloqueado</mad-dropdown-item>
    </mad-dropdown>
</div>

Ações no servidor (ação wire)

mad-dropdown-item com mad:click real.

resources/views/tutor/examples/navegacao-dropdown/wire-acoes.blade.php

@php
    $triggerLinha = '<mad-btn variant="outline" icon="chevron-down">Linha #42</mad-btn>';
@endphp
<mad-dropdown :trigger="$triggerLinha" align="start">
    <mad-dropdown-item icon="check-circle" mad:click="onAprovarDropdown">Aprovar</mad-dropdown-item>
    <mad-dropdown-item icon="download" mad:click="onExportarDropdown">Exportar</mad-dropdown-item>
</mad-dropdown>

app/control/Tutor/TutorNavegacaoDropdown.php

public function onAprovarDropdown(): MadResponse
{
    return (new MadResponse())->toast('Item aprovado!', 'success');
}

Abrindo drawer/modal

mad-dropdown-item com open-drawer e open-modal.

resources/views/tutor/examples/navegacao-dropdown/com-overlay.blade.php

@php
    $triggerMais = '<mad-btn variant="outline" icon="more-vertical">Mais</mad-btn>';
@endphp
<mad-dropdown :trigger="$triggerMais" align="end">
    <mad-dropdown-item icon="sliders-horizontal" open-drawer="tutor-dropdown-drawer">Filtro avançado</mad-dropdown-item>
    <mad-dropdown-item icon="info" open-modal="tutor-dropdown-modal">Detalhes</mad-dropdown-item>
</mad-dropdown>

<mad-drawer name="tutor-dropdown-drawer" title="Filtro avançado" icon="sliders-horizontal" size="sm">
    <p>Drawer aberto a partir de um item de dropdown (open-drawer).</p>
</mad-drawer>

<mad-modal name="tutor-dropdown-modal" title="Detalhes" size="sm">
    <p>Modal aberto a partir de um item de dropdown (open-modal).</p>
</mad-modal>

Menu de contexto

mad-context-menu + mad-menu-item — botão direito, atalho visual e variant danger.

Clique com o botão direito aqui

resources/views/tutor/examples/navegacao-dropdown/context-menu.blade.php

<mad-context-menu>
    <div style="padding:40px;border:1px dashed var(--mad-border);border-radius:8px;text-align:center;">
        Clique com o botão direito aqui
    </div>

    <menu>
        <mad-menu-label>Edição</mad-menu-label>
        <mad-menu-item icon="copy" shortcut="Ctrl+C" mad:click="onCopiarContexto">Copiar</mad-menu-item>
        <mad-menu-item icon="clipboard" shortcut="Ctrl+V" disabled>Colar</mad-menu-item>
        <mad-menu-separator />
        <mad-menu-item icon="trash-2" variant="danger" mad:click="onExcluirContexto">Excluir</mad-menu-item>
    </menu>
</mad-context-menu>

app/control/Tutor/TutorNavegacaoDropdown.php

public function onExcluirContexto(): MadResponse
{
    return (new MadResponse())->toast('Item excluído (simulado).', 'warning');
}

← AnteriorDrawer Próxima →Accordion

Código-fonte completo da página

app/control/Tutor/TutorNavegacaoDropdown.php

<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;
use Mad\Http\MadResponse;

/**
 * TutorNavegacaoDropdown — página "Dropdown e menus" do MAD Lab.
 *
 * Cobre mad-dropdown/mad-dropdown-item (trigger HTML pré-computado no
 * @php, align start/end, mad:click real, open-drawer/open-modal,
 * separator/label/danger) e mad-context-menu/mad-menu-item (botão direito,
 * atalho visual, danger).
 */
class TutorNavegacaoDropdown extends TutorPage
{
    protected string $catalogKey = 'navegacao_dropdown';

    public function onAprovarDropdown(): MadResponse
    {
        return (new MadResponse())->toast('Item aprovado!', 'success');
    }

    public function onExportarDropdown(): MadResponse
    {
        return (new MadResponse())->toast('Exportação iniciada — você recebe um e-mail quando terminar.', 'info');
    }

    public function onCopiarContexto(): MadResponse
    {
        return (new MadResponse())->toast('Copiado! (simulado)', 'info');
    }

    public function onExcluirContexto(): MadResponse
    {
        return (new MadResponse())->toast('Item excluído (simulado).', 'warning');
    }
}

resources/views/tutor/navegacao/dropdown.blade.php

<x-tutor-page page="navegacao_dropdown">
    <x-tutor-demo demo="tutor.examples.navegacao-dropdown.basico"
        title="Básico" desc="mad-dropdown com trigger HTML, align start/end, label, separator e item danger." />

    <x-tutor-demo demo="tutor.examples.navegacao-dropdown.wire-acoes"
        title="Ações no servidor (ação wire)" desc="mad-dropdown-item com mad:click real."
        php="TutorNavegacaoDropdown::onAprovarDropdown" />

    <x-tutor-demo demo="tutor.examples.navegacao-dropdown.com-overlay"
        title="Abrindo drawer/modal" desc="mad-dropdown-item com open-drawer e open-modal." />

    <x-tutor-demo demo="tutor.examples.navegacao-dropdown.context-menu"
        title="Menu de contexto" desc="mad-context-menu + mad-menu-item — botão direito, atalho visual e variant danger."
        php="TutorNavegacaoDropdown::onExcluirContexto" />
</x-tutor-page>