https://github.com/selimdoyranli/v-dropdown-menu
Customizable dropdown menu for vue 🟩🔽
https://github.com/selimdoyranli/v-dropdown-menu
dropdown-menu nuxt-dropdown vdropdown-menu vue-dropdown vue-plugin vuejs
Last synced: 4 months ago
JSON representation
Customizable dropdown menu for vue 🟩🔽
- Host: GitHub
- URL: https://github.com/selimdoyranli/v-dropdown-menu
- Owner: selimdoyranli
- License: mit
- Created: 2020-05-10T16:52:29.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-20T07:26:26.000Z (over 1 year ago)
- Last Synced: 2025-03-07T00:40:28.840Z (over 1 year ago)
- Topics: dropdown-menu, nuxt-dropdown, vdropdown-menu, vue-dropdown, vue-plugin, vuejs
- Language: JavaScript
- Homepage: https://v-dropdown-menu.vercel.app
- Size: 3.64 MB
- Stars: 32
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[![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 🟩🔽
## Features
- ⚡️ Lightweight
- 🎨 Interactive
- 🛠️ Customizable
- 👶🏻 Easy implementation
- 📦 Vue2 & Vue3 support
- 💉 SSR compatible
## Getting Started
### Try it Online ⚡️
[DEMO](https://v-dropdown-menu.vercel.app/demo)
## Installation
```js
yarn add v-dropdown-menu # or npm i v-dropdown-menu
```
### Vue3
#### Global Register
```js
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
```html
import DropdownMenu from 'v-dropdown-menu'
import 'v-dropdown-menu/css'
```
#### Via CDN
```js
const app = Vue.createApp({})
app.use(DropdownMenu)
app.mount('#app')
```
### Vue2
#### Global Register
```js
import Vue from "vue"
import DropdownMenu from "v-dropdown-menu/vue2"
import 'v-dropdown-menu/vue2/css'
Vue.use(DropdownMenu);
```
#### Local Register
```js
import DropdownMenu from "v-dropdown-menu/vue2"
import 'v-dropdown-menu/vue2/css'
export default {
components: {
DropdownMenu
}
}
```
#### Via CDN
```js
new Vue({
el: "#app"
});
Vue.use(DropdownMenu);
```
### Usage
```html
Open Dropdown
Dropdown Header
Dropdown Footer
```
#### 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
```bash
yarn build:vue3 # build for vue3
```
```bash
# Serve
cd dev/vue3
yarn install
yarn serve
```
### Vue2
```bash
yarn build:vue2 # build for vue2
```
```bash
# Serve
cd dev/vue2
yarn install
yarn serve
```
### Vue 2&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](./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