Features

• ⚡️ Lightweight
• 🎨 Interactive
• 🛠️ Customizable
• 👶🏻 Easy implementation
• 📦 Vue2 & Vue3 support
• 💉 SSR compatible

Getting Started

Try it Online ⚡️

DEMO

Installation

yarn add v-dropdown-menu  # or npm i v-dropdown-menu

Vue3

Global Register

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

Local Register

<script setup>
import DropdownMenu from 'v-dropdown-menu'
import 'v-dropdown-menu/dist/vue3/v-dropdown-menu.css'
</script>

Via CDN

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/v-dropdown-menu"></script>
<link rel="stylesheet" href="https://unpkg.com/v-dropdown-menu/dist/vue3/v-dropdown-menu.css">

<script>
  const app = Vue.createApp({})
    
  app.use(DropdownMenu)
  app.mount('#app')
</script>

Vue2

Global Register

import Vue from "vue"
import DropdownMenu from "v-dropdown-menu/vue2"

Vue.use(DropdownMenu);

Local Register

import DropdownMenu from "v-dropdown-menu/vue2"
import "v-dropdown-menu/dist/vue2/v-dropdown-menu.css"

export default {
  components: {
    DropdownMenu
  }
}

Via CDN

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/v-dropdown-menu/vue2"></script>
<link rel="stylesheet" href="https://unpkg.com/v-dropdown-menu/dist/vue2/v-dropdown-menu.css">

<script>
new  Vue({
  el: "#app"
});

Vue.use(DropdownMenu);
</script>

Usage

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

Props

| Name | Description | Type| Options| Default | |--|--|--|--|--| |isOpen|Show or hide for dropdown|Boolean|true , false | false |mode|Open variant|String|click , hover | click | dropup |Open the menu upwards | Boolean | true , false | false |direction|Menu container direction|String|left , right , center | left |closeOnClickOutside|closes dropdown menu when click outside|Booelan|true , false | true |withDropdownCloser| If there is an element in the menu with dropdown-closer attribute, clicking on it closes the menu.|Boolean|true , false | false |containerZIndex|z-index of menu container|String| .| 994 |overlay|background overlay of dropdown menu (only for click mode) |Boolean| true , false| true |overlayBgColor|background-color of overlay |String| ex: rgba(1, 35, 83, 0.8)| rgba(0, 0, 0, 0.2) |overlayZIndex|z-index of overlay|String| .| 992 |transition|custom vue transition for menu|String| .| default

Slots

|Name| Description | |--|--| |trigger|trigger for dropdown menu | |header|header of menu container (optional)| |body|content of menu (optional)| |footer|footer of menu container (optional)|

Events (only for click mode)

| | |--| | @opened="dispatchEvent"| | @closed="dispatchEvent"|

Development

Vue3

yarn build:vue3 # build for vue3

# Serve

cd dev/vue3

yarn install
yarn serve

Vue2

yarn build:vue2 # build for vue2

# Serve

cd dev/vue2

yarn install
yarn serve

Vue 2&3

yarn build # build for vue2 and vue3

Linter

# run eslint
yarn lint:eslint

# run eslint fix
yarn lint:eslint:fix

# run stylelint
yarn lint:stylelint

# run stylelint fix
yarn lint:stylelint:fix

# run prettier
yarn prettier

Sponsorship

You can sponsor me for the continuity of my projects:

License

MIT License

Copyright (c) selimdoyranli [email protected]