Menu

A light weight & flexible menu, with importance to accessibility.

GitHub

Demo

Basic

Alignment

Variants

Menu (without arrow)

Install

npm i @vuesimple/vs-menu

Usage

<template>
  <vs-menu :items="items" v-model="selectedItem" @item-selected="onItemSelected">Menu</vs-menu>
</template>

<script>
  import VsMenu from '@vuesimple/vs-menu';

  export default {
    components: {
      VsMenu,
    },

    data() {
      return {
        items: [
          { label: 'Item 1', key: 'item_1' },
          { label: 'Item 2', key: 'item_2' },
          { label: 'Item 3', key: 'item_3' },
          { label: 'Item 4', key: 'item_4', disabled: true },
          { label: 'Item 5', key: 'item_5' },
        ],
        selectedItem: '',
      };
    },

    methods: {
      onItemSelected(item) {
        console.info('Selected Item:', item);
      },
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-menu@3.1.6/dist/index.min.js"></script>

// Main/Entry file
app.use(VsMenu.plugin);

<template>
  <vs-menu :items="items" v-model="selectedItem" @item-selected="onItemSelected">Menu</vs-menu>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { label: 'Item 1', key: 'item_1' },
          { label: 'Item 2', key: 'item_2' },
          { label: 'Item 3', key: 'item_3' },
          { label: 'Item 4', key: 'item_4', disabled: true },
          { label: 'Item 5', key: 'item_5' },
        ],
        selectedItem: '',
      };
    },

    methods: {
      onItemSelected(item) {
        console.info('Selected Item:', item);
      },
    },
  };
</script>

Props

Name	Type	Default	Description
items	Array of Objects	-	Available: {label: "Item 1", key: "item_1" disabled: true}.
variant	String	-	Type of button to be shown. (default, primary, secondary, warning, danger, success, light).
v-model	Array of Objects	-	Returns the selected item.
alignment	String	left	Left align the menu. Available: left & right.
size	String	medium	Size of Menu button. Available: small, medium & large.
fill	Boolean	false	Fill the Menu button.
isRound	Boolean	false	Make the Menu button round.
disabled	Boolean	false	To disable the Menu button.
hide-arrow	Boolean	false	To hide arrow in menu.

Events

Name	Description
item-selected	Emitted when the menu closes and an item is selected.

Slots

You can define own item markup via #slot-name:

Name	Description
(default)	Holds the menu button text
menu	Holds the menu dropdown content.
item	Holds the menu dropdown content line item. Access it via item