title: How to set active class on current nav item
body: <p>I am facing problem while setting active class on nav item.
  Here is my code on template</p>
  <pre class="lang-html prettyprint-override"><code>&lt;nav class=&quot;mt-2&quot;&gt;
          &lt;ul class=&quot;nav nav-pills nav-sidebar flex-column&quot; data-widget=&quot;treeview&quot; role=&quot;menu&quot; data-accordion=&quot;false&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a href=&quot;{{ url('/dashboard') }}&quot; class=&quot;nav-link&quot;&gt;
                &lt;i class=&quot;nav-icon fas fa-tachometer-alt&quot;&gt;&lt;/i&gt;
                &lt;p&gt;
                  Dashboard
                &lt;/p&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a href=&quot;{{ url('/dashboard/logo') }}&quot; class=&quot;nav-link&quot;&gt;
                &lt;i class=&quot;nav-icon fab fa-bandcamp&quot;&gt;&lt;/i&gt;
                &lt;p&gt;
                  Add/Change Logo
                &lt;/p&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            
            &lt;li class=&quot;nav-item has-treeview&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;
                &lt;i class=&quot;nav-icon fas fa-image&quot;&gt;&lt;/i&gt;
                &lt;p&gt;
                  Banner
                  &lt;i class=&quot;fas fa-angle-left right&quot;&gt;&lt;/i&gt;
                &lt;/p&gt;
              &lt;/a&gt;
              &lt;ul class=&quot;nav nav-treeview&quot;&gt;
                &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a href=&quot;{{ url('/dashboard/banner') }}&quot; class=&quot;nav-link&quot;&gt;
                    &lt;i class=&quot;nav-icon fas fa-plus&quot;&gt;&lt;/i&gt;
                    &lt;p&gt;Add Banner&lt;/p&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a href=&quot;{{url('/dashboard/banner/edit')}}&quot; class=&quot;nav-link&quot;&gt;
                    &lt;i class=&quot;nav-icon fas fa-edit&quot;&gt;&lt;/i&gt;
                    &lt;p&gt;Edit Banner&lt;/p&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/nav&gt;
  </code></pre>
  <p>I tried</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    $(document).ready(function () {
          var url = window.location;
          $('ul.nav li.nav-item a[href=&quot;' + url + '&quot;]').parent().addClass('active');
          $('ul.nav li.nav-item a').filter(function () {
              return this.href == url;
          }).parent().addClass('active').parent().parent().addClass('active');
    });
  &lt;/script&gt;
  </code></pre>
  <p>But this code setting the &quot;active&quot; class on list tag but not in anchor tag.</p>
  <p><a href="https://i.stack.imgur.com/xkyqB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xkyqB.jpg" alt="You can see this inspect element screenshot" /></a></p>