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@<version>/dist/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

// 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>

Nuxt.js

After installation,

• Create a file /plugins/vs-menu.js

  import Vue from 'vue';
  import VsMenu from '@vuesimple/vs-menu';
  
  Vue.component('vs-menu', VsMenu);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-menu', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  <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>

TIP

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsMenu from '@vuesimple/vs-menu' & add in component:{VsMenu} and use it within component, without globally installing in plugin folder.

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