Sub-Navigation Navbar Block for React

Edit SECTIONS at the top of the file: each section has an id, a label and its list of pages (an id and a label). The first row, the second row's link sets and the polite lines are built from it; the first page of a section is where choosing the section lands. Pages and the product are made up for the demo. In an app, derive the current page from the route and make each link a real link: the block's goSection and goPage only keep the state and stop the demo's # links from jumping.

The three link sets are uls in one grid cell, so the cell is as wide as the widest set. The chosen set is visible; the others are invisible, transparent, inert and hidden from assistive technology, so they take no focus and are never read.

The first row's items are sections, not pages, so the one you are in carries aria-current="true"; the second row's items are pages, so the current one carries aria-current="page". The first row is a nav named Main and the second a nav named after the section ("Docs pages"). After a choice a hidden status line says, for example, "Docs: Quickstart."

The header stays two rows (100 pixels) with nothing in a menu: the first row shows the wordmark's icon and the three sections, and the second row scrolls sideways with faded edges. Choosing a section or a page scrolls the chosen page to the middle of the row (instantly under reduced motion). Sign in appears from md and the Shine Button from sm; below that, link them from your page or add a sheet.

Yes. Both rows mirror, the sub-row's first link starts at the end edge and scrolls toward the start, and the wordmark is artwork and keeps its direction.

The link sets cross-fade in 200 milliseconds and the phone's row scrolls smoothly to the chosen page. With reduced motion the sets swap and the row jumps at once.