Pill Links Navbar Block for React

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.

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.

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.

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 renders the link it's given with render, with nativeButton={false}.

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.

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.