shadcn.io is not affiliated with official shadcn/ui
Mega Footer Block for Ark UI
A mega footer for a cloud platform: a brand band, eight link groups with icons in two ruled bands of four on one desktop screen, an accordion on phones, and a legal band.
Installation
Overview
A mega footer for React with Ark UI, for products with a lot to link to. A lean band holds the wordmark and one sentence. Under it, a nav labelled Footer holds eight groups (Compute, Storage, Networking, Solutions, Developers, Ecosystem, Support, Company) of five links, each heading led by a small icon, in two bands of four ruled across the page with + marks where each rule meets the rails, so the whole footer fits one desktop screen. A legal band closes it. On a phone the eight groups become an accordion, one open at a time with the first open, so the footer stays short; the links are the same at every width. The page's rails and top rule come from the Guides spine. It's built from Accordion, Guides and your theme's tokens, with no animation of its own.
FAQ
How do I change the groups and links?
Edit GROUPS at the top of the file: each group is an id, an icon (any Lucide icon), a title and five links. The first four groups fill the first band and the rest the second; keep a multiple of four so the bands stay full. Every link is an anchor with href="#". From six groups up, keep the accordion on phones: a flat list of that many groups is a long scroll.
Are the links in the page twice?
The markup holds the desktop grid and the phone accordion as two navs, each labelled Footer, and CSS shows one at a time (max-md:hidden and md:hidden). The hidden one is display: none, so it is out of the accessibility tree and the tab order: a screen reader finds one Footer navigation at any width. The cost is the links once more in the HTML.
How does the phone accordion work?
Each group is a heading with a button; one group is open at a time and opening another closes it, and the first starts open. The open group's links sit in two columns.
The Accordion takes lazyMount={false} and unmountOnExit={false}, so every group's links are in the markup from the start, hidden until it opens. Up and Down move between the headings, and Home and End jump to the first and last.
Does it really fit one screen?
On a 1280 by 855 desktop the whole footer, from its top rule to the legal band, is about 700 pixels tall. Five links per group is the budget: each extra link adds about 32 pixels to both bands.
How do screen readers move through it?
The block is a footer element, the page's content-info landmark when placed outside main. On desktop each group is a small h2 over a list; on a phone each is a heading with an expand button. The icons are decorative and hidden from assistive technology, and the policy links are a list named Legal.