Vue3-menu NPM | npm.io

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, numberTwo values setting the starting position or anchor point of the menu relative to its target
offset	0, 0	false	number, numberAn 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	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

vue3 menu typescript context

@types/vue radix-vue vue

2 months ago

2 months ago

2 months ago

2 months ago