Menu · humanonlyweb/ui

Examples

Basic

{ separator: true } in items draws a line between groups.

Custom trigger

Bind the slot's attrs to your own button.

API

Prop	Type	Default
`items` Menu items in order; `{ separator: true }` draws a line between groups.	`MenuEntry<T>[]`	`[]`
`label` Trigger text for the default trigger, and the menu's accessible name. Defaults to the `menu` translation.	`string`	—
`align` Which trigger edge the menu lines up with. Flips automatically near the viewport edge.	`"end" \| "start"`	`"start"`
`open` Whether the menu is open.	`boolean`	`false`

Event	Payload
`select` An item was activated.	`[value: T]`
`update:open` `v-model:open` update.	`[value: boolean]`

Slot	Props
`trigger` Custom trigger. Bind `attrs` to a `<button>`.	`{ isOpen: boolean; attrs: Record<string, unknown>; }`
`item` Item content.	`{ item: MenuItem<T>; active: boolean; }`

Types

export type MenuEntry<T extends SelectValue = SelectValue> = MenuItem<T> | MenuSeparator;

export interface MenuItem<T extends SelectValue = SelectValue> extends SelectOption<T> {
  /** Trailing text, e.g. a shortcut like "⌘S". Render richer content via the `item` slot. */
  hint?: string;
}

export type SelectValue = string | number;

/** A line between groups of menu items. */
export interface MenuSeparator {
  separator: true;
}

export interface SelectOption<T extends SelectValue = SelectValue> {
  label: string;
  value: T;
  disabled?: boolean;
}

Styling

Parts: menumenu-triggermenu-listmenu-separatormenu-itemmenu-item-labelmenu-item-hint
States: data-menu-opendata-menu-aligndata-menu-indexdata-menu-active

Keyboard

Keys	Action
`Enter` / `Space` / `↓`	Open and focus the first item
`↑`	Open and focus the last item
`↓` / `↑`	Move between items, skipping disabled ones
`Home` / `End`	First / last item
Letters	Jump to an item by label; repeat a letter to cycle
`Escape`	Close and return focus to the trigger
`Tab`	Close and move on