shadcn.io is not affiliated with official shadcn/ui
Floating Pill Navbar Block for Ark UI
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 Ark 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 takes asChild with the link inside, so it can be your router's link.
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.