Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Assign "active" class to navbar item based on current page URL with jQuery
<!-- your average Bootstrap navbar component, in this case placed in an include called header.html -->
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about.php">About</a></li>
<li><a href="/contact.php">Contact</a></li>
</ul>
</div>
</div>
@tithij

This comment has been minimized.

Copy link

@tithij tithij commented Mar 20, 2017

I have a question....
How do I assign the active class to children of that menu item?
I want to add a wildcard to the end of the pathname in the a tag. I don't know if this is right, or how to do it...
Any thoughts?

@Firestorm-Graphics

This comment has been minimized.

Copy link

@Firestorm-Graphics Firestorm-Graphics commented Aug 10, 2017

use this for children:

$('ul li a').click(function(){ $('li a').removeClass("active"); $(this).addClass("active"); });

@beicnet

This comment has been minimized.

Copy link

@beicnet beicnet commented Nov 22, 2017

So, @Firestorm-Graphics is it possible to do the same thing with my code too or?

<nav class='navbar navbar-default'>
   <ul class='nav navbar-nav'>
      <li class='active'><a href='.' target='_self'>Home</a></li>
      <li><a href='network' target='_self'>Network</a></li>
      <li><a href='hardware' target='_self'>Hardware</a></li>
      <li><a href='help' target='_self'>Help</a></li>
   </ul>
</nav>

Thank you!

@higginni

This comment has been minimized.

Copy link

@higginni higginni commented Jan 16, 2018

Does the file extension have to be present? I am trying to do it with a custom navbar in wordpress..

@robin3317

This comment has been minimized.

Copy link

@robin3317 robin3317 commented Feb 1, 2018

@johnef

This comment has been minimized.

Copy link

@johnef johnef commented Feb 8, 2018

What about adding the active to

  • I think this will add it to tag

  • @ericauv

    This comment has been minimized.

    Copy link

    @ericauv ericauv commented Feb 19, 2018

    I can't find any information on what the "+" in
    $('.nav > li > a[href="'+pathname+'"]').parent().addClass('active');
    do... can you please explain

    @Chochita

    This comment has been minimized.

    Copy link

    @Chochita Chochita commented May 9, 2018

    @ericauv I think because it's a variable, you should use a +

    @ncarandini

    This comment has been minimized.

    Copy link

    @ncarandini ncarandini commented Dec 26, 2018

    @ericauv the + here works as a text concatenation operator:

    mytext = '.nav > li > a[href="' + pathname + '"]'

    Please note the trick of using single quote for string that contains a double quote.

    So, at the end of the day, if the variable pathname as a value of www.mysite.com then

    mytext = .nav > li > a[href="www.mysite.com"]

    @ankitribadia

    This comment has been minimized.

    Copy link

    @ankitribadia ankitribadia commented Feb 15, 2019

    Thanks for the help

    @SabineAvalisto

    This comment has been minimized.

    Copy link

    @SabineAvalisto SabineAvalisto commented Nov 7, 2019

    Thank you very much! it's works

    @xpuig

    This comment has been minimized.

    Copy link

    @xpuig xpuig commented Apr 27, 2020

    Thx! Simple and effective 👍

    @seasonC

    This comment has been minimized.

    Copy link

    @seasonC seasonC commented May 18, 2020

    Works like a charm. Thanks man.

    @andryf95

    This comment has been minimized.

    Copy link

    @andryf95 andryf95 commented May 20, 2020

    I have been looking for something like this FOR DAYS!! thank you from a rookie!

    @destinyd081

    This comment has been minimized.

    Copy link

    @destinyd081 destinyd081 commented Jun 17, 2020

    Good job...please how do I make each page of this code active
    `



      <?php

                  $query = "select* from main_menus";
                  $result = mysqli_query($con,$query);
      
                  while($row = mysqli_fetch_assoc($result)) {
                      $main_menus_id = $row['menu_id'];
                      $menu_title = $row['menu_title'];
                      $menu_url = $row['menu_url'];
                ?>
              <li class="nav-item ">
                <a href="<?php echo $menu_url ?>"><?php echo $menu_title ?></a>
              </li>
              <?php 
            }
            ?>
            </ul>
          </div>`
      
    @earlpearl17

    This comment has been minimized.

    Copy link

    @earlpearl17 earlpearl17 commented Oct 27, 2020

    Thank you sir.

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    You can’t perform that action at this time.