emkc20 / v-dropdown-menu

Dropdown menu plugin for vuejs, supported ssr.

Customizable dropdown menu plugin for vuejs. SSR supported.

✨ Demo: https://v-dropdown-menu.now.sh

🟥 NPM: https://www.npmjs.com/package/v-dropdown-menu

⬛ Github: https://github.com/RadKod/v-dropdown-menu

Installation

$ npm install v-dropdown-menu --save

Global Register

    import Vue from 'vue'
    import DropdownMenu from 'v-dropdown-menu'
    import 'v-dropdown-menu/dist/v-dropdown-menu.css' // Base style, required.
    
    Vue.use(DropdownMenu)  

Local Register

    import DropdownMenu from 'v-dropdown-menu'
    import 'v-dropdown-menu/dist/v-dropdown-menu.css' // Base style, required.
    
    export default {
      components: {
        DropdownMenu
      }
    }

Via CDN

    <script src="https://unpkg.com/v-dropdown-menu"></script>
    <script>
	  new  Vue({
	    el: "#app"
	  });
	  Vue.use(DropdownMenu);
    </script>

Usage

    <dropdown-menu>
      <button slot="trigger">Open Dropdown</button>
      <div slot="header">Dropdown Header</div>
      <ul slot="body">
        <li v-for="i in 6" :key="i"><a href="">Item {{i}}</a></li>
      </ul>
      <div slot="footer">Dropdown Footer</div>
    </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"

Author

👤 selimdoyranli

• Website: @selimdoyranli
• Github: @selimdoyranli
• LinkedIn: @selimdoyranli
• Team: @RadKod

---

CREATED BY