PHP Dynamic Navigation with Active Class
Apr 12, 2022 . Admin
Hello dev,
I am going to explain to you how to add a dynamic active class on a selected page in PHP. You will learn PHP dynamic navigation with an active class example.
This article will give you a simple example of how to add an active class dynamically in PHP. We will use get simple how to dynamically add active classes to nav with PHP.
I will give you a simple example of how to add an active class in a dynamic menu with PHP.
So, let's see bellow solution:
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>PHP Dynamic Navigation with Active Class - Mywebtuts.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="logo-1.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">Mywebtuts.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>PHP Dynamic Navigation with Active Class - Mywebtuts.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="logo-1.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">Mywebtuts.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>PHP Dynamic Navigation with Active Class - Mywebtuts.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="logo-1.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">Mywebtuts.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:
It will help you...