shadcn.io is not affiliated with official shadcn/ui
Sidebar Nav Tab-Filtered Logos Block for React Aria
A vertical list of four trades at the start and, past a split divider, the open trade's six customer wordmarks in an open grid, for a construction takeoff tool.
Installation
Overview
A sidebar-filtered logo block for React with React Aria. A header, "Takeoffs for every trade on 1,900 sites" and one sentence, sits over a split under the page's top rule. At the start, a vertical tab list of four trades: General contractors, Civil and roads, Residential and Specialty trades, each with an icon, the open one tinted. At the end, past a split divider with + marks where it meets the rule, the open trade's heading, a sentence and six customer wordmarks in an open three by two grid, with no cell lines: the divider is the only line. On a phone the list lies on its side as a row you scroll, above the logos, and a rule takes the divider's place. An unseen copy of every panel holds the height, so switching never moves the page, and the split ends the block. Built from Tabs and Guides, with CSS for the entrance and the hover and your theme's tokens for every colour. For products with a handful of customer groups that deserve a persistent navigation.
FAQ
How do I add or rename trades?
Edit TRADES and CUSTOMERS at the top of the file. A trade has an id, an icon, a label, a line and its customers, taken from the CUSTOMERS whose group is the trade's id; a customer has a name, an icon and a style (an index into STYLES). Keep six customers per trade, so the grid is full. A fifth or sixth trade fits the sidebar; more than that wants a search.
How does it work with a keyboard and a screen reader?
The trades are a real tab list named "Trade", set vertical: the Up and Down arrow keys move between them, Home and End jump to the first and last, and Tab moves on into the open panel. On a phone the list lies on its side, and the same Up and Down keys still move along it. Each panel has an h3 for its trade and a list of customers.
Why doesn't the page move when I switch trades?
Every trade's panel is also rendered once more, unseen, stacked in the same grid cell as the real panel, hidden from assistive technology and the keyboard (aria-hidden and inert). The cell is as tall as the tallest of them, so switching only swaps what shows and nothing below it moves.
How does the sidebar become a row on a phone?
It's the same tab list: below lg the root stacks its children, the list switches to a row inside a sideways scroller, and each tab is as wide as its label. The list keeps its vertical orientation, so the keys stay Up and Down. A rule between the row and the logos takes the split divider's place.
Why are there no lines around the logos?
The split divider is the block's only interior line, so the open grid reads as one calm group and the logos are never boxed. The wordmarks keep their muted colour, which turns to the text colour on hover. The block ends on the split with no bottom rule: the next section's top rule closes it.