Featured Preview Mega Menu Navbar Block for React

Edit PRODUCTS at the top of the file. A product has a title, a one-line description and an icon for the list, and a line and a sketch for the preview. A sketch is a heading and five rows; each row has a label, a value, a width (the bar's length, in percent of its track) and an offset (where it starts, for a waterfall), so a new chart is only data. PAGES holds the plain links; mark the page you're on with current: true.

The preview is decoration: it is aria-hidden, holds no focusable parts, and repeats only what the product's row already says, so nothing is lost without it. Everything a visitor needs is in the list: each link has its title and description. Moving through the list with the keyboard moves the preview too, because focus sets it as hover does. The previews fade without moving, which reduced motion turns off.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab reaches the wordmark, Platform, each plain link, Sign in and Deploy now. Enter or Space opens the Platform menu, its button says whether it is expanded, and Escape closes it and puts focus back on Platform. Focus stays on Platform when the menu opens; Tab or the arrow keys move into the list. The arrow keys also move along the bar. The menu also opens on hover.

Below the md breakpoint the wordmark, Deploy now 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 start edge (the left in a left-to-right page, the right in a right-to-left one) with a header that repeats the wordmark and a close button, the five products with their descriptions, the plain links with the current page tinted, and Sign in and Deploy now 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.

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 Deploy now render the link they're given with render, with nativeButton={false}.

A sheet's side is a physical edge (left or right), so a sheet that should come from the start of the line has to know which that is. The menu button's click handler reads its computed direction and picks the edge, so the sheet slides in from the right on a right-to-left page without a prop to set. If your app always reads one way, pass a fixed side.