Category Chips Navbar Block for React

Edit CATEGORIES at the top of the file (an id, a name and a count each) and START, the id of the chip that is current when the page opens. The links are href="#": point them at your category pages and derive the current one from your router. The counts are plain numbers here; feed them from your catalogue so they can't disagree with the page.

It looks the words up in the category names and chooses the first match: the chip becomes current and scrolls into view, and a polite status says "Boots, 22 items." Nothing is searched in products here, and nothing is sent. If no name matches, a short line under the field says so and the status repeats it. Replace search with your own lookup (and a results page) when you have one.

It's a plain scroller with snap-x: touch, trackpad, the keyboard (Tab moves through the chips and the row follows focus) and the mouse wheel with Shift all work. A fade appears at the start edge once you've scrolled away from it and at the end edge while more chips are out of sight; both follow the writing direction. Choosing a chip scrolls it into view only as far as needed, smoothly, or at once with reduced motion.

The search is a form with the search role and a field named "Jump to a category". The chips are links in a list inside a nav named Categories; the current one carries aria-current="page" and each name ends with a spoken "24 items". Account and Bag are links named for what they open, with the bag's count in its name ("Bag, 2 items"); their tooltips show on focus as well as on hover.

Below the md breakpoint the search field becomes an icon button named Search. It opens a sheet from the top with a header that lines up with the bar (the wordmark and a close button) and the same field; a hit closes the sheet and scrolls the chip into view, and Escape or the close button returns focus to the icon. The chips stay in the lower row, still scrolling with fades. Nothing wraps at 320 pixels.

Yes. The rows mirror, the chips start at the right, the fades sit at the correct edges and the search icon moves to the start of the field. The wordmark is artwork and keeps its direction. Wrap the block in your direction provider (the catalog's DirectionProvider) so the tooltips follow the page.

Nothing moves on load. Chips ease their colour, the strip scrolls smoothly to a chosen chip and the sheet slides down. With reduced motion the colours change at once, the strip jumps and the sheet appears without sliding.