Menu List #
The VaMenuList
component is used to display structured information in selectable list format.
Examples #
Basic usage #
To show menu items you can use options
prop:
Slot usage #
You can also use slot and VaMenuItem component to achieve better flexibility.
Option 1 | ||
Option 2 | ||
Option 2 |
Icon #
You can use icon
and rightIcon
properties in options or left-icon
and right-icon
slots in VaMenuItem
component.
Group #
You can use group
property in options or VaMenuGroup
component.
With divider #
You can use VaDivider
component in pair with VaMenuItem
components.
Option 1 | ||
Option 2 | ||
Option 3 | ||
Option 4 | Custom divider | |
Option 5 |
Props #
Name | Description | Types | Default |
---|---|---|---|
disabledBy | Specify the key in the object to be used as item |
|
|
groupBy | When |
|
|
options | Available options that the user can select from |
|
|
textBy | When |
|
|
trackBy | When |
|
|
valueBy | When |
|
|
Events #
Name | Description |
---|---|
selected | Emitted when an option is selected. Returns the selected option value as first argument and the selected option as second argument |
Css Variables #
Name | Default 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 |