BundyUI

Overlays

MenuItem

A single row within menu-like components (`DropdownMenu`, `ContextMenu`), used internally.

html
<UiMenuItem :item="..." />

Item

required

item 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.

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.

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

Prop
Type
Default
Description
itemrequired
MenuItemLike
—
The menu item data to render, including label, icon, color, and state.
active
boolean
false
Highlights the item as active, e.g. when keyboard-navigated or its submenu is open.

Emits

Event
Payload
Description
click
[event: MouseEvent]
—
mouseenter
[event: MouseEvent]
—
mouseleave
[event: MouseEvent]
—

Types

ts
interface MenuItemLike {
    label?: string;
    icon?: string;
    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" | "neutral";
    checked?: boolean;
    disabled?: boolean;
    children?: unknown[] | unknown[][];
    to?: string;
    target?: string;
    onSelect?: (e: Event) => void;
}