คอมโพเนนต์ทั้งหมด

<Menu
  label="บัญชี"
  trigger={<Button variant="outline">บัญชี</Button>}
  items={[
    { type: "label", label: "khun@aswinology.com" },
    { label: "โปรไฟล์", icon: <User />, onSelect: openProfile },
    { label: "ตั้งค่า", icon: <GearSix />, shortcut: "⌘,", href: "/settings" },
    { type: "separator" },
    { label: "ออกจากระบบ", icon: <SignOut />, tone: "danger", onSelect: signOut },
  ]}
/>

Props

Prop	Type	Default	คำอธิบาย
`trigger`	`ReactElement`	`-`	ปุ่มเปิด ได้ aria-haspopup และ aria-expanded
`items`	`MenuItem[]`	`-`	item, separator หรือ label
`align`	`"start" \| "end"`	`"start"`	ชิดซ้ายหรือขวาของปุ่ม
`label`	`string`	`-`	ชื่อเมนูสำหรับโปรแกรมอ่านหน้าจอ

role=menu และ menuitem ตาม WAI-ARIA
โฟกัสรายการแรกเมื่อเปิด และกลับไปที่ปุ่มเมื่อเลือก

ใช้เมื่อไร

ควรทำ

ใช้กับคำสั่งที่เกี่ยวกับสิ่งเดียวกัน
วางคำสั่งอันตรายไว้ล่างสุดหลังเส้นคั่น

ไม่ควรทำ

ใช้เป็นเมนูนำทางหลักของเว็บ
ใส่ช่องกรอกในเมนู

ใช้งาน

Props

การเข้าถึง

ใช้เมื่อไร