A floating navbar is a pill that hovers over the content instead of sitting on top of it. It became the default for product sites for a reason worth naming: it takes less vertical space than a full-width bar, it lets the page's background show through, and it reads as lighter. It also introduces three problems a normal header does not have.
The shapes
The pill. A rounded container, centred or offset, floating a few pixels below the top edge. The most common version and the one people mean by the term.
The dock. Floating Action Menu by Chetan Verma and Liquid Morph Floating Menu by Aayush duhan are the bottom-anchored variants, where the bar behaves like a toolbar rather than like navigation. The mobile navigation guide covers when the bottom is the right edge to anchor to.
The action button. Floating Action Button is the single-action version, which is a different component with a different job: one primary action, always reachable.
The three problems
It floats over content. Which means it needs a background that works over everything the page can put behind it. A translucent blur is the usual answer and it is the expensive one, per the glass guide: backdrop-filter on a bar that sits over a scrolling page repaints on every frame of every scroll. Test it on a mid-range phone before shipping.
It hides content behind it. Anchor links land with the target under the bar. scroll-margin-top on the headings, equal to the bar's height plus its offset, fixes it in one line and is missing almost everywhere.
It has no width to work with. A full-width header can hold eight destinations; a centred pill holds four before it stops being a pill. That constraint is fine when the site genuinely has four sections and a problem when it has twelve, at which point the pill is hiding your navigation rather than presenting it.
The scroll behaviour
Most floating bars change on scroll: they shrink, gain a border, or hide going down and reappear going up.
Do it with an IntersectionObserver on a one-pixel sentinel at the top of the page rather than a scroll handler, for the reason the header guide gives: a scroll listener runs on every frame during the most performance-sensitive moment there is.
If the bar hides on scroll down, give it a threshold of at least 100 pixels. A bar that disappears on a 10-pixel scroll flickers on a trackpad.
What does not change
It is still a <nav> with real links. A floating pill built from buttons that call the router is invisible to a crawler and to anything that does not run JavaScript, and the header is the most-linked block on a site. The navbar guide has the rest of the contract: an active state, a keyboard path, and a mobile version that is designed rather than inherited.
One more that is specific to this shape: a floating bar sits above content in z-order, so check it against your dialogs and dropdowns. The most common bug is a menu opening underneath the very bar that triggered it.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | NavigationMenu and Sheet underneath the shape | No floating variant |
CSS position: sticky | The behaviour, with no JavaScript | The scroll-state flag still needs an observer |
| 21st | Floating pills, docks and action buttons | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Browse navigation components →
Frequently asked
- Why do anchor links land under a floating navbar?
- Because the bar overlays the content, so the browser scrolls the target to the top of the viewport and the bar covers it. scroll-margin-top on the headings, equal to the bar height plus its offset, fixes it in one line and is missing on most sites that use this pattern.
- Is a blurred floating navbar expensive?
- Yes, more than most uses of the effect. backdrop-filter forces the compositor to sample and blur what is behind the element, and a bar that floats over a scrolling page has a changing backdrop on every frame. Test it on a mid-range phone before shipping.
- How many links fit in a floating navbar?
- About four. A full-width header can hold eight destinations; a pill cannot without becoming a bar. That constraint is fine for a site with four sections and a problem for one with twelve, where the shape hides the navigation instead of presenting it.
- How should a floating bar react to scroll?
- With an IntersectionObserver on a one-pixel sentinel rather than a scroll handler, which runs on every frame. If it hides on scroll down, use a threshold of at least a hundred pixels, or it flickers on a trackpad.