Navbar With Hover Pill Links

Pro

Clean 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

More navbars