Vue + Nuxt js: How to apply dynamic active class to parent menu using bootstrap navbar

Question

I am new to vue + nuxt.js

I am using bootstrap navbar. See this link

I have following code.

<b-nav-item-dropdown type="dark">
  <template slot="button-content">
    <i class="fas fa-user"></i> Users
  </template>
  <b-dropdown-item ref="users" to="/users" nuxt-link-active="/users">
    Listing
  </b-dropdown-item>
  <b-dropdown-item to="/users/add" nuxt-link-active="/users/add">
    Add new user
  </b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown bg-transparent>
  <template slot="button-content">
    <i class="fas fa-users"></i> Teams
  </template>
  <b-dropdown-item to="/teams" nuxt-link-active="/teams">
    Listing
  </b-dropdown-item>
  <b-dropdown-item to="/teams/add" nuxt-link-active="/teams/add">
    Add new team
  </b-dropdown-item>
</b-nav-item-dropdown>

Now i want a parent menu to be open when child is clicked. In current scenario when i click on Team Listing, it closes the parent div so cannot identify which menu is open. Also when i click on user listing it should close team menu.

I tried many way by googling. But cannot find proper solution.

Gopakumar Gopalan · Accepted Answer · 2020-05-19 15:50:21Z

2

Just stumbled into this question. Here is my answer if you still need it.

You should not use nuxt-link-active in a Bootstrap Vue element.

You may rather use :

<b-dropdown-item to="/teams" exact exact-active-class="active">
   Listing
</b-dropdown-item>

answered May 19, 2020 at 15:50

Gopakumar Gopalan

1,19714 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue + Nuxt js: How to apply dynamic active class to parent menu using bootstrap navbar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related