MenuButton

Satu trigger dengan caret inline yang membuka dropdown menu — tidak ada segmen aksi terpisah seperti SplitButton.

Bagian dari: vue-sabutton · Family: Menu

---

Import

import { MenuButton } from '@bpmlib/vue-sabutton';

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

<script setup lang="ts">
import { MenuButton } from '@bpmlib/vue-sabutton';

const menu = [
  { label: 'Profil', href: '/profile' },
  { label: 'Pengaturan', href: '/settings' },
  { label: 'Keluar', onClick: logout },
];
</script>

<template>
  <MenuButton color="secondary" :menu="menu">Menu</MenuButton>
</template>

---

API Reference

MenuButton

Cara Penggunaan:

Trigger-nya tidak pernah membawa href sendiri — tidak ada fork button-vs-link seperti SplitButton/SplitLinkButton. Caret dirender inline di dalam trigger (seperti icon external-link LinkButton), bukan sebagai segmen terpisah. Lihat Core Concepts: menu/menuFieldMap untuk kontrak item.

Accessibility:

Sama seperti SplitButton — keyboard navigation dan focus management pada dropdown identik.

Props

Name	Type	Default	Description
color	ButtonColor	'secondary'	Sama seperti BasicButton
outline	boolean	false	Sama seperti BasicButton
small	boolean	false	Sama seperti BasicButton
disabled	boolean	false	Satu element, satu state — kontras dengan SplitButton/SplitLinkButton's SplitDisabled yang punya dua segmen untuk di-toggle terpisah
icon	IconInput	-	—
tooltip	string	-	—
tooltipColor	ButtonColor	mengikuti color	—
badge	boolean | string	-	—
badgeColor	ButtonColor	mengikuti color	—
badgePosition	BadgePosition	'tr'	—
menu	T[]	required	Sama seperti SplitButton
menuFieldMap	MenuItemFieldMap<T>	-	—
menuPlacement	'bottom-start' | 'bottom-end'	'bottom-start'	—
menuAnchorIcon	boolean	true	—

Tidak ada expanded/onLoading/pulse/type/asSubmit/asReset/form — trigger tidak form-shaped dan tidak punya konsep "busy" terpisah dari menu terbuka/tertutup.

Slots

Name	Props	Description
default	-	Isi teks/konten trigger. Kosong → icon-only (caret tetap muncul)
item	{ item: T, index: number }	Sama seperti SplitButton

---

Styling

Styling sepenuhnya self-contained, memakai variable BasicButton yang sama untuk trigger, ditambah --sa-bt--menu-z (lihat SplitButton) untuk panel dropdown. Tidak ada styling seam segmen (sa-bt--split-primary/sa-bt--split-caret) karena hanya ada satu segmen.

---

Related Components

Family Menu tidak punya anggota lain — berbagi kontrak menu/menuFieldMap dengan:

• SplitButton — dua segmen (aksi form-shaped + caret)
• SplitLinkButton — dua segmen (aksi navigation-shaped + caret)