v-dropdown-menu

Customizable dropdown menu for vue 🟩🔽

Website

_{Sponsorship 💖
GitHub
Buy me a coffee}

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'
import 'v-dropdown-menu/css'

const app = createApp(App)

app.use(DropdownMenu)
app.mount('#app')

Local Register

<script setup>
import DropdownMenu from 'v-dropdown-menu'
import '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"
import 'v-dropdown-menu/vue2/css'

Vue.use(DropdownMenu);

Local Register

import DropdownMenu from "v-dropdown-menu/vue2"
import 'v-dropdown-menu/vue2/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 selimdoyranli@gmail.com