<baht-menu>

The ⋯ “more” menu on a table row or card, or a labelled “Export ▾”. It is the same menu as <baht-split-button>: item shortcuts show as hints and are bound page-wide, danger items render in red, and disabled ones stay readable but cannot be picked.

Icon and labelled triggers

Open either menu, or press F2: the Rename shortcut works with the menu closed.

<baht-menu style="display:block;min-height:210px" align="start"></baht-menu>

<script>
  const el = document.querySelector('baht-menu');
  el.items = [
    {
      "value": "rename",
      "label": "Rename",
      "shortcut": "f2"
    },
    {
      "value": "duplicate",
      "label": "Duplicate",
      "shortcut": "mod+d"
    },
    {
      "value": "archive",
      "label": "Archive",
      "disabled": true
    },
    {
      "value": "delete",
      "label": "Delete",
      "danger": true
    }
  ];
</script>

Account menu: custom trigger, heading, a setting

A child marked data-trigger becomes the trigger (here an avatar); heading is a non-item first line; items with checked render as menuitemcheckbox with an optional description.

<baht-menu style="display:block;min-height:260px" label="Account" heading="somchai@20baht.com" align="start">
  <baht-avatar data-trigger="true" label="Somchai Jaidee"></baht-avatar>
</baht-menu>

<script>
  const el = document.querySelector('baht-menu');
  el.items = [
    {
      "value": "reports",
      "label": "Reports"
    },
    {
      "value": "advanced",
      "label": "Advanced fields",
      "description": "Show tags, notes and attachments",
      "checked": true
    },
    {
      "value": "lang",
      "label": "ภาษาไทย",
      "lang": "th"
    },
    {
      "value": "signout",
      "label": "Sign out",
      "danger": true
    }
  ];
</script>

menu.items = [
  { value: 'rename', label: 'Rename', shortcut: 'f2' },
  { value: 'delete', label: 'Delete', danger: true },
];
menu.addEventListener('baht-select', (e) => run(e.detail.value));

Keyboard: ↓ / Enter / Space on the trigger opens on the first item, ↑ on the last; ↑ ↓ wrap and skip disabled items, Home / End, Escape closes back to the trigger (a surrounding modal stays open), Tab closes. A click outside closes.

Props

Name	Type	Default	Description
`items`JS	`MenuItem[]`	`[]`	Entries { value, label, shortcut?, disabled?, danger?, checked?, description?, class?, lang? } (property)
`trigger-label`	`string`	`''`	Visible trigger text; empty = icon-only trigger
`icon`	`IconName \| ''`	`'more'`	Icon of the icon-only trigger
`label`	`string`	`''`	Accessible name of the trigger and menu
`variant`	`'ghost' \| 'secondary'`	`'ghost'`	Trigger look (ghost \| secondary)
`size`	`'sm' \| 'md'`	`'md'`	Trigger size (md \| sm)
`align`	`'start' \| 'end'`	`'end'`	Menu edge aligned with the trigger (end \| start)
`disabled`	`boolean`	`false`	Disable the trigger and every item shortcut
`heading`	`string`	`''`	Non-item first line of the menu (Signed in as …)

Events

Event	detail	Description
`baht-select`	`{ value, item }`	An item was picked (click, keyboard or its shortcut)
`name`	CustomEvent