Premium Navigation – FutureNav
A premium navbar + single-page layout built with Tailwind CSS. Smooth scrolling, active link highlighting, mobile hamburger menu, and a glass UI glow that feels like a futuristic dashboard.
<!-- FutureNav wrapper -->
<body class="bg-black text-white font-['Space_Grotesk'] overflow-x-hidden">
<!-- Neon grid + blurred circles -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div class="absolute top-20 left-10 w-96 h-96 bg-indigo-900/10 rounded-full blur-3xl"></div>
<!-- grid columns + rows -->
</div>
<!-- Glass navbar -->
<nav id="navbar"
class="fixed top-0 left-0 right-0 bg-gray-900/70 backdrop-blur-lg border-b border-cyan-500/30 z-50">
<div class="container mx-auto px-6 py-3 flex items-center justify-between">
<!-- Logo block -->
<div class="flex items-center">
<div class="relative mr-2">
<div class="absolute inset-0 bg-cyan-400/30 rounded-md blur-sm"></div>
<div class="w-10 h-10 rounded-md bg-gradient-to-br from-indigo-600 to-purple-600 ...">
<div class="font-bold text-lg bg-gradient-to-r from-cyan-400 to-indigo-400 bg-clip-text text-transparent">FN</div>
</div>
</div>
<span class="text-xl font-medium bg-gradient-to-r from-indigo-400 via-cyan-400 to-purple-400 bg-clip-text text-transparent">
FutureNav
</span>
</div>
<!-- Desktop links -->
<div class="hidden md:flex items-center space-x-1">
<a href="#home" class="nav-link px-4 py-2">Home</a>
<a href="#about" ...>About</a>
<a href="#services"...>Services</a>
<a href="#portfolio"...>Portfolio</a>
<a href="#contact" ...>Contact</a>
</div>
<!-- Mobile hamburger -->
<button id="mobile-menu-button" ...>☰</button>
</div>
<!-- Collapsible mobile list -->
<div id="mobile-menu" class="md:hidden h-0 overflow-hidden">
<a href="#home" class="mobile-nav-link block px-4 py-2">Home</a>
...
</div>
</nav>
<!-- Sections: #home, #about, #services, #portfolio, #contact -->
</body>
/* Core theme variables */
:root {
--primary: #6366f1;
--secondary: #06b6d4;
--accent: #a855f7;
--navbar-bg: rgba(17,24,39,0.7);
--glass-effect: blur(12px);
}
body {
background-color: #030712;
color: #f3f4f6;
font-family: "Space Grotesk", system-ui;
overflow-x: hidden;
}
/* Glass navbar that darkens on scroll */
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: var(--navbar-bg);
backdrop-filter: var(--glass-effect);
border-bottom: 1px solid rgba(99,102,241,0.3);
transition: all 0.3s ease;
}
#navbar.scrolled {
background-color: rgba(17,24,39,0.9);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
/* Active link underline glow */
.nav-link {
position: relative;
}
.nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background:
linear-gradient(to right, #06b6d4, #6366f1);
transform: translateX(-50%);
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 80%;
}
/* Mobile menu expand / collapse */
#mobile-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
#mobile-menu.open {
max-height: 300px;
}
/* Sections fade up when visible */
.section-hidden {
opacity: 0;
transform: translateY(20px);
}
.section-visible {
opacity: 1;
transform: translateY(0);
}
// premium-navbar.js
document.addEventListener("DOMContentLoaded", () => {
// Cache DOM nodes
const navbar = document.getElementById("navbar");
const mobileBtn = document.getElementById("mobile-menu-button");
const mobileMenu = document.getElementById("mobile-menu");
const navLinks = document.querySelectorAll(".nav-link");
const mobileNavLinks = document.querySelectorAll(".mobile-nav-link");
const sections = document.querySelectorAll("section");
// 1) Mobile hamburger toggle
if (mobileBtn && mobileMenu) {
mobileBtn.addEventListener("click", () => {
mobileBtn.classList.toggle("active");
if (mobileMenu.classList.contains("open")) {
mobileMenu.style.height = "0";
mobileMenu.classList.remove("open");
} else {
mobileMenu.classList.add("open");
mobileMenu.style.height = `${mobileMenu.scrollHeight}px`;
}
});
}
// 2) Close mobile menu when link is clicked
mobileNavLinks.forEach((link) => {
link.addEventListener("click", () => {
if (!mobileBtn || !mobileMenu) return;
mobileBtn.classList.remove("active");
mobileMenu.style.height = "0";
mobileMenu.classList.remove("open");
});
});
// 3) Navbar scroll shadow + active section highlight
window.addEventListener("scroll", () => {
if (window.scrollY > 50) {
navbar && navbar.classList.add("scrolled");
} else {
navbar && navbar.classList.remove("scrolled");
}
highlightCurrentSection();
});
// 4) Smooth scroll for nav links
navLinks.forEach((link) => {
link.addEventListener("click", (event) => {
const targetId = link.getAttribute("href");
if (!targetId || !targetId.startsWith("#")) return;
event.preventDefault();
const section = document.querySelector(targetId);
if (!section) return;
const offset = section.offsetTop - 70;
window.scrollTo({
top: offset,
behavior: "smooth",
});
});
});
// 5) Determine which section is active
function highlightCurrentSection() {
let current = "";
sections.forEach((section) => {
const top = section.offsetTop - 100;
const height = section.offsetHeight;
if (window.scrollY >= top && window.scrollY < top + height) {
current = section.id;
}
});
navLinks.forEach((link) => {
link.classList.remove("active");
if (current && link.getAttribute("href") === `#${current}`) {
link.classList.add("active");
}
});
mobileNavLinks.forEach((link) => {
link.classList.remove("active");
if (current && link.getAttribute("href") === `#${current}`) {
link.classList.add("active");
}
});
}
// 6) Animate sections on enter
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("section-visible");
}
});
}, { threshold: 0.1 });
sections.forEach((section) => {
section.classList.add("section-hidden");
observer.observe(section);
});
highlightCurrentSection();
});