[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![changelog][changelog-src]][changelog-href]
[![License][license-src]][license-href]

v-dropdown-menu

Customizable dropdown menu for vue 🟩🔽

Website

Features

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

Getting Started

$3

DEMO

Installation

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

$3

#### Global Register

`js
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
`html

`
#### Via CDN
`js





`

$3

#### Global Register

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

Vue.use(DropdownMenu);
`

#### Local Register
`js
import DropdownMenu from "v-dropdown-menu/vue2"
import "v-dropdown-menu/dist/vue2/v-dropdown-menu.css"

export default {
components: {
DropdownMenu
}
}
`
#### Via CDN
`js





`
 

$3

`html










`

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

$3

`bash
yarn build:vue3 # build for vue3
`

`bash

Serve

cd dev/vue3

yarn install
yarn serve
`

$3

`bash
yarn build:vue2 # build for vue2
`

`bash

Serve

cd dev/vue2

yarn install
yarn serve
`

$3

`bash
yarn build # build for vue2 and vue3
`

#### Linter

`bash

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


[npm-version-src]: https://img.shields.io/npm/v/v-dropdown-menu/latest.svg
[npm-version-href]: https://npmjs.com/package/v-dropdown-menu

[npm-downloads-src]: https://img.shields.io/npm/dt/v-dropdown-menu.svg
[npm-downloads-href]: https://npmjs.com/package/v-dropdown-menu

[codecov-src]: https://img.shields.io/codecov/c/github/selimdoyranli/v-dropdown-menu.svg
[codecov-href]: https://codecov.io/gh/selimdoyranli/v-dropdown-menu

[changelog-src]: https://img.shields.io/static/v1?label=%F0%9F%93%96&message=Release%20Notes%20|%20CHANGELOG&color=blue
[changelog-href]: ./CHANGELOG.md

[license-src]: https://img.shields.io/badge/License-MIT-blue.svg
[license-href]: https://npmjs.com/package/v-dropdown-menu/LICENSE