Menu vs Select: Use Menu for action lists and commands (Edit, Delete, Share) where each item triggers behavior. Use Select for form fields where the user picks one or more values from a predefined set, with label, validation, and controlled value state. Menus close after a typical action; Select stays open for multi-select and integrates with form field chrome.

Compose menu content with a List of ListItem rows inside the panel.

Import

import { Menu } from "@bridge-ui/vue/Components/Menu";

import { Menu } from "@bridge-ui/react/Components/Menu";

Basic usage

Provide a trigger via the trigger slot (Vue) or slots.trigger (React). Put menu content such as a List with ListItem elements inside the panel.

External anchor

Pass anchorEl to position against an element outside the menu instead of using the trigger slot. Control visibility with show / v-model and toggle the opener yourself.

Placement

Use the placement prop to position the panel relative to the trigger. The default is bottom-start. This example uses top-start.

Persistent

When persistent is true, Escape and click-away do not close the menu. Toggle it closed programmatically or via the trigger.

Dismiss behavior

Fine-tune closing with closeOnEscape, closeOnClickAway, and the @close / onClose event. Use rounded and shadow to style the panel.

List, Button, Select

Accessibility

Provide the trigger via the trigger slot with a button that has an accessible name.
On open, focus moves to the first focusable item unless disableAutoFocus is set.
Escape closes the menu when closeOnEscape is true (default).
Click-away closes the menu when closeOnClickAway is true (default).
Set role="menuitem" on ListItem rows inside the panel for screen reader context.

Anatomy

<div> <!-- Menu root -->
  <button> <!-- trigger slot -->
  <div> <!-- portaled panel -->
    <ul> <!-- List content -->
      <li> <!-- ListItem rows -->
    </ul>
  </div>
</div>

The panel is portaled to teleportTo (default "body") and positioned relative to the trigger or anchorEl.

API

Prop	Type	Default	Description
v-model	boolean	—	Two-way binding for overlay visibility.
@close	—	—	Fired when the user dismisses (Escape or click-away). Not fired when the parent sets v-model={false} directly.
@show-change	(show: boolean) => void	—	Equivalent to onShowChange when you prefer events over a callback prop.

Prop	Type	Default	Description
show	boolean	—	Whether the overlay is visible. Use with onShowChange for controlled state.
onShowChange	(show: boolean) => void	—	Called when visibility changes.
onClose	() => void	—	Fired when the user dismisses (Escape or click-away). Not fired when the parent sets show={false} directly.

Prop	Type	Default	Description
anchorEl	HTMLElement \| RefObject<HTMLElement \| null> \| null	—	External anchor element for positioning.
placement	PositionPlacement	"bottom-start"	Preferred placement relative to the anchor.
offset	number	4	Gap between trigger and panel (px).
persistent	boolean	false	When true, Escape and click-away do not close the menu.
closeOnClickAway	boolean	true	Whether the menu closes when clicking outside.
closeOnEscape	boolean	true	Whether the menu closes on Escape.
rounded	MenuRounded	"md"	Border radius of the menu panel.
shadow	MenuShadow	"md"	Shadow applied to the menu panel.
strategy	PositionStrategy	"fixed"	CSS position strategy for the floating panel.
teleportTo	string \| false	"body"	Portal target. Pass false to render in place.
keepMounted	boolean	false	When true, the menu stays mounted after closing (hidden).
disableAutoFocus	boolean	false	When true, the menu does not auto-focus the first focusable item on open.
disableScrollLock	boolean	true	When true, body scroll is not locked while the menu is open.
slots	MenuSlots	—	Slot overrides. Use trigger for the opener element.
classes	MenuClasses	—	Class overrides for menu parts.
customProps	MenuCustomProps	—	Props forwarded to each menu part.

Menu

Introduction