Customizable Dropdown Menu Component For Vue 3/2

Install & Download:

# Yarn
$ yarn add v-dropdown-menu
# NPM
$ npm i v-dropdown-menu

Description:

A customizable, easy-to-style dropdown menu component for Vue 3 & Vue 2 apps.

Features:

Dropdown & dropup menus.
With or without fullscreen overlay.
SSR compatible.

How to use it:

1. Import and register the component.

// Vue 3 (Global)
import { createApp } from 'vue'
import App from './App.vue'
import DropdownMenu from 'v-dropdown-menu'
const app = createApp(App)
app.use(DropdownMenu)
app.mount('#app')

// Vue 3 (Local)
import DropdownMenu from 'v-dropdown-menu'
import 'v-dropdown-menu/dist/vue3/v-dropdown-menu.css'

// Vue 2 (Global)
import Vue from "vue"
import DropdownMenu from "v-dropdown-menu/vue2"
Vue.use(DropdownMenu);

// Vue 2 (Local)
import DropdownMenu from "v-dropdown-menu/vue2"
import "v-dropdown-menu/dist/vue2/v-dropdown-menu.css"
export default {
  components: {
    DropdownMenu
  }
}

2. Create a basic dropdown menu.

<dropdown-menu>
  <template #trigger>
    <button>Open Dropdown</button>
  </template>
  <template #header> Dropdown Header </template>
  <template #body>
    <ul>
      <li v-for="i in 6" :key="i">
        <a href="">Item {{ i }}</a>
      </li>
    </ul>
  </template>
  <template #footer> Dropdown Footer </template>
</dropdown-menu>

3. Available component props.

isOpen: {
  type: Boolean,
  required: false,
  default: false
},
mode: {
  type: String,
  required: false,
  default: 'click' // click , hover
},
dropup: {
  type: Boolean,
  required: false,
  default: false
},
direction: {
  type: String,
  required: false,
  default: 'left' // left , right , center
},
closeOnClickOutside: {
  type: Boolean,
  required: false,
  default: true
},
withDropdownCloser: {
  type: Boolean,
  required: false,
  default: false
},
containerZIndex: {
  type: String,
  required: false,
  default: '994'
},
overlay: {
  type: Boolean,
  required: false,
  default: true
},
overlayBgColor: {
  type: String,
  required: false,
  default: 'rgba(0, 0, 0, 0.2)'
},
overlayZIndex: {
  type: String,
  required: false,
  default: '992'
},
transition: {
  type: String,
  required: false,
  default: 'default'
}

4. Events.