Home - smellyshovel/vue-custom-context-menu GitHub Wiki

Welcome to the Vue Custom Context Menu's Wiki!

One Demo worth a thousand words!

What makes the Vue Custom Context Menu special 🌟:

  • No more ugly @contextmenu.prevent="$refs['context-menu'].open"s in your code 🎉
  • Allows for full 🛠 customisation:
    • Style 💇‍♂️ everything from the overlay to arrows pointing out that an item opens a nested Context Menu the way you want it to look
    • Configure ⚙ everything from the penetrative properties of the overlay to what to do with Context Menus that don't fit well in the vewport
  • Wait a minute. "Nested Context Menus" 😍? You've read it all right! One Context Menu may has as many 🗂 nested Context Menus as you desire it to! As well as a nested Context Menu may itself has unlimited number of nested Context Menus!
  • A Context Menu turned out to be as overpopulated with items that it probably wouldn't fit the height of the screen 😬? Not a problem! Everything's already set up for you with reasonable defaults
  • Don't want a Context Menu for a specific element at all 🙅? The plugin allows you to easily disable it!
  • Want to give your users the ability to see a browser's native context menu instead of a custom one in some cases? You're good to go 👍. Just tell them to hold the alt key. Don't want 🤔? Just configure it so!

And even a few more:

  • 📱 Works well either on desktops and on mobile devices
  • Don't like how the components/directives and the other related things included by the plugin are named by default? Change them 😉!
  • Everything's made with your (and your users') convenience in mind: no more manual events registration, no more struggling with edge-cases - you can just use it 🛎

Sounds as a charm for you? Then dig further!