BundyUI

Overlays

MenuItem

DropdownMenu

A trigger-activated menu of grouped, possibly nested actions, with optional avatars/badges.

html
<UiDropdownMenu />

Items

items is a flat array is one group. Nest arrays instead and each becomes a group, separated by a divider.

Disabled

disabled is the trigger stops opening the menu at all.

Default open

defaultOpen starts the menu open when it manages its own state. It's a narrow tool: a menu that opens on mount covers whatever is beneath it before anybody asked for it.

Open

Pass it — usually as v-model:open — when something outside the menu has to open or close it.

Open state: false

Content

content sets where the panel sits relative to the trigger — side, alignment and offset.

Match trigger width

matchTriggerWidth stretches the panel to the trigger's width — what a select-like trigger wants, so the button and the list read as one control rather than two.

matchTriggerWidth is what makes it work as a select-like dropdown; without it the menu sizes to its own content, not the trigger.

Item color

An item can carry its own color, which is how a destructive action reads as one.

Checkbox items

type: 'checkbox' turns an item into a toggle that keeps the menu open.

Nested submenu

Give an item children and it opens a submenu instead of firing.

This component has multiple root nodes (the trigger, plus teleported menu/submenu panels), so Vue's automatic attrs/class fallthrough doesn't apply — a class you pass is forwarded manually onto the trigger, but don't expect it to land anywhere else.

Hovering an item with children opens a submenu after a short delay; clicking outside either panel closes both.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
items
DropdownMenuItem[] | DropdownMenuItem[][]
—
The menu items to display, either as a flat array or grouped into arrays separated by dividers.
disabled
boolean
false
Prevents the dropdown menu from opening.
defaultOpen
boolean
false
Whether the menu is open first when uncontrolled.
open
boolean
—
Controls whether the menu is open. Omit this to let the menu manage its own state internally (starting from `defaultOpen`); pass it to fully control visibility yourself.
content
DropdownMenuContentProps
{ align: 'start', side: 'bottom', sideOffset: 8 }
Positioning options for the menu content, such as alignment, side, and offset.
matchTriggerWidth
boolean
false
Makes the menu content exactly as wide as its trigger, instead of sizing to its own content.

Slots

Slot
default

Emits

Event
Payload
Description
update:open
[value: boolean]
—

Types

ts
interface DropdownMenuItem {
    label?: string;
    description?: 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;
    onSelect?: (e: Event) => void;
    onUpdateChecked?: (checked: boolean) => void;
    children?: DropdownMenuItem[] | DropdownMenuItem[][];
    class?: any;
    to?: string;
    target?: string;
}
ts
interface DropdownMenuContentProps {
    align?: "start" | "center" | "end";
    side?: "bottom" | "top";
    sideOffset?: number;
}