In this tutorial, we will see simple vue js dropdown menu, vue 3 responsive dropdown, dropdown menu with icon , creating dropdown using vue js 3 composition api, examples with Tailwind CSS & Vue 3.
Tool Use
Vue 3 or Vue js Composition api
Tailwind CSS 2.x / 3.x
Heroicons Icon
First you need to setup vue 3 project with tailwind css. You can install manually or you read below blog.
How to Install Tailwind CSS in Vue 3
Quick Way to Start Project with Vite Vue 3 Headless UI Tailwind CSS
Example 1
Simple Dropdown vue 3 with heroicons icon .
<template>
<div>
<div class="relative">
<!-- Dropdown toggle button -->
<button
@click="show = !show"
class="flex items-center p-2 text-indigo-100 bg-indigo-600 rounded-md"
>
<span class="mr-4">Dropdown Menu</span>
<svg
class="w-5 h-5 text-indigo-100 dark:text-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- Dropdown menu -->
<div
v-show="show"
class="
absolute
right-0
py-2
mt-2
bg-indigo-500
rounded-md
shadow-xl
w-44
"
>
<router-link
to="/"
class="
block
px-4
py-2
text-sm text-indigo-100
hover:bg-indigo-400 hover:text-indigo-100
"
>
Dropdown List 1
</router-link>
<router-link
to="/"
class="
block
px-4
py-2
text-sm text-indigo-100
hover:bg-indigo-400 hover:text-indigo-100
"
>
Dropdown List 2
</router-link>
<router-link
to="/"
class="
block
px-4
py-2
text-sm text-indigo-100
hover:bg-indigo-400 hover:text-indigo-100
"
>
Dropdown List 3
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
};
</script>
Vue 3 Dropdown With Tailwind v1
Example 2
Create tailwind css dropdown using vue js 3 composition api.
<template>
<div>
<div class="relative">
<!-- Dropdown toggle button -->
<button
@click="isOpen"
class="flex items-center p-2 text-indigo-100 bg-indigo-600 rounded-md"
>
<span class="mr-4">Dropdown Menu</span>
<svg
class="w-5 h-5 text-indigo-100 dark:text-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- Dropdown menu -->
<div
v-show="show"
class="absolute right-0 py-2 mt-2 bg-indigo-500 rounded-md shadow-xl w-44"
>
<router-link
to="/"
class="block px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-400 hover:text-indigo-100"
>
Dropdown List 1
</router-link>
<router-link
to="/"
class="block px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-400 hover:text-indigo-100"
>
Dropdown List 2
</router-link>
<router-link
to="/"
class="block px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-400 hover:text-indigo-100"
>
Dropdown List 3
</router-link>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
let show = ref(false);
const isOpen = () => (show.value = !show.value);
return { show, isOpen };
},
};
</script>
Example 3
vue js 3 responsive navbar with dropdown menu items with tailwind css.
<template>
<div>
<nav
class="px-6 py-8 bg-indigo-600 md:flex md:justify-between md:items-center"
>
<div class="flex items-center justify-between">
<router-link
to="/"
class="
text-xl
font-bold
text-gray-100
md:text-2xl
hover:text-indigo-400
"
>Logo
</router-link>
<!-- Mobile menu button -->
<div @click="toggleNav" class="flex md:hidden">
<button
type="button"
class="
text-gray-100
hover:text-gray-400
focus:outline-none focus:text-gray-400
"
>
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
<path
fill-rule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<ul
:class="showMenu ? 'flex' : 'hidden'"
class="
flex-col
mt-8
space-y-4
md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0
"
>
<li class="text-gray-100 hover:text-indigo-400">Home</li>
<li>
<div class="relative">
<!-- Dropdown toggle button -->
<button
@click="show = !show"
class="
flex
items-center
text-indigo-100
bg-indigo-600
rounded-md
focus:outline-none
"
>
<span class="mr-4">Dropdown Menu</span>
<svg
class="w-5 h-5 text-indigo-100"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- Dropdown menu -->
<div
v-show="show"
class="
py-2
mt-2
bg-indigo-500
rounded-md
shadow-xl
lg:absolute lg:right-0
w-44
"
>
<router-link
to="/"
class="
block
px-4
py-2
text-sm text-indigo-100
hover:bg-indigo-400 hover:text-indigo-100
"
>
Dropdown List 1
</router-link>
<router-link
to="/"
class="
block
px-4
py-2
text-sm text-indigo-100
hover:bg-indigo-400 hover:text-indigo-100
"
>
Dropdown List 2
</router-link>
<router-link
to="/"
class="
block
px-4
py-2
text-sm text-indigo-100
hover:bg-indigo-400 hover:text-indigo-100
"
>
Dropdown List 3
</router-link>
</div>
</div>
</li>
<li class="text-gray-100 hover:text-indigo-400">Product</li>
</ul>
</nav>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
let showMenu = ref(false);
let show = ref(false);
const toggleNav = () => (showMenu.value = !showMenu.value);
return { showMenu, show, toggleNav };
},
};
</script>
Vue 3 Dropdown With Tailwind v2
Responsive dropdown menu
Vue 3 Dropdown With Tailwind v4
Read Also
Vue 3 Dark Mode with Tailwind CSS Example
Install Vite + Vue 3 + Typescript + Tailwind CSS 3
How to Install Tailwind CSS in Vue 3
How to install Bootstrap 5 in Vue 3
Vue 3 Responsive Navbar Menu With Tailwind CSS Example
Vue 3 Dropdown With Tailwind CSS Examples
Tailwind CSS Vue 3 Table Example
Tailwind CSS Vue 3 Modal Examples
