Wensity

React navbar components

Navigation bars with the mobile menu, the scroll behaviour and the keyboard handling already finished. One command copies the source into your repository.

Browse all navbar blocksRead the docs

Built with the stack you already ship

React
Next.js
TypeScript
Tailwind CSS
Framer Motion
Vite
Astro
React
Next.js
TypeScript
Tailwind CSS
Framer Motion
Vite
Astro

Navbar blocks you can copy

Each navbar is a single file covering the desktop bar, the mobile drawer and the scroll transition. Preview it live, then copy the source into your project.

Navigation primitives

The accessible building blocks underneath: dropdown panels, command search, breadcrumbs and app sidebars. Use them to extend a navbar or build one from scratch.

How to choose a navbar

A navbar has one job that matters: tell people where they are and where else they can go, without taking up room the content needs. Most of the difficulty is not visual. It is deciding what earns a top level slot. Five or six items is the practical ceiling before people stop reading and start scanning, so anything past that belongs in a dropdown or in the footer.

The first real decision is whether the bar sticks. A sticky navbar keeps navigation one click away on a long page, which suits documentation and marketing sites where people jump around. It also permanently costs you sixty or so pixels of vertical space, which matters more on a phone than a laptop. Navbar With Frosted Glass and Navbar With Hover Pill Links both stick and both shrink their padding once you scroll past the fold, which gets most of the benefit back.

Floating bars are the other pattern. Navbar With Floating Pill Menu and Navbar With Floating Pill detach from the top edge and sit on the page as a rounded pill, which reads as lighter and modern but leaves the page background visible behind them. That works over a solid or gently animated hero and falls apart over a busy photograph, where the contrast behind the links changes as you scroll. Check it against your actual hero before committing.

Mobile is where navbars usually break, and it is worth testing before you pick. Every navbar here opens a full drawer rather than a cramped dropdown, traps focus while it is open, closes on Escape, and returns focus to the trigger. Those four behaviours are what separate a working menu from one that leaves keyboard and screen reader users stranded, and they are tedious enough to build that most hand rolled navbars skip at least one.

If the site has more than a couple of dozen destinations, add search rather than more links. Command gives you a palette on the standard shortcut, which regular visitors will reach for before they read the bar at all. Pair it with a compact navbar instead of trying to express the whole information architecture across the top of the screen.

Frequently asked questions

Run the Wensity CLI with the block slug, for example npx wensity@latest add navbar-with-frosted-glass --type block. The CLI copies the navbar into your codebase along with its mobile drawer, installs what it needs, and matches your Tailwind theme. You can also copy the source directly from the Code tab on any navbar page.
Use the CSS sticky position rather than JavaScript scroll listeners: a wrapper with position sticky and top zero costs nothing at runtime and never lags behind the scroll. The navbars here that change appearance on scroll use a single IntersectionObserver on a sentinel element above them, which fires twice per page rather than on every scroll frame.
Yes. The dropdown panels are built on Radix and Base UI primitives, so arrow key navigation, Escape to close, focus return to the trigger and the correct ARIA roles all come with them. The mobile drawers trap focus while open and restore it on close. This is the part most custom navbars get wrong, so it is worth keeping rather than rebuilding.
Not reliably. A floating bar like Navbar With Floating Pill Menu shows the page behind it, so contrast between the link text and whatever scrolls underneath changes as the user moves. Over a solid or lightly animated background it is fine. Over a photograph or a busy shader it is not, and a sticky bar with a solid or blurred backdrop is the safer pick.
Read the current path and compare it against each link. In the Next.js App Router that is the usePathname hook in a client component. The navbars here accept an active prop on each item so you can drive it from whatever router you use, which keeps the component itself framework agnostic.

Where to go next