v-dropdown-menu

Customizable dropdown menu for vue 🟩🔽

Website

Features

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

Getting Started

Try it Online ⚡️

DEMO

Installation

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

Vue3

Global Register

1import { createApp } from 'vue'
2import App from './App.vue'
3import DropdownMenu from 'v-dropdown-menu'
4
5const app = createApp(App)
6
7app.use(DropdownMenu)
8app.mount('#app')

Local Register

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

Via CDN

1<script src="https://unpkg.com/vue@3"></script>
2<script src="https://unpkg.com/v-dropdown-menu"></script>
3<link rel="stylesheet" href="https://unpkg.com/v-dropdown-menu/dist/vue3/v-dropdown-menu.css">
4
5<script>
6  const app = Vue.createApp({})
7    
8  app.use(DropdownMenu)
9  app.mount('#app')
10</script>

Vue2

Global Register

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

Local Register

1import DropdownMenu from "v-dropdown-menu/vue2"
2import "v-dropdown-menu/dist/vue2/v-dropdown-menu.css"
3
4export default {
5  components: {
6    DropdownMenu
7  }
8}

Via CDN

1<script src="https://unpkg.com/vue@2"></script>
2<script src="https://unpkg.com/v-dropdown-menu/vue2"></script>
3<link rel="stylesheet" href="https://unpkg.com/v-dropdown-menu/dist/vue2/v-dropdown-menu.css">
4
5<script>
6new  Vue({
7  el: "#app"
8});
9
10Vue.use(DropdownMenu);
11</script>

 

Usage

1<dropdown-menu>
2  <template #trigger>
3    <button>Open Dropdown</button>
4  </template>
5  
6  <template #header> Dropdown Header </template>
7  
8  <template #body>
9    <ul>
10      <li v-for="i in 6" :key="i">
11        <a href="">Item {{ i }}</a>
12      </li>
13    </ul>
14  </template>
15  
16  <template #footer> Dropdown Footer </template>
17</dropdown-menu>
18

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

1yarn build:vue3 # build for vue3

1# Serve
2
3cd dev/vue3
4
5yarn install
6yarn serve

Vue2

1yarn build:vue2 # build for vue2

1# Serve
2
3cd dev/vue2
4
5yarn install
6yarn serve

Vue 2&3

1yarn build # build for vue2 and vue3

Linter

1# run eslint
2yarn lint:eslint
3
4# run eslint fix
5yarn lint:eslint:fix
6
7# run stylelint
8yarn lint:stylelint
9
10# run stylelint fix
11yarn lint:stylelint:fix
12
13# run prettier
14yarn prettier
15

Sponsorship

You can sponsor me for the continuity of my projects:

License

MIT License

Copyright (c) selimdoyranli selimdoyranli@gmail.com