Transparent Hero Navbar Block for React

Keep the header as it is (absolute inset-x-0 top-0 z-10 inside a relative box) and put your hero in that box: an image, a video or a gradient. The scrim behind the bar is the first child of the header; it's the page colour at full strength at the top edge, 80% at its middle and clear at the foot, so with a photograph the links keep a plain page-coloured band to sit on. Replace the drawn section with your hero and keep it aria-labelled or give it its own heading.

The links are the theme's own colours (muted until hovered, foreground for the current page) on the scrim, which is the theme's own background, so they keep their contrast in light and dark and in every preset. The dots are drawn at a low strength and fade out before the headline, and the hero's own text sits below the scrim. If you use a photograph, check the strip under the bar, and raise the scrim's strength if it's busy.

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, Sign in, Book a stay and the menu button. The drawn hero is hidden from assistive technology. Book a stay renders the link it's given with render, with nativeButton={false}.

Below the md breakpoint the wordmark and a menu button stay on the bar (Book a stay stays beside them from sm up and moves into the sheet below it, so nothing wraps at 320 pixels). The button opens a sheet from the top that fills the screen: its header lines up with the bar, the four links are large, with the current page tinted and dotted, and Book a stay and Sign in sit at the foot. 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. A sheet taller than the screen scrolls.

Nothing moves on load: the bar and the drawing are static and the dots don't react to the pointer. A band of light sweeps across Book a stay once on hover and keyboard focus, and the sheet slides down from the top. With reduced motion the sheet appears without sliding and the light fades in where it stands.