SaaS Marketing Navbar Block for React

Edit PRODUCT at the top of the file for the panel (each area is a title, a one-line description, an icon and an href) and PAGES for the plain links. Both the bar and the phone sheet read them, so they never drift apart. Four areas fill the panel's two columns; keep the descriptions to one short clause. Mark the page you're on with current: true, or compute it from your router (an area's href against the current path): that link gets aria-current="page", which draws the stroke on the bar and tints the row in the sheet, and a screen reader announces it as the current page.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab reaches the wordmark, Product, each link, Sign in and Start free. Enter or Space opens the Product menu, its button says whether it's expanded, and Escape closes it and puts focus back on Product. Focus stays on Product when the menu opens; Tab moves into the panel. The arrow keys move along the bar and between the panel's links. The menu also opens on hover.

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 whether the menu is open and which panel it controls; it 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 four product areas with their descriptions, the links with the current page tinted, 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. A sheet taller than the screen scrolls.

Yes, in the panel and in the sheet, so a client-side route change that keeps the navbar mounted doesn't leave a menu open over the new page. Each product link takes closeOnClick. The sheet's open state is held in the block too (sheetOpen), and each of its links closes it. Every link points at #: point them at your pages. Sign in and Start free render the link they're given with render, with nativeButton={false}.

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, because the next block's top rule is its bottom edge. The panel opens over the page under the bar, so the page below doesn't move. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; the menu still opens under it.

Nothing moves on load: the navbar is chrome and is simply there. The panel opens with the menu's own fade, the chevron turns, the sheet slides down from the top, and a band of light sweeps across Start free once on hover and keyboard focus. With reduced motion the chevron turns at once, the sheet appears without sliding and the light fades in where it stands. The catalog's panel still fades and scales in over a third of a second.