A frosted-glass island that floats over the hero. Click any link — an accent pill slides under it like a marble in a track.
Instead of a full-width top bar, the navigation is a small, rounded, floating pill anchored to the top center. Frosted-glass background, brand mark + links + CTA all squeezed in. An animated pill marker slides under the active link. Used heavily by modern marketing sites — Vercel, Linear's landing, Liner, Mintlify, every newer Y Combinator startup.
One container with position: absolute (or fixed in production), centered with left: 50%; transform: translateX(-50%). Inside, a flex row holds the brand, link buttons, and a CTA. The active-link pill is a separate absolutely-positioned div inside the container — on click of any link, JS measures the target link's offsetLeft + offsetWidth and animates the pill's left and width to match with a springy cubic-bezier. Frosted glass via backdrop-filter: blur(20px) saturate(160%).
Click any link in the floating pill — the accent marker springs to its position.
A small frosted island above the content. Less visual weight, more focus on the message.
Build a floating-pill navigation. One container: position:fixed (or absolute), top:22px, left:50%, transform:translateX(-50%), display:flex with 4px gaps, padding:6px, border-radius:999px, frosted glass background (rgba(255,255,255,0.06), backdrop-filter:blur(20px) saturate(160%), 1px white-12% border, deep box-shadow). Inside: a brand mark with a glowing dot indicator + thin vertical divider, 5 link buttons styled as small pills (8px 14px padding, 13.5px font, muted color), then a high-contrast white CTA pill on the right. Add a SEPARATE absolutely-positioned div ".pill-bg" inside the nav — that's the animated accent marker. On click of any link, calculate target link's offsetLeft and offsetWidth, then set the pill-bg's left and width to match with transition:left 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.32s same. Active link gets a dark text color so it reads on the accent background. On mobile under 640px, hide all links except the active one (use ::-webkit-details-marker or a separate hamburger button to expand).