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>

License

MIT