Dropdown Menu

Menu suspenso de ações ativado por um elemento gatilho.

Uso

<script setup lang="ts">
import { Menu, Button } from '@halfbyte/maka'

const itens = [
  { value: 'editar', label: 'Editar' },
  { value: 'duplicar', label: 'Duplicar' },
  { value: 'excluir', label: 'Excluir' },
]

function onSelect(value: string) {
  console.log(value)
}
</script>

<template>
  <Menu :items="itens" @select="onSelect">
    <template #trigger>
      <Button variant="outline">Ações</Button>
    </template>
  </Menu>
</template>

Com grupos

<script setup lang="ts">
import { Menu, Button } from '@halfbyte/maka'

const grupos = [
  {
    label: 'Conta',
    items: [
      { value: 'perfil', label: 'Perfil' },
      { value: 'config', label: 'Configurações' },
    ],
  },
  {
    items: [
      { value: 'sair', label: 'Sair' },
    ],
  },
]
</script>

<template>
  <Menu :groups="grupos" @select="onSelect">
    <template #trigger>
      <Button>Menu</Button>
    </template>
  </Menu>
</template>

Props

Prop	Tipo	Padrão
items	MenuItem[]	—
groups	MenuGroup[]	—
placement	"bottom-start" | "bottom-end" | "top-start" | "top-end"	"bottom-start"
disabled	boolean	false

MenuItem

Campo	Tipo	Descrição
value	string	Identificador único do item
label	string	Texto exibido
disabled	boolean	Desabilita o item (opcional)

MenuGroup

Campo	Tipo	Descrição
label	string	Rótulo do grupo (opcional)
items	MenuItem[]	Lista de itens pertencentes ao grupo

Slots

Slot	Descrição
trigger	Elemento que abre o menu
icon-{value}	Ícone personalizado para um item
suffix-{value}	Conteúdo à direita de um item

Events

Evento	Payload	Descrição
select	string	Emitido ao clicar em um item