Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Breadcrumb FAQ Block for React Aria

A drill-down help centre for a mobile carrier: four topic cells in a framed card, a breadcrumb bar, and each topic's questions behind a click.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A drill-down FAQ for React with React Aria. Under a compact header, a framed card holds a breadcrumb bar and a body that starts as four topic cells on shared hairlines (an icon, the name and its question count). Choosing a cell swaps the body for that topic's questions in an accordion, the breadcrumb reads "Help centre / Billing", and focus lands on the topic's heading; the first crumb takes you back and returns focus to the cell you came from. The body keeps one height on both levels, so the page doesn't move. It's built from Breadcrumb, Accordion, Guides and your theme's tokens. For help centres whose topics are broad enough to deserve a level of their own.

FAQ

How do I change the topics?

Edit TOPICS at the top of the file: each topic has an id, an icon (any lucide icon), a label and its questions. The cell shows the count from that list. Two to six topics fit the card; four fill a two-by-two grid exactly.

Where does focus go when I drill in and back?

Choosing a cell moves focus to the topic's heading (it takes focus without being a tab stop), so a screen reader announces where you are and the next Tab reaches the first question. Going back through the first crumb puts focus on the cell you opened, so you can open the next one with a key press. Nothing takes focus when the page loads.

How does the breadcrumb work?

It's a navigation landmark named "Help centre" with the current level marked as the current page. The first crumb is a React Aria link without an href, which a press handler uses to return to the cells; React Aria marks the last crumb as the current page.

Are the other topics' answers in the page's markup?

Yes: every topic's questions are rendered, and the levels you aren't looking at are hidden with the hidden attribute. 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.

How does it fit on a phone?

The cells stay two across, with the icon and the arrow above the name, and the breadcrumb wraps if a topic name is long. The card's body keeps its height on both levels, so going back doesn't shift the page. Nothing scrolls sideways at 320 pixels.

How does it work with a keyboard?

Each cell is a button inside a heading, so Tab walks the four topics and Enter or Space opens one. In a topic, each question is a button inside its own heading.

All 100 faq blocks