Demo
Basic, no options
Template
<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>Default opened, no overlay
Template
<dropdown-menu :is-open="true" :overlay="false">
<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>Default opened, no overlay, no close when click the outside
Template
<dropdown-menu :is-open="true" :overlay="false" :close-on-click-outside="false">
<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>Hover mode
Template
<dropdown-menu mode="hover">
<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>Dropup
Template
<dropdown-menu :dropup="true">
<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>Direction right
Template
<dropdown-menu direction="right">
<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>Direction center
Template
<dropdown-menu direction="center">
<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>Custom background color for overlay
Template
<dropdown-menu overlay-bg-color="rgba(1, 35, 83, 0.8)">
<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>With dropdown closer
Template
<dropdown-menu with-dropdown-closer>
<template #trigger>
<button>Open Dropdown</button>
</template>
<template #header> Dropdown Header </template>
<template #body>
<ul>
<li v-for="i in 6" :key="i">
<button v-if="i === 2" dropdown-closer>Close dropdown</button>
<a v-else href="">Item {{ i }}</a>
</li>
</ul>
</template>
<template #footer> Dropdown Footer </template>
</dropdown-menu>Customized style & callbacks
Check your browser console for callbacks
Template
<dropdown-menu class="custom-style" transition="zoom" @opened="writeToConsoleForOpened" @closed="writeToConsoleForClosed">
<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>Style (Scss)
.v-dropdown-menu {
$this: &;
&.custom-style & {
&__container {
border: 0;
border-radius: 5px;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
transform: translateY(-50px);
#{$this} {
&__header {
display: flex;
justify-content: center;
padding: 5px;
background-color: #eee;
}
&__body {
ul {
margin: 0;
padding: 0;
li {
list-style: none;
a {
display: flex;
padding: 1rem;
color: #666;
font-size: 16px;
text-decoration: none;
&:hover {
background-color: #f2f2f2;
}
}
}
}
}
&__footer {
display: flex;
justify-content: center;
padding: 5px;
color: #fff;
background-color: #012353;
}
}
}
}
&.custom-style {
// Custom Transition - Zoom Effect
.zoom-enter-active {
transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.zoom-enter-from,
.zoom-leave-to {
transform: translateY(50px) scale(0.5);
transform-origin: center top;
opacity: 0;
}
&#{$this}--mode-hover {
.zoom-enter-from,
.zoom-leave-to {
transition-delay: 0.4s;
}
}
}
}
Script
<script setup>
const writeToConsoleForOpened = value => {
console.log(value, 'opened')
}
const writeToConsoleForClosed = value => {
console.log(value, 'closed')
}
</script>