Navigation Lab · Visual Playground

1. Classic Horizontal — logo + links + CTA

<nav class="nav">
  <div class="logo">studio.</div>
  <ul class="links">
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
  </ul>
  <a href="#" class="cta">Start project</a>
</nav>
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid #eee;
}
.links {
  display: flex;
  gap: 28px;
  list-style: none;
}
.cta {
  padding: 8px 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
}

2. Sticky Blur — position: sticky + backdrop-filter on scroll

Scroll to see the blur in action

The nav stays pinned to the top and the blur picks up whatever colors sit behind it. Works especially well on colorful or image-heavy sites.

Keep scrolling — notice how the background fades as content slides under the bar.

<nav class="nav">
  <div class="logo">aurora</div>
  <ul class="links">...</ul>
</nav>

<!-- content that scrolls underneath -->
<main>...</main>
/* Stays at the top while page scrolls */
.nav {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.5);
}

3. Hamburger Menu — pure CSS checkbox hack, no JS

<!-- Hidden checkbox drives everything -->
<input type="checkbox" id="burger" class="burger-toggle">

<nav class="nav">
  <div class="logo">orbit</div>

  <!-- Label acts as the button -->
  <label for="burger" class="burger-btn">
    <span></span><span></span><span></span>
  </label>
</nav>

<div class="mobile-menu"><ul>...</ul></div>
/* Hide the actual checkbox */
.burger-toggle { display: none; }

/* Menu panel uses max-height for smooth open */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}

/* When checked, expand the menu */
.burger-toggle:checked ~ .mobile-menu {
  max-height: 300px;
}

/* Animate the 3 burger bars into an X */
.burger-toggle:checked ~ .nav span:nth-child(1) { transform: rotate(45deg); top: 9px; }
.burger-toggle:checked ~ .nav span:nth-child(2) { opacity: 0; }
.burger-toggle:checked ~ .nav span:nth-child(3) { transform: rotate(-45deg); top: 9px; }

4. Mega Menu — multi-column dropdown on hover

Hover "Shop" to reveal the mega menu ↑

<li class="drop">
  <a href="#">Shop ▾</a>

  <div class="mega">
    <div class="mega-col">
      <h4>Clothing</h4>
      <ul>
        <li><a href="#">Tops</a></li>
      </ul>
    </div>
    <!-- more cols -->
  </div>
</li>
.drop { position: relative; }

.mega {
  position: absolute;
  top: calc(100% + 10px);
  width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 22px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
  opacity: 0;
  visibility: hidden;
  transition: all .2s;
}

.drop:hover .mega {
  opacity: 1;
  visibility: visible;
}

5. Sidebar Vertical — app-style navigation for dashboards

Dashboard

Your main content area goes here.

<div class="layout">
  <aside class="side">
    <div class="brand">moonbase</div>
    <ul>
      <li class="active"><a href="#">Dashboard</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </aside>

  <main class="panel">...</main>
</div>
/* Two-column grid for sidebar + main */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
}

.side {
  background: #0f172a;
  color: #cbd5e1;
  padding: 24px 16px;
}

.side li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
}

.side li.active a {
  background: rgba(236,72,153,.15);
  color: #fbcfe8;
}

6. Breadcrumbs — slash, arrow, and pill styles (pick one)

Slash style

Home
Labs
Gallery
Masonry

Arrow style

Shop
Men
Shoes
Runners

Pill style

Docs
Components
Button

<ul class="bc">
  <li><a href="#">Home</a></li>
  <li><a href="#">Labs</a></li>
  <li class="current">Masonry</li>
</ul>
.bc {
  display: flex;
  gap: 8px;
  list-style: none;
  color: #666;
}

/* The separator comes from ::before on 2nd+ items */
.bc li + li::before {
  content: "/";
  color: #ccc;
  margin-right: 8px;
}

.bc.arrows li + li::before { content: "›"; }

.bc.pills li {
  background: #f4f4f5;
  padding: 4px 12px;
  border-radius: 999px;
}

.bc .current {
  color: #111;
  font-weight: 600;
}

7. Bottom Tab Bar — mobile app style floating nav

Preview content

<nav class="tabbar">
  <button><i class="ph ph-house"></i>Home</button>
  <button class="active">Search</button>
  <button>Alerts</button>
  <button>Profile</button>
</nav>
.tabbar {
  position: fixed; /* or absolute in a container */
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: #fff;
  padding: 8px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.tabbar button {
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  border-radius: 999px;
}

.tabbar .active {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
}

8. Pill Nav — floating capsule nav over a colorful background

<nav class="pill-nav">
  <a href="#" class="active">Home</a>
  <a href="#">Catalog</a>
  <a href="#">Blog</a>
</nav>
.pill-nav {
  display: inline-flex;
  padding: 6px;
  gap: 4px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  border-radius: 999px;
}

.pill-nav a {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: #555;
}

.pill-nav a.active {
  background: #111;
  color: #fff;
}