In this tutorial, we will learn how to make breadcrumb navigation in Vue js using Tailwind CSS and Flowbite package.
Breadcrumb is an ideal UI component, mainly used in user interfaces to tell the user about his current location in contrast to the web app’s hierarchy.
To create breadcrumbs in Vue, we will follow the simple approach. We will use Tailwind CSS and Flowbite altogether.
Here in this guide we will teach you a basic way regarding the Breadcrumb in Vue concepts, how to add icons in vue breadcrumbs.
How to Create Breadcrumb Navbar in Vue 3
- Step 1: Setup Vue Project
- Step 2: Install Flowbite Package
- Step 3: Set up Tailwind in Vue
- Step 4: Build Component
- Step 5: Make Breadcrumb Component
- Step 6: Update App Component
- Step 7: Run Vue Application
Setup Vue Project
You must have Node.js and npm installed, to set up Node in your machine, you can visit the official Node.js website: https://nodejs.org/.
Open a Terminal or Command Prompt and use the below command to install Vue CLI on your system:
npm install -g @vue/cliHere is how you can install a new Vue application.
vue create vue-demo-appWe are creating this guide for Vue 3, make sure to choose Vue 3 from the option list.
Get into the app folder:
cd vue-demo-appInstall Flowbite Package
You have to now install flowbite and flowbite-vue as a dependency using the below NPM command:
npm install flowbite flowbite-vue --legacy-peer-depsSet up Tailwind in Vue
We are now going to set up the Tailwind CSS in vue, there are certainly other ways but we will follow the simple approach.
Open the public/index.html file, and make sure to add the following script and CSS links within the head section.
<!doctype html>
<html>
<head>
...
...
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
</body>
</html>Build Component
In the next step, you have to make the components/BreadcrumbComp.vue file.
The following code example allows you to form a basic component.
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>Make Breadcrumb Component
Define the template tags, place the nav tags using with SVG icons to formulate the breadcrumbs.
Update code in the components/BreadcrumbComp.vue file:
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#"
class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
<svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 20">
<path
d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
</svg>
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 9 4-4-4-4" />
</svg>
<a href="#"
class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 9 4-4-4-4" />
</svg>
<span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Flowbite</span>
</div>
</li>
</ol>
</nav>
</template>Update App Component
To register the previously built component in Vue, you have to insert the below code in the App.vue file.
<template>
<div class="mx-auto max-w-2xl lg:max-w-5xl">
<h2 class="text-2xl font-bold tracking-tight sm:text-3xl mb-6 mt-6">Vue 3 Tailwind Breadcrumb Nav Example</h2>
<BreadcrumbComp />
</div>
</template>
<script>
import BreadcrumbComp from './components/BreadcrumbComp.vue';
export default {
components: {
BreadcrumbComp
}
}
</script>Run Vue Application
Now, ultimately I am going to type and invoke the suggested command.
npm run serveThis command will invoke the development server after that you can use the below URL to serve your app on the browser.
http://localhost:8080
Conclusion
Vue.js is a great and powerful open-source JavaScript framework for creating eye-catching as well as user friendly user interfaces.
We can certainly create dynamic and interactive web applications using Vue. There are hundreds of third-party dependencies available that can help us to build any functionality in Vue.
In this simple guide, we had a look at how to create simple breadcrumb with icons in Vue. Hope you will like this guide and share with others as well.