Components Medium
Navigation Header
Sticky header with logo, desktop nav links, GitHub icon, and a slide-in mobile drawer menu with backdrop blur.
Open in Lab
MCP
css javascript
Targets: HTML
Code
:root {
color-scheme: dark;
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #0a0a0a;
color: #e2e8f0;
min-height: 100vh;
}
/* ─── Header ─── */
.nav-header {
position: sticky;
top: 0;
z-index: 50;
height: 60px;
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
height: 100%;
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-logo {
font-size: 1.05rem;
font-weight: 700;
color: #f8fafc;
text-decoration: none;
letter-spacing: -0.025em;
flex-shrink: 0;
}
/* Desktop links */
.nav-links {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
}
.nav-link {
padding: 6px 12px;
border-radius: 7px;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.15s, background 0.15s;
}
.nav-link:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.06);
}
/* End slot */
.nav-end {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.nav-icon-link {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.45);
text-decoration: none;
transition: color 0.15s;
padding: 6px;
border-radius: 7px;
}
.nav-icon-link:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.06);
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 8px;
background: none;
border: none;
cursor: pointer;
border-radius: 7px;
transition: background 0.15s;
}
.hamburger:hover {
background: rgba(255, 255, 255, 0.06);
}
.bar {
display: block;
width: 20px;
height: 2px;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
transition: background 0.15s;
}
.hamburger:hover .bar {
background: #f8fafc;
}
/* ─── Mobile Drawer ─── */
.drawer {
position: fixed;
inset: 0;
z-index: 100;
visibility: hidden;
pointer-events: none;
}
.drawer.open {
visibility: visible;
pointer-events: auto;
}
.drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
transition: opacity 0.3s;
}
.drawer.open .drawer-backdrop {
opacity: 1;
}
.drawer-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(300px, 82vw);
background: #111;
border-left: 1px solid rgba(255, 255, 255, 0.08);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 4px;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer.open .drawer-panel {
transform: translateX(0);
}
.drawer-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.drawer-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
padding: 6px;
border-radius: 7px;
line-height: 0;
transition: color 0.15s, background 0.15s;
}
.drawer-close:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.07);
}
.drawer-link {
padding: 10px 12px;
border-radius: 8px;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition: color 0.15s, background 0.15s;
}
.drawer-link:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.06);
}
.drawer-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.07);
margin: 6px 0;
}
/* ─── Demo content ─── */
.demo-content {
max-width: 1280px;
margin: 0 auto;
padding: 6rem 1.5rem;
color: rgba(255, 255, 255, 0.2);
font-size: 0.875rem;
}
/* ─── Responsive ─── */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hamburger {
display: flex;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Header</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header -->
<header class="nav-header" role="banner">
<div class="nav-container">
<a href="/" class="nav-logo" aria-label="Home">Brand</a>
<nav class="nav-links" role="navigation" aria-label="Main">
<a href="/library" class="nav-link">Library</a>
<a href="/showcase" class="nav-link">Showcase</a>
<a href="/docs" class="nav-link">Docs</a>
<a href="/lab" class="nav-link">Lab</a>
</nav>
<div class="nav-end">
<a href="https://github.com" class="nav-icon-link" aria-label="GitHub" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
</svg>
</a>
<button
class="hamburger"
id="hamburger"
aria-label="Open navigation"
aria-expanded="false"
aria-controls="mobile-drawer"
>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</div>
</div>
</header>
<!-- Mobile Drawer -->
<div class="drawer" id="mobile-drawer" aria-hidden="true">
<div class="drawer-backdrop" id="drawer-backdrop"></div>
<nav class="drawer-panel" role="navigation" aria-label="Mobile">
<div class="drawer-top">
<span class="nav-logo">Brand</span>
<button class="drawer-close" id="drawer-close" aria-label="Close navigation">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
<a href="/library" class="drawer-link">Library</a>
<a href="/showcase" class="drawer-link">Showcase</a>
<a href="/docs" class="drawer-link">Docs</a>
<a href="/lab" class="drawer-link">Lab</a>
<hr class="drawer-divider" />
<a href="https://github.com" class="drawer-link" target="_blank" rel="noopener">GitHub ↗</a>
</nav>
</div>
<!-- Demo page content -->
<main class="demo-content">
<p>Resize the window to see the mobile menu.</p>
</main>
<script>
const hamburger = document.getElementById('hamburger');
const drawer = document.getElementById('mobile-drawer');
const backdrop = document.getElementById('drawer-backdrop');
const closeBtn = document.getElementById('drawer-close');
function open() {
drawer.classList.add('open');
drawer.setAttribute('aria-hidden', 'false');
hamburger.setAttribute('aria-expanded', 'true');
document.body.style.overflow = 'hidden';
}
function close() {
drawer.classList.remove('open');
drawer.setAttribute('aria-hidden', 'true');
hamburger.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
}
hamburger.addEventListener('click', open);
closeBtn.addEventListener('click', close);
backdrop.addEventListener('click', close);
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
</script>
</body>
</html>Navigation Header
A sticky responsive navigation header. Desktop shows inline links; mobile collapses to a hamburger button that opens a full-height slide-in drawer with a dark overlay.
Features
- Sticky +
backdrop-filter: bluron scroll - Smooth drawer slide-in via CSS transforms
- Dark overlay closes on click
- Escape key closes the drawer
aria-expanded/aria-hiddenfor accessibility
When to use
- Main site or app header
- SaaS product top navigation
- Any page that needs a responsive nav bar