title: How do i set "nav-item active" in Blazor?
body: <p>I'm building an application using Blazor &amp; Bootstrap. I want to use a standard bootstrap navbar. I can't figure out how to add the &quot;active&quot; class to the <code>&lt;li&gt;</code> tag selected.</p>
  <p>This is my code:</p>
  <pre><code>&lt;div class=&quot;collapse navbar-collapse&quot;&gt;
      &lt;ul class=&quot;navbar-nav&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;NavLink class=&quot;nav-link&quot; href=&quot;&quot; Match=&quot;NavLinkMatch.All&quot;&gt;Home&lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;NavLink class=&quot;nav-link&quot; href=&quot;/counter&quot; Match=&quot;NavLinkMatch.All&quot;&gt;Counter&lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;NavLink class=&quot;nav-link&quot; href=&quot;/fetchdata&quot; Match=&quot;NavLinkMatch.All&quot;&gt;Fetch data&lt;/NavLink&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The built in <code>&lt;NavLink&gt;</code> which is a blazor component changes the class for the <code>&lt;a/&gt;</code> automatically. But since i am using bootstrap navbar i need to add &quot;active&quot; to the class of the selected <code>&lt;li&gt;</code>.</p>
  <p>This is how it should look like when the link is active:</p>
  <pre><code> &lt;li class=&quot;nav-item active&quot;&gt;
      &lt;NavLink class=&quot;nav-link&quot; href=&quot;&quot; Match=&quot;NavLinkMatch.All&quot;&gt;Home&lt;/NavLink&gt;
   &lt;/li&gt;
  </code></pre>