Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Menu
#

The VaMenu component is used to display structured information under the menu button.

See
VaMenuList

Examples
#

Basic usage
#

Required to have a anchor. Component will automatically listen for clicks, keyboard navigation and open/close menu. Here's an example using options prop:

Open in GitHub

Slot usage
#

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

Open in GitHub

Context menu
#

One of the most common use cases for VaMenu component is context menu. You can use cursor prop to enable context menu mode. In this mode menu will be opened on right click.

Open in GitHub

useMenu
#

You can use useMenu hook to show menu programmatically. useMenu will listen for right click to show menu.

  • User 1
  • User 2
  • User 3
  • User 4
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.

Open in GitHub

Props #

NameDescriptionTypesDefault
anchor

Anchor element. Dropdown will be opened when clicked on anchor. Can be HTMLElement or CSS selector

String | Object

-

anchorSelector

Anchor CSS selector instead of passing slot

String

""

ariaLabel

Sets the aria-label attribute.

String

"$t:toggleDropdown"

autoPlacement

If dropdown doesn't fit viewport, it will be placed automatically to fit viewport

Boolean

true

child:dropdown

Object

-

child:menuList

Object

-

closeOnAnchorClick

Dropdown will be closed when clicked on anchor

Boolean

true

closeOnClickOutside

Dropdown will be closed when clicked outside dropdown content and anchor

Boolean

true

closeOnContentClick

Dropdown will be closed when clicked inside dropdown content

Boolean

true

closeOnFocusOutside

Dropdown will be closed when focus is outside dropdown content and anchor

Boolean

true

contentClass

String

""

cursor

Dropdown will be rendered relative to cursor position

Boolean | Object

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

-

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"

hoverOutTimeout

Time in ms after mouse leave dropdown before it will be closed

Number | String

200

hoverOverTimeout

Time in ms after mouse enter dropdown before it will be opened

Number | String

30

innerAnchorSelector

Anchor CSS selector inside passed slot

String

""

isContentHoverable

If true, dropdown content will be hoverable

Boolean

true

keepAnchorWidth

If true, dropdown content will have exact same width as anchor

Boolean

false

keyboardNavigation

Enables keyboard navigation for the component.

Boolean

true

modelValue

The value of the v-model bindings.

Boolean

false

offset

Dropdown content will be moved by main and cross axis according to current placement

Array | Number

0

options

Available options that the user can select from

Array

[]

placement

Dropdown content will be placed on placement side of anchor

String

"auto"

preset

Named preset combination of component props.

String | Array

-

readonly

Doesn't look disabled, but acts like one. Mostly useful for wrapper components.

Boolean

-

role

The role attribute of the dropdown

String

"button"

stateful

Add possibility to work with component without setting v-model.

Boolean

true

stickToEdges

Dropdown will not be rendered outside of viewport. It will be moved in opposite direction.

Boolean

true

target

Dropdown content parent. Dropdown content will be attached to target to prevent overflow

String | Object

-

teleport

Element where content will be rendered

String | Object

-

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

""

trigger

Action that will triggered when open and close dropdown.

String | Array

[
  "click",
  "space",
  "enter",
  "arrow-down",
  "arrow-up"
]
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

""

verticalScrollOnOverflow

If true, dropdown content will adjust its height when the content is larger than available space

Boolean

true

Events #

NameDescription

anchorClick

The event is triggered when anchor is clicked

anchorDblclick

The event is triggered when anchor is double clicked

anchorRightClick

The event is triggered when anchor is right clicked

clickOutside

The event is triggered when clicked outside dropdown content and anchor

close

The event is triggered when dropdown is closed

contentClick

The event is triggered when clicked inside dropdown content

focusOutside

The event is triggered when focus is outside dropdown content and anchor

open

The event is triggered when dropdown is opened

selected

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

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model