Multi-Level Menu Component
Simple multi-level menu on Vue3
Usage
npm install -save vue3-menu
import { Vue3Menu } from 'vue3-menu';To apply styles
import 'vue3-menu/src/assets/menu.css';Or you can add your own menu styles using the .epic-menu class for menu
Menu props
| Prop | Default | Required | Type |
|---|---|---|---|
| items | true |
MenuItemProps[]Array of menu items |
|
| appendTo | "body" | false |
stringThe element where the menu will be added during rendering |
| anchor | [0, 1] | false |
[number, number]Two values setting the starting position or anchor point of the menu relative to its target |
| offset | [0, 0] | false |
[number, number]An array of two numbers to offset the menu horizontally and vertically in pixels |
| behavior | "click" | false |
"click" | "hover"Specifies exactly how the menu will open, either by click or on hover |
| customClassName | false |
stringAdditional class name for customizing menus with custom styles. When rendering the menu uses Teleport, that's why this property was added |
|
| context | false |
booleanDefines the context menu display mode |
MenuItemProps
| Prop | Default | Required | Type |
|---|---|---|---|
| icon | false |
ComponentInternalInstanceAdds an icon before the menu item label. |
|
| label | false |
string | numberMenu item label |
|
| items | false |
MenuItemProps[]An array of settings for creating submenus. |
|
| style | false |
StyleValueDefining styles for menu item formatting |
|
| shortcut | false |
stringHotkey indicator. The indicator is inserted after the menu item label |
|
| component | false |
ComponentInternalInstanceInstead of a standard menu item, you can add any component |
|
| separator | false |
booleanInstead of a menu item there will be a separator |
|
| command | false |
functionHandler called when a menu item is clicked |
|
| stopPropagation | false |
booleanstopPropagation |
Examples
Simple menu
const items = [{
label: 'Upload from computer',
}, {
label: 'Search the web',
}, {
separator: true,
}, {
label: 'Drive',
}, {
label: 'Photos',
}, {
label: 'By URL',
}, {
label: 'Camera',
}];<template>
<div>
<Menu :items="items"/>
</div>
</template>