shadcn.io is not affiliated with official shadcn/ui
Floating Pill Navbar Block for React
A detached opaque pill navbar that hugs its content and floats centred in the page column, with the call to action inside it and a drawer menu on phones.
Installation
Overview
A floating navbar for React with Base UI, for a 3D-printing service called Pebbleworks. The bar is a pill (rounded-full bg-card shadow-lg ring-1) detached from the page rule and centred in the column, only as wide as its content: the wordmark, Materials, Pricing, Gallery and Help, and a Get a quote Shine Button inside it. The block is the pill and 12 pixels of air above and below it, 72 pixels in all, under the spine's top rule. On a phone the pill spans the column with the wordmark and a menu button, which opens a drawer from the bottom with the links and the action. It's built from Drawer, Guides, Shine Button and Button, with your theme's tokens for every colour. For product and service sites that want a compact, raised header.
FAQ
How do I make it float over the page, or stick?
As built, the pill sits in flow under the top rule. To float it over your content, take the header out of the flow (absolute inset-x-0 top-0 z-40, or sticky top-0 z-40 to keep it in view while the page scrolls) and keep the pill as it is: it already has its own surface, ring and shadow, so nothing shows through it.
How does the pill size itself?
From md up it takes w-fit: its width is its content (the wordmark, the links, the action), centred in the column, so changing the links changes the pill. Below md it spans the column. The 12 pixels of padding on the column are what make the block 72 pixels; the shadow falls into that space and the top rule stays above it.
How does it work with a keyboard and a screen reader?
The links sit in a nav named Main after the wordmark (a link home), the current page is aria-current="page" (heavier, with a dot), and Tab walks the wordmark, the links, Get a quote and the menu button.
Get a quote renders the link it's given with render, with nativeButton={false}.
How does it work on a phone?
Below the md breakpoint the pill spans the column with the wordmark and a menu button; Get a quote moves into the drawer so nothing crowds the pill at 320 pixels. The drawer opens from the bottom with a grabber, the four links and Get a quote. Focus moves into the drawer and stays there; Escape, a swipe down, a tap outside it or choosing a link closes it, and focus goes back to the menu button.
What moves, and what happens with reduced motion?
Nothing moves on load. Links tint on hover, a band of light sweeps across Get a quote once on hover and keyboard focus, and the drawer slides up from the bottom. With reduced motion the drawer appears without sliding and the light fades in where it stands.
Related
- Pro
Glassmorphism Navbar
Surface and themeA frosted rectangular navbar panel inset in the page column, lying over a band of slowly drifting dots and soft mesh so the blur is visible, with a drawer menu on phones.
- Pro
Sticky Blur Navbar
Surface and themeA navbar stuck to the top of a scrolling page preview: clear at rest, frosted with a hairline once the page moves under it, with a sheet menu on phones.
- Pro
Minimal Navbar
Link highlightsThe least navbar there is: a slim 48 px bar with a wordmark, three plain links and one Shine Button for a journaling app, with no motion, the current page marked by weight and a dot, and a bottom drawer on phones.
- Pro
Centered Logo Navbar
Cells and splitsA symmetrical navbar with a centred wordmark in its own hairline cell between two link groups and a Bag link, and a sheet menu on phones.
- Pro
SaaS Marketing Navbar
Mega menusA one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain links with the current page marked, Sign in and a Shine Button, and a sheet with the same links on phones.
- Pro
Drill-Down Drawer Navbar
Mobile and drawersA drawer navbar for a travel planner: a Menu button at every width opens a sheet from the end where Plan and Explore slide a second panel in with a Back button, with Pricing and Help centre as plain links and a Shine Button at the foot.