Navbar With Hover Pill Links
ProClean sticky navbar with smooth hover pill animations, sign-in link, CTA button, and a mobile drawer. Adapts to light and dark mode automatically.
When to use Navbar With Hover Pill Links
Links, a sign in, one button, a drawer on small screens. Nothing else, and the shortest file in this category by a wide margin, which is worth something on a block you will read again every time the navigation changes. Pick it when the bar is plumbing rather than design and every bit of attention belongs to what is underneath it.
The one flourish is a soft pill that slides behind whichever link the cursor is over. It exists so the bar does not look unfinished, and it is subtle enough that nobody will describe your site by it. If you later need a dropdown or a mega menu, this is not the file to grow: start from one of the bars that already has the structure rather than bolting a panel onto this one.
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
- 170 lines, 7 KB in one file
- Install
wensity add navbar-with-hover-pill-links --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, minimal, sticky, mobile-ready
- Last updated

