Navigation & Menus 3 Ready-to-Copy Components
Modern Navigation Menus & Code Snippets
Craft modern website navigation with glassmorphism, floating island pill menus, and animated mobile drawers. Includes responsive markup, CSS blur filters, and lightweight JS toggles.
Fully Responsive Touch Drawer Support 1-Click Code Copy
Glassmorphism & Responsive
1. Modern Glassmorphic Sticky Navbar
Frosted glass backdrop filter with responsive desktop navigation, CTA button, and mobile drawer.
Live Interactive Preview
<nav class="glass-navbar">
<div class="nav-container">
<a href="/" class="brand-logo">
<span class="logo-icon">✦</span> StudioBrand
</a>
<ul class="nav-links" id="glassNavLinks">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#docs">Docs</a></li>
</ul>
<div class="nav-actions">
<a href="#signup" class="btn-cta">Get Started</a>
<button class="mobile-toggle" id="glassMobileBtn" aria-label="Toggle Menu">☰</button>
</div>
</div>
</nav>.glass-navbar {
position: sticky;
top: 1rem;
z-index: 50;
margin: 0 auto;
max-width: 1200px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
}
.glass-navbar * {
box-sizing: border-box;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.75rem;
}
.brand-logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 900;
font-size: 1.15rem;
color: #0f172a;
text-decoration: none;
letter-spacing: -0.02em;
}
.logo-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: #2563eb;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.nav-links {
display: flex;
gap: 1.75rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
color: #334155;
transition: color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active {
color: #2563eb;
font-weight: 700;
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.btn-cta {
padding: 0.55rem 1.35rem;
background: #2563eb;
color: #ffffff;
font-weight: 700;
font-size: 0.875rem;
border-radius: 0.65rem;
text-decoration: none;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
transition: all 0.2s ease;
display: inline-block;
}
.btn-cta:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
.mobile-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: #0f172a;
cursor: pointer;
padding: 0.25rem;
}
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 1rem;
padding: 1.5rem;
margin-top: 0.5rem;
flex-direction: column;
gap: 1rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.nav-links.is-open {
display: flex;
}
.mobile-toggle {
display: block;
}
}const toggleBtn = document.getElementById('glassMobileBtn');
const navLinks = document.getElementById('glassNavLinks');
if (toggleBtn && navLinks) {
toggleBtn.addEventListener('click', () => {
navLinks.classList.toggle('is-open');
});
}💡 How it works: The navbar floats above page content with
position: sticky; top: 1rem;. The frosted glass blur is created by backdrop-filter: blur(16px) and a subtle translucent border. Floating Island Layout
2. Floating Island Pill Nav
Compact, centered island navbar with active state indicator pill highlight.
Live Interactive Preview
<div class="pill-nav-wrapper">
<nav class="pill-nav">
<a href="#overview" class="pill-item active">Overview</a>
<a href="#analytics" class="pill-item">Analytics</a>
<a href="#reports" class="pill-item">Reports</a>
<a href="#settings" class="pill-item">Settings</a>
</nav>
</div>.pill-nav-wrapper {
display: flex;
justify-content: center;
padding: 2rem 1rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
}
.pill-nav-wrapper * {
box-sizing: border-box;
}
.pill-nav {
display: inline-flex;
align-items: center;
background: #0f172a;
padding: 0.4rem 0.5rem;
border-radius: 9999px;
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pill-item {
padding: 0.55rem 1.35rem;
font-size: 0.875rem;
font-weight: 600;
color: #94a3b8;
text-decoration: none;
border-radius: 9999px;
transition: all 0.2s ease;
}
.pill-item:hover, .pill-item.active {
color: #ffffff;
}
.pill-item.active {
background: #3b82f6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}Fullscreen Overlay
3. Fullscreen Animated Curtain Menu
Immersive slide-down menu with staggered typography links and close button.
Live Interactive Preview (Click Open Menu)
<button id="curtainOpenBtn" class="curtain-open-btn">Open Fullscreen Menu ☰</button>
<div id="curtainOverlay" class="curtain-overlay">
<button id="curtainCloseBtn" class="close-btn">×</button>
<nav class="curtain-nav">
<a href="#portfolio">01. Studio Portfolio</a>
<a href="#design">02. Design Systems</a>
<a href="#blog">03. Engineering Blog</a>
<a href="#contact">04. Get In Touch</a>
</nav>
</div>.curtain-open-btn {
padding: 0.9rem 2.2rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-weight: 800;
color: #ffffff;
background: linear-gradient(135deg, #2563eb, #4f46e5);
border: none;
border-radius: 0.75rem;
cursor: pointer;
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
transition: all 0.2s ease;
box-sizing: border-box;
}
.curtain-open-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5);
}
.curtain-overlay {
position: fixed;
inset: 0;
background: #090d16;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(-100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1000;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
}
.curtain-overlay * {
box-sizing: border-box;
}
.curtain-overlay.is-open {
transform: translateY(0);
}
.curtain-nav {
display: flex;
flex-direction: column;
gap: 1.75rem;
text-align: center;
}
.curtain-nav a {
font-size: 2.25rem;
font-weight: 900;
color: #ffffff;
text-decoration: none;
letter-spacing: -0.02em;
transition: color 0.2s ease, transform 0.2s ease;
}
.curtain-nav a:hover {
color: #22d3ee;
transform: scale(1.05);
}
.close-btn {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 2.5rem;
color: #ffffff;
background: none;
border: none;
cursor: pointer;
line-height: 1;
}
.close-btn:hover {
color: #22d3ee;
}const openBtn = document.getElementById('curtainOpenBtn');
const closeBtn = document.getElementById('curtainCloseBtn');
const overlay = document.getElementById('curtainOverlay');
openBtn.addEventListener('click', () => overlay.classList.add('is-open'));
closeBtn.addEventListener('click', () => overlay.classList.remove('is-open'));Frequently Asked Questions
How do I make the glassmorphic navbar stick to the top on scroll?
Use position: sticky; top: 0; z-index: 50; combined with backdrop-filter: blur(12px) and a semi-transparent background like rgba(255, 255, 255, 0.8) or rgba(15, 23, 42, 0.8).
How does the mobile hamburger menu toggle without large libraries?
Our navbar uses a simple 5-line Vanilla JS click event listener that toggles an .is-active or .hidden class on the mobile drawer element.
Can I integrate these menus into WordPress, React, or Tailwind?
Yes. The semantic HTML structure and CSS custom properties allow seamless porting into Tailwind classes, React JSX components, or WordPress header.php templates.