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.
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>