Navbar With Floating Pill Menu

Pro

Centered floating pill navbar with a spring-loaded dropdown, glass backing, and staggered item reveals. Compact, premium, and adapts to light and dark mode.

When to use Navbar With Floating Pill Menu

A centred capsule with a menu inside it, which is the answer when the floating treatment is right for the page but a single row of links is not enough navigation. The panel drops on a spring and its rows arrive in sequence, so opening it feels like part of the design rather than a browser default.

It leans on a glass backing rather than full transparency, and that is a deliberate difference from the plain pill: text stays legible over a background that is moving underneath, which is exactly the case where a see through capsule falls apart. It stays compact enough that a full height hero still looks full height. If your site has one page worth linking to, this is more machinery than the job needs.

Block details

Category
Navbars
Renders
JavaScript animation. Paints first, then animates
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxframer-motiontailwind-merge
Source
380 lines, 19 KB in one file
Install
wensity add navbar-with-floating-pill-menu --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, pill, floating, spring, premium
Last updated

More navbars