v-dropdown-menu
v-dropdown-menu
Customizable dropdown menu for vue π©π½
Features
- β‘οΈ Lightweight
- π¨ Interactive
- π οΈ Customizable
- πΆπ» Easy implementation
- π¦ Vue2 & Vue3 support
- π SSR compatible
Getting Started
Try it Online β‘οΈ
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'
const app = createApp(App)
app.use(DropdownMenu)
app.mount('#app')
Local Register
<script setup>
import DropdownMenu from 'v-dropdown-menu'
import 'v-dropdown-menu/dist/vue3/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"
Vue.use(DropdownMenu);
Local Register
import DropdownMenu from "v-dropdown-menu/vue2"
import "v-dropdown-menu/dist/vue2/v-dropdown-menu.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
Copyright (c) selimdoyranli [email protected]
Dependencies
@babel/core: ^7.12.10@babel/plugin-transform-modules-umd: ^7.12.1@babel/preset-env: ^7.12.10@babel/preset-typescript: ^7.21.5@commitlint/cli: ^17.6.3@commitlint/config-conventional: ^17.6.3@prettier/plugin-pug: ^2.4.1@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^6.0.3@rollup/plugin-commonjs: ^24.1.0@rollup/plugin-node-resolve: ^15.0.2@rollup/plugin-replace: ^5.0.2@types/node: ^18.13.0@types/stylelint: 14.0.0@typescript-eslint/eslint-plugin: ^5.59.2@typescript-eslint/parser: ^5.14.0@vue/compiler-sfc: ^3.0.4autoprefixer: ^10.1.0babel-core: ^7.0.0-bridge.0babel-plugin-rename-umd-globals: ^1.0.0changelogen: ^0.5.3commitizen: ^4.3.0cross-env: ^7.0.3cz-conventional-changelog: ^3.3.0eslint: ^8.34.0eslint-config-prettier: ^8.6.0eslint-loader: ^4.0.2eslint-plugin-prettier: ^4.2.1eslint-plugin-vue: ^9.9.0flush-promises: ^1.0.2husky: 4.2.5lint-staged: ^13.2.2postcss: ^8.2.1postcss-html: ^1.5.0postcss-scss: ^4.0.6prettier: ^2.8.4pug: ^3.0.2pug-plain-loader: ^1.1.0rollup: ^2.34.2rollup-plugin-css-only: 2.0.0rollup-plugin-postcss: ^4.0.0rollup-plugin-scss: ^4.0.0rollup-plugin-terser: ^7.0.2sass: ^1.58.0sass-loader: 10.1.1stylelint: 14.16.1stylelint-config-prettier: ^9.0.5stylelint-config-rational-order: ^0.1.2stylelint-order: ^6.0.2stylelint-scss: ^4.4.0typescript: ^4.1.2vue-eslint-parser: ^9.1.0vue-eslint-parser-template-tokenizer-pug: ^0.4.10vue-next: npm:vue@^3.2.20vue-next-rollup-plugin-vue: npm:rollup-plugin-vue@^6.0.0vue-prev: npm:vue@^2.6.14vue-prev-composition-api: npm:@vue/composition-api@^1.2.4vue-prev-rollup-plugin-vue: npm:rollup-plugin-vue@^5.1.9vue-template-compiler: ^2.6.14