shadcn.io is not affiliated with official shadcn/ui
Pill Links Navbar Block for Radix UI
A navbar for a sprint-planning app where the current page is a pill that slides to whichever link you choose, with the links and a Shine Button grouped at the end and hover only tinting.
Installation
Overview
A navbar for React with Radix UI whose current page is a pill. The wordmark sits at the start; at the end, five round links (Boards, Backlog, Sprints, Reports and Pricing) and a Try free Shine Button sit together. The pill sits behind the current link, a soft tint with a hairline ring and no tray around the links. Choose another link and the pill slides to it, resizing to its width: its inline start and width come from the link's measured box (measured again whenever the bar resizes), so it works in right-to-left pages, and the first position is set without a transition. Hovering only tints a link; the pill never follows the pointer. The current page is also announced (aria-current="page" moves with the choice) and has a heavier label, so the pill isn't the only mark. Below the md breakpoint the links fold into a menu button that opens a sheet from the top with the same links. The bar is 56 pixels high and takes its rails and top rule from the Guides spine. It's built from Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. For product sites where the links are the app's own areas, and the bar should show where you are.
FAQ
How do I change the links, and wire them to my router?
Edit PAGES at the top of the file: each entry is an id, a label and an href, and useState("sprints") sets the first current page. The demo's links point at #, and choosing one calls preventDefault and moves the pill, so the page doesn't jump to the top. With a real router, delete the onClick handler and compute active from the current path instead: the pill, aria-current="page" and the heavier label follow.
How is the pill positioned?
After each render the block measures the active link against the nav and gives the pill that offset and width, as inset-inline-start and width; a ResizeObserver measures again when the bar changes size (it also catches the links appearing at the md breakpoint). The pill transitions those two properties for 300 ms, but only after your first choice: the first position, and the first measurement after hydration, are set with no transition. A link you haven't chosen has no tint of its own beyond the hover tint.
How does it work with a keyboard and a screen reader?
The links sit in a nav landmark named Main, beside the wordmark (a link home). Tab walks the wordmark, the five links, Try free and, on a phone, the menu button; Enter chooses a link and moves the pill. The current page is announced as the current page, and the pill itself is hidden from assistive technology.
How does it work on a phone?
Below the md breakpoint Try free and a menu button stay on the bar next to the wordmark, and nothing wraps at 320 pixels. The menu button opens a sheet from the top whose header lines up with the bar, then the links, the current page tinted with a dot. Choosing a link moves the current page and closes the sheet; so do Escape and the close button, and focus goes back to the menu button.
Try free takes asChild with the link inside, so it can be your router's link.
What happens with reduced motion?
With reduced motion the pill jumps to the chosen link at once. The sheet opens without sliding, and the band of light on Try free fades in where it stands instead of sweeping.
How does it sit on the page, and can it stick to the top?
The navbar is the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border, because the next block's top rule is its bottom edge. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header.