Stacked Double Row Navbar Block for React

The header is sticky -top-12 z-40 bg-background: it sticks 48 pixels above the top of the viewport, which is exactly the height of the upper row, so once you have scrolled past it only the 56 pixel tab row is left in view. There is no script and no scroll listener. Put the header as a direct child of your page's scrolling container (the body, normally), and give nothing between them overflow: hidden, which would stop the sticking. In the gallery's preview the page doesn't scroll, so you see both rows at rest.

Edit TABS (an id and a label each), UTILITIES, LANGUAGES and ACCOUNT at the top of the file. The links are href="#": point them at your routes and derive the current tab from your router instead of the block's current state, which only marks a tab when it is clicked. Choosing a tab marks it current and brings it to the middle of the row on a phone.

It is a radio list: choosing a language checks it, changes the button's name to it and a polite status says "Español selected." Focus goes back to the button. Nothing else on the page is translated, because the block has no strings to swap; wire pickLanguage to your i18n. The Language Switcher block shows a bar that translates itself.

Two navs: Utility (Support, Docs, Status) and Main (the tabs), each a labelled landmark with a list of links. The language and account buttons say whether they are expanded and open menus: Enter, Space or the Down arrow opens one, the arrow keys move through it, Enter chooses and Escape closes it with focus back on its button. Enter, Space or the Down arrow opens a menu with focus on its first row.

Below the md breakpoint the upper row is the wordmark and a menu button. The button opens a sheet from the top with the same utilities, the languages (buttons that say which is in use), the account links and Add property; choosing a link closes it and Escape or the close button returns focus to the menu button. The lower row is the tabs alone, scrolling sideways with a fade at each edge that can still scroll, the current tab brought into view. Nothing wraps at 320 pixels.

Yes. The rows mirror, the tabs scroll from the right and the fades move to the correct edges, the chevrons turn, and the menus open under the button's start edge. The wordmark is artwork and keeps its direction. Wrap the block in your direction provider (the catalog's DirectionProvider) so the menus follow the page.

Nothing moves on load. Tabs ease their colour, the chevrons turn, the menus fade in and the sheet slides down; scrolling a chosen tab into view is smooth. With reduced motion the colours and chevrons change at once, the sheet appears without sliding and the tab row jumps to the tab.