Animated Underline Navbar Block for React

Edit PAGES at the top of the file: each entry is a label, an href and, for the page you're on, current: true. The bar and the phone sheet both read it, so they never drift apart. Compute current from your router (the link's href against the current path) and the line, the heavier label and aria-current="page" follow. Keep to five or six short labels: the bar has room for them beside the wordmark and the two actions from md up.

The line is each link's ::after, one pixel high and scaled to 0 on the x axis. Its transform origin sits at the end, so when you leave it shrinks toward the end; on hover or keyboard focus the origin flips to the start and the scale goes to 1, so it grows from the start. In a right-to-left page the two origins swap, so the line still draws from the inline start. transition-transform runs 300 ms. The current page holds the scale at 1 with its origin unchanged.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab walks the wordmark, the five links, Sign in and Start free; a link takes a focus ring and the same underline as hover, and the current page is announced as the current page. Nothing opens or traps focus in the bar, so it needs no per-library keys.

Below the md breakpoint the wordmark, Start free and a menu button stay on the bar, and nothing wraps at 320 pixels. The menu button says it opens a menu and opens a sheet from the top whose header lines up with the bar (the wordmark where it was, the close button where the menu button was), then the links, the current page tinted with a dot, and Sign in and Start free. Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button. Sign in and Start free render the link they're given with render, with nativeButton={false}.

With reduced motion the line appears and disappears at once instead of drawing in; the colour change on hover is instant too. The sheet opens without sliding, and the band of light on Start 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, its top rule falls on the window's top edge (or between it and a banner above it), and it draws no bottom border. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header.