Vue Menu Component API

Configures the auto close behavior: - true — closes on a click inside or outside the menu, - 'inside' — closes on a click inside the menu only, - 'outside' — closes on a click outside the menu only, - false — closes only on the toggle or the Escape key.

The element the panel is rendered into instead of document.body. You can pass an HTML element or function that returns a single element. Implies portal. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.

Renders the panel in the dark theme.

The distance of the panel from its toggle, as [skidding, distance].

Where the panel opens. Logical placements ('start', 'end') resolve to the writing direction, and -start/-end are already logical. Breakpoint prefixes make it responsive — 'bottom-start md:top-end' reads as bottom-start below md and top-end from md up.

Renders the panel through a Teleport.

Control the open state. When set, the menu renders what show says and dismiss gestures only emit update:show — nothing closes until the parent flips the prop. Supports the v-model:show binding.

Controls the visibility of the menu.

Use show / v-model:show instead — visible is ignored when show is set.

Callback fired when the menu is hidden.

Callback fired when the menu is shown.

Emit the requested open state to support the v-model:show binding — a dismiss gesture (Escape, outside click, item click) or any internal toggle.

The height at which a scrollable panel starts scrolling.

Renders the panel with its own scrollbar once it grows past maxHeight.

Give the menu a translucent, blurred surface.

Component used for the root node. Either a string to use a HTML element or a component.

Toggle the active state for the component.

Component used for the root node. Either a string to use a HTML element or a component.

Toggle the disabled state for the component.

The href attribute specifies the URL of the page the link goes to.

Marks the item as the current selection.

Event called when the user clicks on the component.

Component used for the root node. Either a string to use a HTML element or a component.

Component used for the root node. Either a string to use a HTML element or a component.

Sets the color context of the component to one of CoreUI’s themed colors.

Use theme instead — color renders the same variant and theme-{color} classes and loses to theme when both are set.

Wire the menu to a toggle of your own instead of rendering a button. The single slot element receives the toggle behavior and keeps its own markup and classes.

Toggle the disabled state for the component.

-

Size the component small or large.

Renders the toggle as the second half of a split button, so only it opens the menu.

Sets the color context of the component to one of CoreUI’s themed colors. Pair it with variant for the shape — a button is a shape plus a colour.

Set the shape of the button — how much ink it uses. Defaults to solid when theme is set.

The open state of the nested menu. Bind it with v-model:show to hand control to the parent — hover, click and the keyboard then only emit update:show and nothing moves until the parent flips the value. Passed one-way it seeds the starting state and the submenu keeps managing itself.

The trigger the nested menu opens from, rendered as the submenu's own .menu-item. The toggler slot takes precedence over the prop.

Emit the requested open state to support the v-model:show binding.