Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to make active tab in navigation menu using HTML CSS & JavaScript?
Creating an active tab navigation menu helps users understand which page or section they're currently viewing. This tutorial demonstrates how to build an interactive navigation menu using HTML, CSS, and JavaScript with proper active state management.
HTML Structure
The HTML structure uses a simple unordered list with navigation items. Each li element represents a tab, and anchor tags provide the clickable links.
<ul class="nav"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Services</a></li> <li class="nav-item"><a href="#">Portfolio</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul>
CSS Styling
The CSS creates the visual design and defines how the active state appears. The .active class provides distinct styling for the selected tab.
.nav {
position: relative;
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: #f4f4f4;
border-radius: 8px;
overflow: hidden;
}
.nav-item {
flex: 1;
text-align: center;
}
.nav-item a {
display: block;
padding: 15px 20px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
border-right: 1px solid #ddd;
}
.nav-item:last-child a {
border-right: none;
}
.nav-item a:hover {
background-color: #e9e9e9;
}
.nav-item.active a {
background-color: #007bff;
color: white;
font-weight: bold;
}
JavaScript Functionality
The JavaScript handles the active state management. It removes the active class from all tabs and adds it to the clicked tab, ensuring only one tab is active at a time.
const navItems = document.querySelectorAll(".nav-item");
navItems.forEach(item => {
item.addEventListener("click", function(e) {
e.preventDefault();
// Remove active class from all items
navItems.forEach(navItem => {
navItem.classList.remove("active");
});
// Add active class to clicked item
this.classList.add("active");
});
});
// Set first item as active by default
if (navItems.length > 0) {
navItems[0].classList.add("active");
}
Complete Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Tab Navigation</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f8f9fa;
}
.nav {
position: relative;
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
max-width: 600px;
margin: 0 auto;
}
.nav-item {
flex: 1;
text-align: center;
}
.nav-item a {
display: block;
padding: 18px 25px;
text-decoration: none;
color: #555;
transition: all 0.3s ease;
border-right: 1px solid #eee;
font-size: 16px;
}
.nav-item:last-child a {
border-right: none;
}
.nav-item a:hover {
background-color: #f0f8ff;
color: #007bff;
}
.nav-item.active a {
background-color: #007bff;
color: white;
font-weight: 600;
transform: translateY(-2px);
}
.content {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<ul class="nav">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Services</a></li>
<li class="nav-item"><a href="#">Portfolio</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
<div class="content">
<h2>Active Tab Navigation Demo</h2>
<p>Click on any navigation tab above to see the active state change. The blue highlighting indicates the currently selected tab.</p>
</div>
<script>
const navItems = document.querySelectorAll(".nav-item");
navItems.forEach(item => {
item.addEventListener("click", function(e) {
e.preventDefault();
// Remove active class from all items
navItems.forEach(navItem => {
navItem.classList.remove("active");
});
// Add active class to clicked item
this.classList.add("active");
});
});
// Set first item as active by default
if (navItems.length > 0) {
navItems[0].classList.add("active");
}
</script>
</body>
</html>
Key Features
This navigation implementation includes several important features:
- Single Active State: Only one tab can be active at a time
- Visual Feedback: Clear indication of the selected tab with color and styling changes
- Smooth Transitions: CSS transitions provide smooth visual changes
- Default Selection: The first tab is automatically set as active on page load
- Event Prevention: Prevents default link behavior for demo purposes
Customization Options
You can easily customize this navigation by:
- Changing colors in the CSS active state
- Adding icons to navigation items
- Implementing content switching based on active tab
- Adding animation effects or hover states
- Making it responsive for mobile devices
Conclusion
This active tab navigation provides a clean, interactive way to show current page or section state. The combination of HTML structure, CSS styling, and JavaScript functionality creates an intuitive user experience that's easy to implement and customize.
14K+ Views
