navbar item highlighting

Topic: navbar item highlighting

khilliard free asked 5 years ago

I'm interesting in using your library to develop a vuejs app. I need a navbar as a menu to select different components using vuejs routing. Your nav-bar-item allows you to specify a href link so this should satisfy this requirement.

But I don't see how to highlight the clicked nav item selection. All your examples add an "active" property to highlight the nav item. Can you provide an example of how to highlight the nav item based on the router link's state.

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

<p>NavItem component is integrated with vue router. When You click each item it will automatically add <code>active</code> class to it. Here's the example code for router:</p>

<pre class="prettyprint"><code><mdb-navbar dark position="top" class="default-color" scrolling :scrollingOffset="20">
  <mdb-navbar-brand to="/" waves style="font-weight: bolder;">
    MDB Vue
  </mdb-navbar-brand>
  <mdb-navbar-toggler>
    <mdb-navbar-nav right>
      <mdb-nav-item exact to="/" waves-fixed>Home</mdb-nav-item>
      <mdb-nav-item to="/css" waves-fixed>CSS</mdb-nav-item>
      <mdb-nav-item to="/components" waves-fixed>Components</mdb-nav-item>
      <mdb-nav-item to="/advanced" waves-fixed>Advanced</mdb-nav-item>
      <mdb-nav-item to="/navigation" waves-fixed>Navigation</mdb-nav-item>
      <mdb-nav-item to="/forms" waves-fixed>Forms</mdb-nav-item>
      <mdb-nav-item to="/tables" waves-fixed>Tables</mdb-nav-item>
      <mdb-nav-item to="/modals" waves-fixed>Modals</mdb-nav-item>
      <mdb-nav-item to="/plugins" waves-fixed>Plugins & addons</mdb-nav-item>
    </mdb-navbar-nav>
  </mdb-navbar-toggler>
</mdb-navbar>
</code></pre>

<p>Best regards</p>

Please insert min. 20 characters.

NavItem component is integrated with vue router. When You click each item it will automatically add active class to it. Here's the example code for router:

<mdb-navbar dark position="top" class="default-color" scrolling :scrollingOffset="20">
  <mdb-navbar-brand to="/" waves style="font-weight: bolder;">
    MDB Vue
  </mdb-navbar-brand>
  <mdb-navbar-toggler>
    <mdb-navbar-nav right>
      <mdb-nav-item exact to="/" waves-fixed>Home</mdb-nav-item>
      <mdb-nav-item to="/css" waves-fixed>CSS</mdb-nav-item>
      <mdb-nav-item to="/components" waves-fixed>Components</mdb-nav-item>
      <mdb-nav-item to="/advanced" waves-fixed>Advanced</mdb-nav-item>
      <mdb-nav-item to="/navigation" waves-fixed>Navigation</mdb-nav-item>
      <mdb-nav-item to="/forms" waves-fixed>Forms</mdb-nav-item>
      <mdb-nav-item to="/tables" waves-fixed>Tables</mdb-nav-item>
      <mdb-nav-item to="/modals" waves-fixed>Modals</mdb-nav-item>
      <mdb-nav-item to="/plugins" waves-fixed>Plugins & addons</mdb-nav-item>
    </mdb-navbar-nav>
  </mdb-navbar-toggler>
</mdb-navbar>

Best regards

Victor Sirghii free commented 4 years ago

That's correct, it automatically gets active when clicking on that nav-item. But what about jumping from one page to another not through mdb-navbar navigation, but from a page's anchors??? Ex, somewhere on page "Home" I click on an anchor linking to page "Tables" (a href="/Tables/" or router-link to="/Tables/"). In this case we do jump to page "Tables" with no problem but navbar losses its active navitem, and navbar is not highlighting menu of the current page. Any ideas about solving this scenario issue?

Mikołaj Smoleński staff commented 4 years ago

In this case I suggest to use Vuex state management pattern to store your active tab data: https://vuex.vuejs.org/

Best regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Vue
MDB Version: 4.8.2
Device: pc
Browser: chrome
OS: windows 10
Provided sample code: No
Provided link: No

khilliard

35Support score
7Questions 0Answers 0Snippets