Skip to content

selimdoyranli/v-dropdown-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

90 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

npm version npm downloads changelog License

v-dropdown-menu

Customizable dropdown menu for vue πŸŸ©πŸ”½

GitHub stars

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