shadcn.io is not affiliated with official shadcn/ui
Accordion Footer Block for Radix UI
A footer where an accordion holds the links at every width: a brand half with the copyright, and four groups as rows between hairlines in the other half, one open at a time.
Installation
Overview
A footer for React with Radix UI where the accordion is the footer at every width, not only on a phone. At the start, the wordmark and one sentence, with the copyright pinned to the foot. Behind a split divider, a nav labelled Footer holds four groups (Product, Resources, Company, Legal) as rows, each with its title and a count of its links, ruled from the divider to the rail with a + at both ends. One row is open at a time, the first on load. The divider runs from the page's top rule to the end of the page, like the rails. On a phone the halves stack and the rows run from rail to rail. It's built from Accordion, Guides and your theme's tokens.
FAQ
How do I change the groups and links?
Edit GROUPS at the top of the file: each group is an id, a title and its links (an href and a label); the count beside the title is the number of links, so it never needs editing. defaultValue on the Accordion names the group that is open on load. Every link is an anchor with href="#": point each at its page or use your router's link.
Why one group at a time?
It keeps the footer short: whichever group you open pushes the others down by one row, never by five. To let several stay open:
set type="multiple" and an array defaultValue.
Are the closed groups' links in the page's markup?
No. This Accordion renders a group's links only when its row opens. If search engines must follow every footer link, use a list that always shows them (see Mega Footer on desktop widths).
How does it work with a keyboard and a screen reader?
Each row is a button inside its own heading, in a nav labelled Footer under the footer landmark. Tab moves from row to row and into the open group's links, Enter or Space opens and closes a row, and the button says whether it is expanded.
The Up and Down arrows also move between rows, and Home and End jump to the first and last.