Menubar

Barra de menus horizontal estilo aplicação desktop, com múltiplos dropdowns independentes.

Uso

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

const menus = [
  {
    value: 'arquivo',
    label: 'Arquivo',
    items: [
      { value: 'novo',   label: 'Novo' },
      { value: 'abrir',  label: 'Abrir…' },
      { value: 'salvar', label: 'Salvar' },
    ],
  },
  {
    value: 'editar',
    label: 'Editar',
    groups: [
      {
        items: [
          { value: 'desfazer',  label: 'Desfazer' },
          { value: 'refazer',   label: 'Refazer' },
        ],
      },
      {
        items: [
          { value: 'copiar',    label: 'Copiar' },
          { value: 'colar',     label: 'Colar' },
        ],
      },
    ],
  },
]

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

<template>
  <Menubar :menus="menus" @select="onSelect" />
</template>

Props

Prop	Tipo	Padrão
menus	MenubarMenu[]	obrigatório

MenubarMenu

Campo	Tipo	Descrição
value	string	Identificador único do menu
label	string	Rótulo exibido na barra
items	MenubarItem[]	Lista plana de itens (exclusivo com groups)
groups	MenubarGroup[]	Grupos de itens com separadores

MenubarItem

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

Events

Evento	Payload	Descrição
select	(menu: string, value: string)	Emitido ao clicar em um item