How to build a simple breadcrumb navigation component using VueJS

In the following article we are going to create a simple breadcrumb navigation component using VueJS 3 with the composition API. In web design and web development, breadcrumb navigation allows users to keep track and maintain awareness of their locations within the web application.

Setup environment

We will be using VueJS 3 with the composition API + Vite for the frontend tooling, so you need to have at least NodeJS version 12 to be able to run Vite

Scaffolding and starting your Vite/VueJs project

There are many ways of scaffolding your new project. We will be using npm in this tutorial:

$ cd ~/Code/
$ npm init vite@latest

You will be prompted to setup your new project, we've chosen the following:

$ npm init vite@latest
✔ Project name: … ipocs-breadcrumb-navigation-example
✔ Select a framework: › vue
✔ Select a variant: › vue

Once the project is created, use the following commands to install the dependencies and start the project in development mode:

$ cd ipocs-breadcrumb-navigation-example
$ npm install
$ npm i --save-dev sass
$ npm run dev

Create the Breadcrumb component

Open your favorite editor and create a new Breadcrumbs.vue VueJS component inside your src/components directory. This component should consume data via items prop which has to be an Array of Objects with each object having at least the following properties: name and url

<template>
<nav v-if="items && items.length"
    class="my-breadcrumbs"
>
    <ol>
        <li v-for="(item, itemIndex) in items" :key="itemIndex">
            <a v-if="itemIndex !== items.length - 1"
                :href="item.url"
                :title="item.name"
                class="bc-link"
            >
                {{ item.name }}
            </a>
            <span v-else class="bc-name">{{ item.name }}</span>
            <span v-if="items[itemIndex + 1]" class="bc-separator">/</span>
        </li>
    </ol>
</nav>
</template>

<script setup>
defineProps({
    items: {
        type: Array,
        required: true
    }
})
</script>

<style lang="scss" scoped>
.my-breadcrumbs {
    background-color: #f7f7f7;
    border-radius: 4px;
    ol, ul {
        list-style-type: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 7px 15px;
        li {
            color: #222222;
            .bc-link {
                font-weight: 600;
                text-decoration: none;
                transition: all 0.5s ease;
                color: #222222;
                &:hover {
                    color: blue;
                    text-decoration: underline;
                }
            }
            // .bc-name {

            // }
            .bc-separator {
                color: hsla(0, 0%, 13%, 0.563);
                margin: 0.3rem;
            }
        }
    }
}
</style>

Using the component

To use the newly created Breadcrumbs.vue conmponent, you need to register/import it. So, edit your src/App.vue and adjust it to the following:

<script setup>
import Breadcrumbs from './components/Breadcrumbs.vue'

const myItems = [{
    name: 'IPOCS',
    url: 'https://ipocs.co'
}, {
    name: 'Articles',
    url: 'https://ipocs.co/articles'
}, {
    name: 'Web development tutorials',
    url: 'https://ipocs.co/articles?categorySlug=web-development'
}, {
    name: 'Simple breadcrumbs navigation VueJS 3 component',
    url: 'https://ipocs.co/article/foo-bar'
}]
</script>

<template>
    <Breadcrumbs :items="myItems" />
</template>

If everything is ok you should be getting the following result:

or better yet, check out the one we use on our web application which is based on this component:

Project sources

The source files used in this article are available on GitHub.

Final words

Please do not hesitate to contact us using our contact form regarding any software development or system administration requirements you may have and we'll be more than happy to work with you.