Stylish Animated Navbar with HTML CSS JS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Animated Navbar</title>
<link rel="stylesheet" href="style.css" />
<template id="tC5lkrpi2QQT6JA53ZUQ"></template>
</head>
<body>
<nav class="navbar">
<div class="glow"></div>
<a href="#" class="nav-item active" data-index="0"><i data-lucide="home"></i></a>
<a href="#" class="nav-item" data-index="1"><i data-lucide="user"></i></a>
<a href="#" class="nav-item" data-index="2"><i data-lucide="heart"></i></a>
<a href="#" class="nav-item" data-index="3"><i data-lucide="monitor"></i></a>
<a href="#" class="nav-item" data-index="4"><i data-lucide="settings"></i></a>
</nav>
<template id="yKE2tymYRPngUpfVcmrV"></template>
<script type="bv_inline_delayed_js" bv_unique_id="eiT8bgGIFd6NIZdYKWLb" defer="1" data-cfasync="" async="">lucide.createIcons();</script>
</body>
</html>
CSS
:root {
--bg: #f5f5f5;
--nav-bg: #ffffff;
--accent: #4f46e5; /* Indigo */
--icon-default: #888;
--icon-active: #ffffff;
--glow: rgba(79, 70, 229, 0.15);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Segoe UI', sans-serif;
}
.navbar {
display: flex;
position: relative;
gap: 40px;
background: var(--nav-bg);
padding: 20px 28px;
border-radius: 50px;
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.08);
}
.nav-item {
font-size: 24px;
color: var(--icon-default);
transition: 0.3s ease;
z-index: 2;
position: relative;
}
.nav-item.active {
color: var(--icon-active);
}
.nav-item:hover {
color: var(--accent);
transform: scale(1.1);
}
/* Glowing background pill */
.glow {
position: absolute;
width: 50px;
height: 50px;
background: var(--accent);
border-radius: 50%;
z-index: 1;
bottom: 12px;
left: 15px;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 10px 20px var(--glow);
}
JavaScript
const items = document.querySelectorAll('.nav-item');
const glow = document.querySelector('.glow');
items.forEach((item, index) => {
item.addEventListener('click', () => {
// Update active icon
document.querySelector('.nav-item.active')?.classList.remove('active');
item.classList.add('active');
// Move the glow
const gap = 40;
const iconWidth = item.offsetWidth;
const offset = index * (iconWidth + gap);
glow.style.transform = `translateX(${offset}px)`;
});
});