Sticky Blur Navbar Block for React

The preview window only stands in for a page. On your page, drop the section and the drawn article, keep the header, and add sticky top-0 z-40 to it (the classes that already sit on it). Then flip data-scrolled from the window's scroll: window.addEventListener("scroll", () => setScrolled(window.scrollY > 0), { passive: true }). The frosted look, the hairline and the transition are all keyed to that one attribute, so nothing else changes. The bar stays one bar high, and its top rule and rails line up with every block under it.

Three things: the background becomes the page colour at 70% opacity, the backdrop blurs, and an inset hairline (the theme's border colour) appears on the bar's bottom edge. The links keep the theme's own text colours on that surface, and the page lines passing under it are low-contrast greys, so the links stay legible in light and dark. The current link and the Shine Button are unchanged.

The preview is a named region, "Page preview", that takes focus, so the arrow keys, Page Down and Space scroll it and the bar frosts as they do; its drawn article is hidden from assistive technology. The links sit in a nav named Main after the wordmark (a link home), the current page is aria-current="page", and Tab walks the wordmark, the links, Read free and the menu button. Read free renders the link it's given with render, with nativeButton={false}.

Below the md breakpoint the links fold: the wordmark, Read free and a menu button stay on the bar, and nothing wraps at 320 pixels. The menu button opens a sheet from the top whose header lines up with the bar, then the same links with the current page tinted. 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. The preview and the bar keep working behind it.

When the page starts to move the bar's background, hairline and blur ease in over a fraction of a second, and a band of light sweeps across Read free once on hover and keyboard focus. With reduced motion the frost appears at once, the sheet appears without sliding and the light fades in where it stands.