navbar active tab using using nuxt/vue

Question

I have a side navbar and I'm trying to make it active according to page click.

This is my sidenav.nav which is a component.

<template>
  <aside class="col-md-3">
    <nav class="list-group">
      <a href="/" class="list-group-item" exact>
        Account overview
      </a>
      <a class="list-group-item" href="/profile/address"> My Address </a>
      <a class="list-group-item" href="/profile/orders"> My Orders </a>
      <a class="list-group-item" href="/profile/wishlist"> My wishlist </a>
      <a class="list-group-item" href="/profile/settings"> Settings </a>
      <a class="list-group-item" href=""> Log out </a>
    </nav>
  </aside>
</template>

Below is my code for address page, other pages are similar to this.

<template>
  <section class="section-content padding-y">
    <div class="container">
      <div class="row">
        <sidenav />
        <!-- col.// -->
        <main class="col-md-9">
          <a href="#" class="btn btn-light mb-3">
            <i class="fa fa-plus"></i> Add new address
          </a>

          <div class="row">
            <div class="col-md-6">
              <article class="box mb-4">
                <h6>London, United Kingdom</h6>
                <p>
                  Building: Nestone <br />
                  Floor: 22, Aprt: 12
                </p>
                <a href="#" class="btn btn-light disabled">
                  <i class="fa fa-check"></i> Default</a
                >
                <a href="#" class="btn btn-light">
                  <i class="fa fa-pen"></i>
                </a>
                <a href="#" class="btn btn-light">
                  <i class="text-danger fa fa-trash"></i>
                </a>
              </article>
            </div>
            <!-- col.// -->
            <div class="col-md-6">
              <article class="box mb-4">
                <h6>Tashkent, Uzbekistan</h6>
                <p>
                  Building one <br />
                  Floor: 2, Aprt: 32
                </p>
                <a href="#" class="btn btn-light">Make default</a>
                <a href="#" class="btn btn-light">
                  <i class="fa fa-pen"></i>
                </a>
                <a href="#" class="btn btn-light">
                  <i class="text-danger fa fa-trash"></i>
                </a>
              </article>
            </div>
            <!-- col.// -->
            <div class="col-md-6">
              <article class="box mb-4">
                <h6>Moscow, Russia</h6>
                <p>
                  Lenin street <br />
                  Building A, Floor: 3, Aprt: 32
                </p>
                <a href="#" class="btn btn-light">Make default</a>
                <a href="#" class="btn btn-light">
                  <i class="fa fa-pen"></i>
                </a>
                <a href="#" class="btn btn-light">
                  <i class="text-danger fa fa-trash"></i>
                </a>
              </article>
            </div>
            <!-- col.// -->
          </div>
          <!-- row.// -->
        </main>
      </div>
    </div>
  </section>
</template>
<script>
import sidenav from "~/components/profile-sidenav";
export default {
  components: {
    sidenav,
  },
};
</script>

I have set account overview as the active page, when i go to address page i need 'My address' tab to be active. How do i do that? I tried but that didn't work.

are you using bootstrap?

Boussadjra Brahim
– Boussadjra Brahim

2020-11-10 10:35:47 +00:00
Commented Nov 10, 2020 at 10:35 — Boussadjra Brahim
– Boussadjra Brahim, Commented Nov 10, 2020 at 10:35
yes but not the vue-bootstrap. I'm using the cdn

codergirl
– codergirl

2020-11-10 10:51:31 +00:00
Commented Nov 10, 2020 at 10:51 — codergirl
– codergirl, Commented Nov 10, 2020 at 10:51

Nick Dawes · Accepted Answer · 2020-11-10 10:52:08Z

1

Instead of using <a> tags, use <nuxt-link>. Then, in your css, style the .nuxt-link-exact-active class— for example:

.nuxt-link-exact-active {
    font-weight: bold;
}

Now if you have <nuxt-link to=“/address”>My Address</nuxt-link> and the user is on the /address page, the class is added to the nuxt-link element.

answered Nov 10, 2020 at 10:52

Nick Dawes

2,2641 gold badge15 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

navbar active tab using using nuxt/vue

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