Gradient Border Navbar Block for React

It's the link's ::after: a 1-pixel line, absolutely placed on the bar's bottom edge (the link is h-9 in the h-16 bar, so 14 pixels below it), 1rem wider than the link on each side, with a horizontal gradient from clear through the foreground colour to clear. It has z-10, so it lies over the next block's top rule rather than under it. The current link shows it at 60% foreground, hover and focus show it at 25%. If you change the bar's height, change the -bottom-3.5 to half the difference between the bar and the link.

Yes: the current link is foreground colour with a heavier label, and it has aria-current="page", so the mark isn't colour or a faint line alone, and a screen reader announces the current page. Mark yours with current: true in PAGES, or compute it from your router.

The links sit in a nav named Main after the wordmark (a link home); Tab walks the wordmark, the links, Buy a license and the menu button, and keyboard focus shows both the focus ring and the fainter glint. Buy a license renders the link it's given with render, with nativeButton={false}.

Below the md breakpoint the links fold: the wordmark, Buy a license and a menu button stay on the bar, and nothing wraps at 320 pixels. The glint belongs to the bar, so on a phone the sheet marks the current page with a tint and a dot instead. 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.

Nothing moves on load or while you stay on a link. The hover and focus glint fades in over a fraction of a second, and a band of light sweeps across Buy a license once on hover and keyboard focus. With reduced motion the glint appears at once, the sheet appears without sliding and the light fades in where it stands.