How To Make Navbar Link Active Per Page In Vue 3 And Bootstrap 5

Let’s make the navbar page link active when the user opens the page in Vue Router and Bootstrap 5.

First of all, Let’s have a look at the navigation items in the bootstrap navbar.

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="/">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/about">about</a>
    </li>
</ul>

Here at the <a> tag of the home page, we have the active class that we will use to highlight the active page. and we will replace the <a> tag with <router-link> the “vue-router” component for navigation, and of course the href attribute with to.

<ul class="navbar-nav">
        <li class="nav-item me-3">
          <router-link class="nav-link" :class="$route.name == 'Home'? 'active':''" aria-current="page" :to="{ name: 'Home' }">
            Home
          </router-link>
        </li>
        <li class="nav-item me-3">
          <router-link class="nav-link" :class="$route.name == 'About'? 'active':''" aria-current="page" :to="{ name: 'About' }">
            About
          </router-link>
        </li>
</ul>

We put the active class in condition for checking the route name to toggle the class for that specific nav item :class="$route.name == 'Home'? 'active':''" .

Finally, make sure you give the right route name for every route, That helps a lot. here is my routes array

const routes = [
    {
        path:'/',
        name:'Public',
        component:DefaultLayout,
        redirect: '/',
        children:[
            {
                path:'/',
                name:'Home',
                component:Home
            },
            {
                path:'/about',
                name:'About',
                component:About
            },     
        ]
    },
]   

That’s all, these are useful tutorials about Vue.js 3 and Bootstrap5

• How To Install Bootstrap 5 In Vue 3 With Bootstrap Icons
• How To Make Layouts In Vue 3 Application
• How To Make A Vue 3 Shopping Cart

Here is the entire navbar component

<template>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <router-link :to="{ name: 'Home' }" class="navbar-brand d-flex align-items-center">
        <i class="bi bi-box2-heart h1 me-1"></i>
         <strong>VUE</strong>
        </router-link>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item me-3">
          <router-link class="nav-link" :class="$route.name == 'Home'? 'active':''" aria-current="page" :to="{ name: 'Home' }">
            Home
          </router-link>
        </li>
        <li class="nav-item me-3">
          <router-link class="nav-link" :class="$route.name == 'About'? 'active':''" aria-current="page" :to="{ name: 'About' }">
            About
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</nav>

</template>

Thank you