Overlays
MenuItem
A single row within menu-like components (`DropdownMenu`, `ContextMenu`), used internally.
<UiMenuItem :item="..." />Options
One block per prop — what it does, and what it looks like set.
Item
requireditem is the row's whole definition — label, icon, colour, keyboard hint, and which of the four types it is. DropdownMenu and ContextMenu render one of these per entry in their own items array, so the shape you write there is the shape this takes.
An item.color outside the listed values renders untinted (and warns in dev) rather than falling back to neutral's styling, so a typo doesn't pass for a deliberate choice.
Active
active highlights the row without selecting it — what a menu sets on the entry under the keyboard cursor, or on the parent of an open submenu. It's presentation only: the row still reports a click the same way, and nothing about the item's own state changes.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
`item.badge`
badge puts a count or short label at the end of the row, after any kbd hint would go. It takes the same text and color a standalone UiBadge does, so an unread count or a plan name reads the same way here as it does anywhere else in the library.
`item.icon` as an object
icon is usually just a name, but it also takes { name, color, fill } to set the icon's whole look in one place. color tints just the icon, separately from the row's own color — a warning triangle, a pending clock — without tinting the label along with it. fill draws the filled variant for the icons that ship one; the rest ignore it.
Rendered for you by the menus
You don't mount this yourself — DropdownMenu and ContextMenu render one per entry in their items array, and own the keyboard navigation, submenu opening and click handling around it. It's documented here so the item shape those two accept has somewhere to be read in full.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Emits
click[event: MouseEvent]mouseenter[event: MouseEvent]mouseleave[event: MouseEvent]Types
interface MenuItemLike {
label?: string;
/**
* The row's icon: an icon name, or `{ name, color, fill }` to also tint just the icon
* (independent of `color`, which tints the whole row) or render its filled variant.
*/
icon?: string | MenuItemIcon;
status?: "online" | "offline" | "away" | "dnd" | "busy";
avatar?: {
src?: string;
alt?: string;
firstName?: string;
lastName?: string;
status?: "online" | "offline" | "away" | "dnd" | "busy";
shape?: "circle" | "square";
};
badge?: {
text?: number | string;
color?: "primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral";
};
kbds?: Array<string | { value?: string }>;
type?: "link" | "label" | "separator" | "checkbox";
color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "pending" | "neutral";
checked?: boolean;
disabled?: boolean;
children?: unknown[] | unknown[][];
to?: string;
target?: string;
onSelect?: (e: Event) => void;
}interface MenuItemIcon {
/**
* Name of the icon to render, same as the `icon` prop of `UiIcon`.
*/
name: string;
/**
* Colors just the icon, independent of the item's `color` (which tints the whole row) or, in a
* select, of whether the option is selected.
*/
color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "pending" | "neutral";
/**
* Render the icon's filled variant. Only some icons ship one — the rest ignore this.
*/
fill?: boolean;
}