Navbar With Floating Pill Menu
ProCentered 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

