Department Search Ecommerce Navbar Block for React

Edit PRODUCTS at the top of the file (a name, a department, an icon, a price in whole dollars and a value) and DEPARTMENTS for the select's options. The popup's rows, the filter and the empty message all read them. Prices are formatted by one money() helper in a single left-to-right span, so a currency sign never moves in right-to-left layouts.

In this demo it adds one to the bag's count and says so in a polite status ("Brass table lamp added to your bag. 3 items in your bag."); nothing is sent anywhere and the count resets when the page reloads. Replace add with your own cart call. On a phone the search closes after an add, so the new count is visible, and focus goes back to the search button.

The select is a native one, so it uses the phone's own picker. Changing it re-filters the popup at once; with nothing left it says "Nothing in Kitchen matches …" instead of an empty list. The select comes before the field in the tab order.

Tab reaches the department select, then the field. Typing opens the popup; the arrow keys move through the rows, Enter adds the highlighted product, and Escape closes the popup first and, with the popup closed, ends a phone's search. The Autocomplete is the same on every base.

Below md the bar shows the wordmark, a search button, the bag and a menu button. The search button (aria-expanded, aria-controls the search landmark) swaps the bar for the field, which takes the keyboard; Escape or the close button brings the bar back and focus returns to the search button. The links wait in a sheet from the top.

Edit PAGES: the bar and the sheet read it, and the page you're on takes aria-current="page". The bag and Sign in are links to #. Sign in and the bag render the link they're given with render, with nativeButton={false}.

It's the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border because the next block's top rule is its bottom edge. The popup drops below the bar and never changes its height.