Docs›Componentes (Admin)›mad-context-menu
Componentes (Admin)

mad-context-menu

Menu de contexto (botão direito).

Menu de contexto (botao direito). Reutiliza o padrao de navegacao dos demais componentes MAD (navigate, mad:click, open-drawer, etc).

Props do <mad-context-menu>

Prop Tipo Default Descricao
class string '' Classes CSS extras

Estrutura: conteudo direto = area clicavel (trigger). <menu> = named slot com os itens.

Props do <mad-menu-item>

Prop Tipo Default Descricao
icon string '' Icone Lucide
shortcut string '' Atalho de teclado exibido (ex: Ctrl+C)
variant string '' danger, success
href string '' Link externo
disabled bool false
class string '' Classes CSS extras
attrs string '' Atributos HTML extras

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

Sub-componentes

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

Uso basico

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

    <menu>
        <mad-menu-item icon="copy" shortcut="Ctrl+C">Copiar</mad-menu-item>
        <mad-menu-item icon="clipboard" shortcut="Ctrl+V">Colar</mad-menu-item>
        <mad-menu-separator />
        <mad-menu-item icon="trash-2" variant="danger">Excluir</mad-menu-item>
    </menu>
</mad-context-menu>

Com mad:click (acao no servidor)

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

Com navegacao (navigate)

<menu>
    <mad-menu-item icon="pencil" navigate="ProdutoForm">Editar</mad-menu-item>
    <mad-menu-item icon="eye" navigate="ProdutoDetalhe">Visualizar</mad-menu-item>
</menu>

Com open-drawer / open-modal

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

Com grupos/labels

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

Com atalhos de teclado (visual only)

<menu>
    <mad-menu-item icon="scissors" shortcut="Ctrl+X" mad:click="onRecortar">Recortar</mad-menu-item>
    <mad-menu-item icon="copy" shortcut="Ctrl+C" mad:click="onCopiar">Copiar</mad-menu-item>
    <mad-menu-item icon="clipboard" shortcut="Ctrl+V" mad:click="onColar">Colar</mad-menu-item>
    <mad-menu-separator />
    <mad-menu-item icon="rotate-ccw" shortcut="Ctrl+Z" mad:click="onDesfazer">Desfazer</mad-menu-item>
</menu>

Item desabilitado

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

NUNCA fazer

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

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

{{-- ERRADO: usar contextmenu nativo com JS manual --}}
<div oncontextmenu="showMenu(event)">...</div>

{{-- CERTO --}}
<mad-context-menu>
    <div>...</div>
    <menu>
        <mad-menu-item icon="pencil" mad:click="onEditar">Editar</mad-menu-item>
    </menu>
</mad-context-menu>

{{-- ERRADO: dropdown com @contextmenu manual --}}
<div @contextmenu.prevent="open = true">
    <div class="mad-dropdown-menu">...</div>
</div>

{{-- CERTO --}}
<mad-context-menu>...</mad-context-menu>