Navigation Header

Sticky header with logo, desktop nav links, GitHub icon, and a slide-in mobile drawer menu with backdrop blur.

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>

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: blur on scroll
Smooth drawer slide-in via CSS transforms
Dark overlay closes on click
Escape key closes the drawer
aria-expanded / aria-hidden for accessibility

When to use

Main site or app header
SaaS product top navigation
Any page that needs a responsive nav bar