how to set bootstrap navbar class active

We all need to give class="active" in bootstrap navbar for the active menu.The below code will show you to add class active automatically by checking the URL.

scoopism-navbar

For a simple php site

Here I’m creating a nav.php file to save the menu code and I will include ( @include() ) this file in all other page.

Below is the nav.php file code

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">WebSiteName</a></div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

In the above code, I just hard coded the class="active" (see line number 7).
To make this auto, first I need to read the URL and split the URL and get the components.

Here is the code to get components of URL

$directoryURI = $_SERVER['REQUEST_URI'];
    $path = parse_url($directoryURI, PHP_URL_PATH);
    $components = explode('/', $path);
    $first_part = $components[1];

Then I will use Ternary operator to add class.

Our nav.php page will be as follow:-

    // php code to get URL component
    $directoryURI = $_SERVER['REQUEST_URI'];
    $path = parse_url($directoryURI, PHP_URL_PATH);
    $components = explode('/', $path);
    $first_part = $components[1];

   // menu code with ternary operator
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">WebSiteName</a></div>
<ul class="nav navbar-nav">
<li class="<?php  echo ( $first_part == '' || $first_part == 'index.php' )? 'active': ''?>"><a href="index.php">Home</a></li>
<li class="<?php  echo ( $first_part == 'page1.php')? 'active': ''?>"><a href="page1.php">Page 1</a></li>
<li class="<?php  echo ( $first_part == 'page2.php')? 'active': ''?>"><a href="page2.php">Page 2</a></li>
<li class="<?php  echo ( $first_part == 'page3.php')? 'active': ''?>"><a href="page3.php">Page 3</a></li>
</ul>
</div>
</nav>

If you removed the file extension ( click here to see how to remove file extension ) then you no need to add file extension inside li tags.

Above code without file extension

    // php code to get URL component
    $directoryURI = $_SERVER['REQUEST_URI'];
    $path = parse_url($directoryURI, PHP_URL_PATH);
    $components = explode('/', $path);
    $first_part = $components[1];

   // menu code with ternary operator
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">WebSiteName</a></div>
<ul class="nav navbar-nav">
<li class="<?php  echo ( $first_part == '' || $first_part == 'index' )? 'active': ''?>"><a href="index">Home</a></li>
<li class="<?php  echo ( $first_part == 'page1')? 'active': ''?>"><a href="page1">Page 1</a></li>
<li class="<?php  echo ( $first_part == 'page2')? 'active': ''?>"><a href="page2">Page 2</a></li>
<li class="<?php  echo ( $first_part == 'page3')? 'active': ''?>"><a href="page3">Page 3</a></li>
</ul>
</div>
</nav>

For Laravel Applications

It is very simple in Laravel to add class active just need to add Request::is().

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">WebSiteName</a></div>
<ul class="nav navbar-nav">
<li class="{{Request::is('/')?'active':''}}"><a href="{{url('/')}}">Home</a></li>
<li class="{{Request::is('/page1')?'active':''}}"><a href="{{url('/page1')}}">Page 1</a></li>
<li class="{{Request::is('/page2')?'active':''}}"><a href="{{url('/page2')}}">Page 2</a></li>
<li class="{{Request::is('/page3')?'active':''}}"><a href="{{url('/page3')}}">Page 3</a></li>
</ul>
</div>
</nav>

Enjoy Coding