Need help with Vue or Nuxt? We build fast apps, custom UI libraries, and help you move to Vue 3 and Nuxt 3 — start with a free 2-week trial.
Talk to an Engineer

Menu List
#

The VaMenuList component is used to display structured information in selectable list format.

See
VaMenu

Examples
#

Basic usage
#

To show menu items you can use options prop:

Open in GitHub

Slot usage
#

You can also use slot and VaMenuItem component to achieve better flexibility.

Open in GitHub

Icon
#

You can use icon and rightIcon properties in options or left-icon and right-icon slots in VaMenuItem component.

Open in GitHub

Group
#

You can use group property in options or VaMenuGroup component.

Open in GitHub

With divider
#

You can use VaDivider component in pair with VaMenuItem components.

Custom divider
Open in GitHub

Props #

NameDescriptionTypesDefault
disabledBy

Specify the key in the object to be used as item disabled prop. Can be string (path to the key) or function of type: (option) => option.disabled

String | Function

"disabled"

groupBy

When options prop items are an objects, this key will be used to check correct option group

String | Function

"group"

options

Available options that the user can select from

Array

[]

textBy

When options prop items are an objects, this key will be used as displayed text. Can be string (path to the key) or function of type: (option) => option.text

String | Function

"text"

trackBy

When options prop items are an objects, this key will be used to track selected options. Can be string (path to the key) or function of type: (option) => option.track

String | Function

""

valueBy

When options prop items are an objects, this key will be used in selected event. Can be string (path to the key) or function of type: (option) => option.value

String | Function

""

Events #

NameDescription

selected

Emitted when an option is selected. Returns the selected option value as first argument and the selected option as second argument

Css Variables #

NameDefault Value
--va-menu-padding-x 8px
--va-menu-padding-y 8px
--va-menu-item-hover-color var(--va-primary)
--va-menu-item-hover-opacity 0.05

Change log #

v1.10.4

  • Add VaMenuFull component for Dividers and custom content

  • Removed virtual-td that breaks layout when using VaPopover, custom td or headless components