shadcn.io is not affiliated with official shadcn/ui
Category Chips Navbar Block for Solid
A two-row shop navbar: wordmark, a search that jumps to a category and account and bag links on top, and below a strip of category chips with counts that snap-scrolls with edge fades and brings the current chip into view.
Installation
Overview
A category-chip navbar for Solid with Ark UI, the header of an outdoor-gear shop called Trailcairn. The upper row holds the wordmark, a search field, and the account and bag links (the bag with its count, both with tooltips). The lower row is a strip of fourteen category chips, each with its item count, that scrolls sideways with snap points and a fade at every edge it can still scroll past. The current chip (aria-current="page") is filled with the foreground colour, so it isn't marked by colour alone, and it's brought into view when you choose it. The search is honest about what it does: Enter jumps to the first category whose name has your words in it ("boot" finds Boots), makes it current and scrolls it into view; a miss says so under the field. The header is 104 pixels tall (56 and 48), each row on its own spine. On a phone the search folds into an icon that opens a sheet from the top with the same field, and the chips stay. It's built from Input Group, Sheet, Tooltip, Button and Guides, with your theme's tokens for every colour. For shops and catalogues with many short categories.
FAQ
How do I change the categories and the counts?
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.
What does the search do?
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.
How does the chip strip scroll?
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.
How does it work with a keyboard and a screen reader?
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.
How does it work on a phone?
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.