How to Dynamic Navigation with Active Class in PHP?

Apr 12, 2022

.

Admin

How to Dynamic Navigation with Active Class in PHP?

Hi friends,

In this post, we will learn how to dynamic navigation with active class in PHP. I explained simply how to add a dynamic active class on a selected page in PHP. Here you will learn how to implement PHP dynamic navigation with an active class example. This tutorial will give you a simple example of how to add an active class dynamically in PHP.

I will give you a simple example of how to dynamically add active classes to nav with PHP.

So let's see bellow example:

home.php


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>How to Dynamic Navigation with Active Class in PHP? - Nicesnippets.com</title>

<!-- Bootstrap core CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Heebo&family=Mulish&display=swap" rel="stylesheet">

<style type="text/css">

body{

font-family: 'Heebo', sans-serif;

}

.solo-main{

background-color: #222222;

}

.solo-title{

font-size: 29px;

}

.solo-nav ul li a{

font-size: 14px;

font-weight: bold;

letter-spacing: 1px;

}

.solo-nav ul li a.active{

background-color: #ff9800;

color: white;

}

img{

background-color: white;

height: 45px;

}

</style>

</head>

<body>

<?php $activePage = basename($_SERVER['PHP_SELF'], ".php"); ?>

<div class="container-fluid solo-main p-0">

<div class="container p-0">

<nav class="navbar navbar-expand-lg navbar-light p-0">

<a class="navbar-brand solo-title mb-0 text-light font-weight-bold" href="#"><img src="nice-logo.png"></a>

<button class="navbar-toggler bg-info" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse solo-nav" id="navbarSupportedContent">

<ul class="navbar-nav ms-auto">

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'home') ? 'active':''; ?>" href="home.php">HOME</a>

</li>

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'blog') ? 'active':''; ?>" href="blog.php">BLOG</a>

</li>

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'contact-us') ? 'active':''; ?>" href="contact-us.php">CONTACT US</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

<div class="container mt-5">

<div class="row mt-5">

<div class="col-md-12 text-center mt-5 pt-5">

<h1 class="display-1">Nicesnippets.com - Home</h1>

</div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

</body>

</html>

blog.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>How to Dynamic Navigation with Active Class in PHP? - Nicesnippets.com</title>

<!-- Bootstrap core CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Heebo&family=Mulish&display=swap" rel="stylesheet">

<style type="text/css">

body{

font-family: 'Heebo', sans-serif;

}

.solo-main{

background-color: #222222;

}

.solo-title{

font-size: 29px;

}

.solo-nav ul li a{

font-size: 14px;

font-weight: bold;

letter-spacing: 1px;

}

.solo-nav ul li a.active{

background-color: #ff9800;

color: white;

}

img{

background-color: white;

height: 45px;

}

</style>

</head>

<body>

<?php $activePage = basename($_SERVER['PHP_SELF'], ".php"); ?>

<div class="container-fluid solo-main p-0">

<div class="container p-0">

<nav class="navbar navbar-expand-lg navbar-light p-0">

<a class="navbar-brand solo-title mb-0 text-light font-weight-bold" href="#"><img src="nice-logo.png"></a>

<button class="navbar-toggler bg-info" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse solo-nav" id="navbarSupportedContent">

<ul class="navbar-nav ms-auto">

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'home') ? 'active':''; ?>" href="home.php">HOME</a>

</li>

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'blog') ? 'active':''; ?>" href="blog.php">BLOG</a>

</li>

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'contact-us') ? 'active':''; ?>" href="contact-us.php">CONTACT US</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

<div class="container mt-5">

<div class="row mt-5">

<div class="col-md-12 text-center mt-5 pt-5">

<h1 class="display-1">Nicesnippets.com - Blog</h1>

</div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

</body>

</html>

contact-us.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>How to Dynamic Navigation with Active Class in PHP? - Nicesnippets.com</title>

<!-- Bootstrap core CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Heebo&family=Mulish&display=swap" rel="stylesheet">

<style type="text/css">

body{

font-family: 'Heebo', sans-serif;

}

.solo-main{

background-color: #222222;

}

.solo-title{

font-size: 29px;

}

.solo-nav ul li a{

font-size: 14px;

font-weight: bold;

letter-spacing: 1px;

}

.solo-nav ul li a.active{

background-color: #ff9800;

color: white;

}

img{

background-color: white;

height: 45px;

}

</style>

</head>

<body>

<?php $activePage = basename($_SERVER['PHP_SELF'], ".php"); ?>

<div class="container-fluid solo-main p-0">

<div class="container p-0">

<nav class="navbar navbar-expand-lg navbar-light p-0">

<a class="navbar-brand solo-title mb-0 text-light font-weight-bold" href="#"><img src="nice-logo.png"></a>

<button class="navbar-toggler bg-info" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse solo-nav" id="navbarSupportedContent">

<ul class="navbar-nav ms-auto">

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'home') ? 'active':''; ?>" href="home.php">HOME</a>

</li>

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'blog') ? 'active':''; ?>" href="blog.php">BLOG</a>

</li>

<li class="nav-item">

<a class="nav-link text-light p-3 <?= ($activePage == 'contact-us') ? 'active':''; ?>" href="contact-us.php">CONTACT US</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

<div class="container mt-5">

<div class="row mt-5">

<div class="col-md-12 text-center mt-5 pt-5">

<h1 class="display-1">Nicesnippets.com - Contact-us</h1>

</div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

</body>

</html>

Output:

I hope it will help you.....

#PHP