DropdownMenu

Menu aksi yang muncul dari sebuah tombol: aksi baris tabel, menu akun, dan kumpulan perintah yang tidak cukup ruang untuk ditampilkan sekaligus.

Dasar

Menu dibangun dari satu daftar items. Setiap baris menjalankan onSelect, lalu menu menutup sendiri dan fokus kembali ke tombolnya.

Belum ada aksi yang dipilih.

Aksi baris

Tombol ⋯ di ujung baris memakai align="end" supaya menu membuka ke arah tengah layar, bukan melewati tepinya. Tombol tanpa teks wajib diberi trigger-label. Baris color="danger" menandai aksi merusak, dan baris disabled tetap terlihat tetapi dilewati tombol panah.

PU-0042
Kantor Bekasi · Terjadwal
PU-0043
Gudang Cakung · Berjalan

Belum ada aksi yang dipilih.

Kelompok dan pemisah

type: 'heading' memberi nama kelompok di bawahnya, type: 'separator' menggambar garis. Keduanya berada di daftar yang sama dengan baris aksi, sehingga urutannya mudah dibaca. Baris dengan to dirender sebagai NuxtLink.

Trigger kustom

Slot #trigger mengganti tombol bawaan. Pasang attrs ke elemen Anda agar aria-haspopup, aria-expanded, dan penanganan keyboardnya ikut terpasang.

API

Props

Prop	Tipe	Default	Keterangan
items	W4cDropdownMenuItem[]	—	Isi menu, berurutan. Baris aksi, pemisah, dan judul kelompok berada dalam satu daftar.
label	string	—	Teks pada tombol bawaan. Kosongkan untuk tombol yang hanya berisi ikon.
triggerLabel	string	'Menu'	Nama aksesibel tombol ketika tidak ada teks yang terlihat, misalnya tombol ⋯ pada baris tabel.
align	'start' \| 'end'	'start'	Tepi tombol yang menjadi acuan menu. Pakai end untuk tombol di ujung kanan baris.
disabled	boolean	false	Menonaktifkan tombol; menu yang terbuka ikut ditutup.
color / variant / size / icon / trailingIcon	W4cButtonColor \| W4cButtonVariant \| W4cButtonSize \| string	'neutral' / 'outline' / 'md'	Penampilan tombol bawaan, diteruskan ke W4cButton. trailingIcon default chevron selama tombol punya label.

W4cDropdownMenuItem

Prop	Tipe	Default	Keterangan
label	string	—	Teks baris, atau judul kelompok saat type heading.
type	'item' \| 'separator' \| 'heading'	'item'	separator menggambar garis pemisah, heading memberi nama kelompok di bawahnya.
icon	string	—	Nama ikon Iconify di depan label, misalnya lucide:pencil.
shortcut	string	—	Petunjuk tombol keyboard di ujung baris. Hanya ditampilkan, tidak mendaftarkan shortcut.
to	NuxtLinkProps['to']	—	Merender baris sebagai NuxtLink. Menerima rute internal maupun URL eksternal.
disabled	boolean	false	Baris tidak dapat dipilih dan dilewati tombol panah, tetapi tetap terlihat.
color	'neutral' \| 'danger'	'neutral'	danger untuk aksi merusak seperti hapus atau batalkan.
onSelect	(event: Event) => void	—	Dijalankan saat baris dipilih, sebelum menu ditutup.

Slots

Slot	Tipe	Default	Keterangan
trigger	{ open: boolean; attrs: Record<string, unknown>; toggle: () => void }	—	Mengganti tombol bawaan. Pasang attrs ke kontrol Anda sendiri agar semantik menu tetap utuh.
default	—	—	Isi label tombol bawaan, alternatif dari prop label.
item	{ item: W4cDropdownMenuItem; index: number }	—	Mengganti isi satu baris, misalnya untuk avatar atau dua baris teks.

Events

Event	Tipe	Default	Keterangan
select	(item: W4cDropdownMenuItem, index: number)	—	Baris dipilih. index adalah posisinya di dalam items, termasuk pemisah dan judul.
update:open	(open: boolean)	—	Menu dibuka atau ditutup.

Komponen juga mengekspos show(), close(), dan toggle() lewat template ref, untuk menu yang dibuka dari kode.