How to set Navbar item or element as active in PHP
How to set Navbar item as active in PHP ?
To get started, we should have a navbar in our page. It can be bootstrap navbar or a custom one.
We will use the super global variable $_SERVER to fetch the current page name from the url. We will store the page name in a variable and match the variable with all the navbar elements. If the navbar element matches with the value in the variable, then we are going to set that navbar item/element as active.
Code to get the current page name from the url:
<?php $page = substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1); ?>
The $page variable will have values like "home.php", "about-us.php", etc. irrespective of how many directories inside you are accessing the folder ( Ex: localhost/projects/final/crm/index.php ) . It will give you only the filename ( index.php ).
Below is a simple bootstrap navbar.
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow">
<div class="container">
<a class="navbar-brand" href="index.php">
<img src="assets/images/logo.png" class="web-logo" alt="CRM">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link <?= $page == 'index.php' ? 'active':''; ?>" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $page == 'menu.php' ? 'active':''; ?>" href="menu.php">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $page == 'about-us.php' ? 'active':''; ?>" href="about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $page == 'cart.php' ? 'active':''; ?>" href="cart.php">Cart</a>
</li>
</ul>
</div>
</div>
</nav>