Flexible Customizable Context Menu – vue-context

Install & Download:

$ npm install vue-context --save


vue-context is a flexible, customizable, semantic context menu component for Vue.js.

More Features:

  • Works with HTML unordered list (ul).
  • Custom click event.
  • Auto close on scroll or click.

How to use it:

1. Import the vue-context component after installation.

import Vue from 'vue';
import VueContext from 'vue-context';
// Or import
import { VueContext } from 'vue-context';

2. Import the needed stylesheet.

@import  '~vue-context/src/sass/vue-context';
// Or
@import  '~vue-context/dist/css/vue-context.css';

3. Attach a basic context menu to your element.

<div id="app">
    <p @contextmenu.prevent="$refs.menu.open">
      Right click on me
  <vue-context ref="menu">
      <a @click.prevent="onClick($event.target.innerText)">Option 1</a>
      <a @click.prevent="onClick($event.target.innerText)">Option 2</a>
new Vue({
    components: {
    methods: {
      onClick (text) {
        alert(`You clicked ${text}!`);

4. All possible props to customize the context menu.

closeOnClick: {
  type: Boolean,
  default: true
closeOnScroll: {
  type: Boolean,
  default: true
lazy: {
  type: Boolean,
  default: false // lazy load
itemSelector: {
  type: [String, Array],
  default: () => ['.v-context-item', '.v-context > li > a']
role: {
  type: String,
  default: 'menu'
subMenuOffset: {
  type: Number,
  default: 10
tag: {
  type: String,
  default: 'ul' // any HTML tag


Flexible Customizable Context Menu - vue-context


v6.0.0 (08/04/2020)

  • Breaking Change: Remove named export from entry point
  • Change submenu chevron character code in style sheet

v5.2.0 (08/02/2020)

  • Added: Prop useScrollHeight to use element scroll height instead of offset height.
  • Added: Prop useScrollWidth to use element scroll width instead of offset width.
  • Added: Props heightOffset and widthOffset to specify distance from edge of screen.

Add Comment