Gooey Navbar

Gooey Navbar is a code component for a pill-style navigation that stays visually connected at all times, with each join rendered as a true geometric fillet — not a CSS blur trick.

Gooey Navbar is a code component for a pill-style navigation that stays visually connected at all times, with each join rendered as a true geometric fillet — not a CSS blur trick. That means crisp edges at any zoom, a corner radius you can actually control, and a waist thickness that never breaks down as your gap or push settings change. Highlights: Real geometry, not filters. Every pill and every joint is one continuous SVG path, built from circle-tangent fillets. No feGaussianBlur , no soft edges, no performance cost. Hover halo. A soft light follows the cursor across the row, fading in and out — not a hard fill swap. Three ways to mark "active." Point it at your site's pages, at sections on a single scrolling page, or let it behave like a segmented control driven by clicks. Built-in smooth scroll. Section links ease the page into view with a configurable duration and offset — no separate scroll library needed. Anchor-aware growth. Choose whether the row expands from its left edge, right edge, or stays visually balanced in the centre — so it holds its position whether you pin it left, right, or centred. Fully styleable. Colors, fonts, padding, corner radius, gap, and the join's thickness are all exposed as properties — from a tight capsule pill to a boxy segmented control. Drop it into any page, a landing page's table of contents, or use it as a lightweight segmented control — one component, three jobs.

Free Desktop Navigation