In this tutorial, we will see simple vue js navbar menu, vue 3 responsive navbar, navbar with hamburger menu, creating navbar 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
Example 1
Simple Responsive Navbar Vue 2 or vue 3.
<template>
<div>
<div class="bg-gray-100">
<nav
class="
container
px-6
py-8
mx-auto
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-800
md:text-2xl
hover:text-blue-400
"
>Logo
</router-link>
<!-- Mobile menu button -->
<div @click="showMenu = !showMenu" class="flex md:hidden">
<button
type="button"
class="
text-gray-800
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-sm font-bold text-gray-800 hover:text-blue-400">
Home
</li>
<li class="text-sm font-bold text-gray-800 hover:text-blue-400">
About
</li>
<li class="text-sm font-bold text-gray-800 hover:text-blue-400">
Blogs
</li>
<li class="text-sm font-bold text-gray-800 hover:text-blue-400">
Contact Us
</li>
</ul>
</nav>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showMenu: false,
};
},
};
</script>
Vue 3 Responsive Navbar Menu With Tailwind CSS Example
or
You can also create method
<!-- Create toggleNav method -->
<div @click="toggleNav" class="flex md:hidden">
<button
type="button"
class="text-gray-800 hover:text-gray-400 focus:outline-none focus:text-gray-400"
aria-label="toggle menu"
>
<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>
Toggle method
<script>
export default {
data() {
return {
showMenu: false,
};
},
methods: {
toggleNav: function () {
this.showMenu = !this.showMenu;
},
},
};
</script>
Example 2
Create tailwind css responsive navbar using vue js 3 composition api.
<template>
<div class="bg-indigo-600">
<nav
class="
container
px-6
py-8
mx-auto
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 class="text-gray-100 hover:text-indigo-400">About</li>
<li class="text-gray-100 hover:text-indigo-400">Blogs</li>
<li class="text-gray-100 hover:text-indigo-400">Contact Us</li>
</ul>
</nav>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
let showMenu = ref(false);
const toggleNav = () => (showMenu.value = !showMenu.value);
return { showMenu, toggleNav };
},
};
</script>
Vue 3 Responsive Navbar Menu With Tailwind CSS Example v2
Hamburger menu
Vue 3 Responsive Navbar Menu With Tailwind CSS Example v3
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
