• Home
  • /
  • Stylish Animated Navbar with HTML CSS JS

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)`;
  });
});

				
			

Share this post

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top