Is there a way to set the same href link for the active class in the navbar using bootstrap-vue?

I am currently utilizing this navbar. It works fine when the href links are unique, but I encounter an issue when two pages share the same link - the active class is applied to both list items with that link in the manner I have written.

Vue.component('navbar', {
  template: `<svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355">
        <path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/>
    </svg>`
})

new Vue({
  el: "#app",
  data() {
      return {
        menu: [
        { to: { name: 'link1' }, name: 'page1' },
        { to: { name: 'sameLink' }, name: 'page2' },
        { to: { name: 'sameLink' }, name: 'page3' },
        { to: { name: 'link2' }, name: 'page4' }
        ]
      }
    }
});
.nav {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 0;
  list-style: none;
  font-size: .875rem;
  overflow: auto;
  background-color: $navBar-bg;
}

.navLink {
  display: block;
  color: $navBar-color;
  text-decoration: none;
  position: relative;
  white-space: nowrap;

  @include hover-focus() {
    text-decoration: none;
    color: $navBar-hover-color;
  }

  &.disabled {
    color: $navBar-disabled-color;
    pointer-events: none;
    cursor: default;
  }

  :global(.show) > &,
  :global(.active) > &,
  .nav-link:global(.show),
  .nav-link:global(.active) {
    color: red;

    &:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: .1875rem;
      background-color: currentColor;
    }
  }
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca8b2a9b2af">[email protected]</a>/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccd90cbc8d8fd8f938f8c938f">[email protected]</a>/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d4b48587d0f130b130c0f">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190cd969585a0d2ced2d1ced2">[email protected]</a>/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <ul class="nav">
   <router-link
      v-for="{ to, name } in menu"
      v-slot="{ href: linkHref, navigate, isActive, isExactActive }"
      :key="to.name || name"
      :to="to"
    >
      <li v-else :class="['nav-item', isActive && 'active', isExactActive && 'exact-active']">
        <a
          v-t="name"
          href="linkHref"
          class="navLink"
        />
      </li>
    </router-link>
  </ul>
</div>

Is there a way for me to use the same link for different pages, but only have the active class applied to the page that is currently being shown and truly active? These pages differ in content due to certain filters even though they share the same link.

cssvue.jsbootstrap-vue

Answer №1

When it comes to the properties isActive and isExactActive, they will have the same value for router-links that direct to the same route. This scenario applies to the menu items page2 and page3 in your example. One approach is to define these as separate routes that point to the same router-view component:

const routes = [
  { name: 'page2', path: '/foo', component: Foo },
  { name: 'page3', path: '/foo', component: Foo }
]

After defining the routes, you can then compare the current route's name with the name of each link to ascertain the exact active class:

<div id="app">
  <ul class="nav">
   <router-link
      v-for="{ to, name } in menu"
      v-slot="{ href: linkHref, navigate, isActive, isExactActive }"
      :key="to.name || name"
      :to="to"
    >
      <li v-else :class="['nav-item', isExactActive && $route.name === name && 'exact-active']">
        <a
          v-t="name"
          href="linkHref"
          class="navLink"
        />
      </li>
    </router-link>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make sure the header spans the full width of the body

I am trying to create a header that spans the entire width of the body, but I am encountering some issues with white space on both sides. I initially attempted to set the width to 100% on the header div, but this did not eliminate the white space. I then e ...

jqueryhtmlcss

Setting font sizes using CSS values according to the Shadow DOM root element

Summary of the problem: I am searching for a method to establish font size values based on an element inside a shadow dom relative to the shadow host, regardless of the parent element's font size within the shadow dom. I am looking for a solution sim ...

htmlcssdomweb-component

Customize the border of the Tab indicator within Material UI

I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...

cssreactjsmaterial-ui

Twitter Bootstrap 3 Carousel now showcasing a pair of images simultaneously instead of three

Can this carousel be configured to show just 2 pictures at a time instead of 3? Check out the live demo here. I've attempted adjusting the columns to col-md-6 and the CSS to 50%, but haven't had any success... ...

jquerycsstwitter-bootstrap-3carousel

What leads to the inability to utilize environment variables in this TypeScript app built with Vue 3?

Currently, I am developing a single page application utilizing Vue 3 and TypeScript. The main purpose of this app is to interact with an API. All the necessary information including the API's URL and key are stored in the 'src\env.js' f ...

typescriptvue.jsvuejs3

Is it secure to use a unique, static HTML/CSS website?

As a web developer, I am currently working on hosting a Wordpress-website for a client. However, my frontend development skills have improved significantly and now I feel inspired to create a simpler and more customizable version on my own. This website i ...

jqueryhtmlcsssecurityweb

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

htmlcssmarginpaddingspacing

Ways to create a fixed top navigation bar that adjusts content similarly to a non-fixed navbar

I'm looking to achieve a fixed navbar at the top that pushes down content when I open the collapse menu, similar to how it functions in static or regular navbars. Something like this example: (https://getbootstrap.com/examples/navbar-static-top/) but ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to determine the app bar height within a React Material UI application?

I'm trying to create a full-screen image for the opening of my website using React and Material UI. Here's a snippet of my JSX code with the default Material UI theme: <AppBar> //code in between </AppBar> <Container sx={{margin: ...

javascriptcssreactjsmaterial-ui

How to stop Mouseenter event from bubbling up in an unordered list of hyperlinks using Vue 3

I've experimented with various methods to prevent event bubbling on the mouseenter event, but I'm still encountering an issue. When I hover over a link, the event is triggered for all the links as if they were all being hovered over simultaneousl ...

javascriptvue.jsvuejs3event-bubbling

Using axios to make a request to a REST API

I recently developed a Rest API using express to interact with mongodb. Testing it with postman has been successful so far. However, when I attempted to integrate the api with a basic web app created in vue and used axios to get a response from the api, ...

javascriptnode.jsexpressvue.jsaxios

Is there a way to roll up the background image of the body?

body { background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat; animation: backdrop_roll linear 100s infinite; } .enemy-animation { position: relative; z-index: 1; animation-direction: alternate; animation-durati ...

htmlcss

How to design <p> elements inside a bordered container?

I am currently working on a webpage that features text enclosed in bordered boxes with styled formatting. The primary issue I am encountering is that when I try to add another paragraph within the styled <p> tag containing the border styling, the su ...

csshtml

Different dimensions of the <select> element with the help of Ryan Fait's jQuery design script

New to java and struggling on my own, I am seeking advice on how to customize Ryan Fait's jQuery input styles to accommodate 2 unique types of elements. For the code reference, please visit: While the code is efficient, I am unsure how to create two ...

jquerycssselectinput

Issue with the radio button functionality: it can be clicked on but does not change the background

I'm having trouble with creating inline radio buttons using bootstrap. Neither of the options are being selected. I've attempted various solutions such as adjusting the attributes for, name, and trying different ways to call the bootstrap functi ...

cssbootstrap-4radio-button

Any advice on how to horizontally center my css slideshow?

After using jsfiddle for the file, I encountered an issue with centering the slideshow at the bottom. Despite my efforts, it remains aligned to the left margin. Check out the end results here: https://jsfiddle.net/n6kae2rn/ https://jsfiddle.net/n6kae2rn ...

htmlcssslideshowcentering

Is it possible to manipulate the attribute of an object using Object.defineProperty when a value is passed as a function parameter?

As I delve into understanding reactivity in Vue, the concept of how reactivity is achieved when passing a value as a function parameter perplexes me. //here is the actual code snippet var obj = {a: 'aa'} function reactive(obj, key, value) { ...

javascriptvue.js

Having trouble getting the `nth-of-type` and `nth-child` selectors in CSS to function

I am attempting to apply a green color for the first nth child flag element <div id="axis"> <div class="super"></div> <div class="flag">flag 1</div><!-- I want this text to be green--> <div class="supe ...

htmlcsscss-selectors

Is it possible for a "position:absolute" div to maintain its relative width?

Imagine having two nested divs like the following: <html> <body> <div id="outer" style="width:50%"> <div id="inner" style="width:100%"> </div> </div> </body> </html> Currently, the i ...

htmlcsspositionabsolute

How to Align Title in the Center of a Section Containing Multiple Images?

I have a situation where I am using a StyledHead section to display 10 images from an API. The images are wrapped in another section called StyledHeader, which also contains an h1 element. How can I center the h1 element both vertically and horizontally so ...

cssreactjsstyled-components