shadcn.io is not affiliated with official shadcn/ui
Collapsible Sidebar FAQ Block for React Aria
A sidebar FAQ for a holiday-rental site: a topic rail with two collapsible groups and a live count, beside a filtered list, and a native select on phones.
Installation
Overview
A sidebar FAQ for React with React Aria. Under a compact header, a topic rail at the start lists "All questions" and two collapsible groups (Booking and Staying, with two topics each, every one with its count), and ends with a polite count of what the list shows; the end holds the questions behind a split divider, filtered by the topic you choose, each row opening with a small chevron at its start. Below lg the rail becomes a native select with the same groups and the same state. The list keeps the rail's height, so a short topic doesn't pull the page up. It's built from Collapsible, Accordion, NativeSelect, Guides and your theme's tokens. For FAQs with a dozen questions in two layers of topics.
FAQ
How do I change the groups and topics?
Edit GROUPS (each group has an id, a label and its topics) and QUESTIONS (each question names its topic) at the top of the file. Counts are worked out from the questions, and the rail, the phone select and the line above the list all read the same data. A group starts open; give defaultOpen to the ones that should and leave it off the rest.
On React Aria the prop is defaultExpanded.
How does the rail work with a keyboard and a screen reader?
The rail is a navigation landmark named "Topics". Each group header is a button that says whether it's expanded, each topic is a button, and the one that's chosen is marked with aria-current. Choosing a topic never moves focus, and the count at the foot is a polite live region ("Showing 3 of 12 questions").
What replaces the rail on a phone?
A native select labelled "Topic", with the two groups as option groups and the question counts in brackets. Because it is the browser's own control, a phone opens its picker. It shares the rail's state, so resizing the window between the two keeps your choice.
Are the other topics' questions in the page's markup?
No: the list renders only the topic that's chosen. The first view, "All questions", holds every answer. Closed answers:
React Aria keeps every closed answer in the markup as hidden="until-found", and the browser's find in page opens the one that holds a match.
Does the page jump when I pick a short topic?
The list keeps a minimum height equal to the rail's, so choosing a topic of three questions doesn't pull the page up under you on a large screen. Opening answers still makes a list taller, as any accordion does.
What moves, and what happens with reduced motion?
The header fades up once on load and a group slides open or shut; a chevron points down while its group or answer is open and toward the end while it's closed (it mirrors in a right-to-left layout). With reduced motion the entrance is off and the groups open at once.