A dropdown menu similar to the HTML <select> element.

Menu items are provided as an array of MenuItemData types, and v-model is used to bind the current selection's value.




Basic Usage

Menu items must have a value, and can have a label to display in the UI. If no label is provided (like the third menu item in this example), the value will be displayed.

With menu item icons and descriptions

Items are displayed via the MenuItem component—see the MenuItem docs for more options. In this example, a menuConfig object is passed to the Select to bold the label text and hide the text overflow of the descriptions.

With custom menu item display

The menu-item scoped slot enables you to customize the display of each menu item, with a binding for the menuItem. In this example, only the menu item's icon is displayed in the menu.

With custom label display

The label scoped slot enables you to customize the display of the label, with bindings for the selectedMenuItem and the defaultLabel.



Prop nameDescriptionTypeDefault
menuItems(required)Menu items. See the MenuItemData type.MenuItemData[]
selected(required)Value of the current selection.

Must be bound with v-model:selected.

The property should be initialized to null rather than using a falsy value.
defaultLabelLabel to display when no selection has been made.string''
disabledWhether the dropdown is disabled.booleanfalse
menuConfigConfiguration for various menu features. All properties default to false.

See the MenuConfig type.
MenuConfig() => { return {} as MenuConfig; }
defaultIconAn icon at the start of the select element displayed when no selection has been made.Icon | undefinedundefined


Event namePropertiesDescription
update:selectedmodelValue string | number | null - The new model valueWhen the selection value changes.


labelDisplay of the current selection or default labelselectedMenuItem MenuItemData, undefined - The currently selected menu
defaultLabel string - The default label, provided via a prop
menu-itemDisplay of an individual item in the menumenuItem MenuItemData - The current menu item

Last updated: