Multiple menu items become active

Hi😃

• BootstrapVue v1.2.0
• Bootstrap v4b2
• Nuxt v1.0.0- rc11

Nuxt application, For example… Suppose there is a product, product history, cart page.

pages/
├── index.vue
├── cart/
│   └── index.vue
└── products/
    ├── index.vue
    └── history.vue

<b-nav-item-dropdown text="Pages">
  <b-dropdown-item to="/products">Products</b-dropdown-item>
  <b-dropdown-item to="/cart">Cart</b-dropdown-item>
  <b-dropdown-item to="/products/history">History</b-dropdown-item>
</b-nav-item-dropdown>

Access the product page and open the menu. https://monosnap.com/file/HqzPjfcC14537sHzmOYlc1KwEwLHIJ As expected.

Access the cart page and open the menu. https://monosnap.com/file/U66PmxP5IjPPu8fKvWRNZI69ksWF6E As expected.

Access the product history page and open the menu. https://monosnap.com/file/eJ5WnJS3PXhcQdV6NFFSf7otsBX7ZB It is different from expectation. “Products” item should not be active. Should not the active class be an exact match rather than a partial match of the route URL?

[mosinve]

There’s a prop, named exact . This is what you should use. Please, read following: https://router.vuejs.org/en/api/router-link.html https://bootstrap-vue.js.org/docs/components/dropdown#component-reference

Your example will be:

<b-nav-item-dropdown text="Pages">
  <b-dropdown-item :to="{ path: '/products' }" exact>Products</b-dropdown-item>
  <b-dropdown-item :to="{ path: '/cart' }" exact>Cart</b-dropdown-item>
  <b-dropdown-item :to="{ path: '/products/history' }" exact>History</b-dropdown-item>
</b-nav-item-dropdown>

[mosinve]

You’re welcome! 😃