Footer — Accordion sitemap
Layout tags: stacked,list,compact
Footer — Brand and link columns
An identity block and four link groups lead into a copyright and legal row. Use it for a broad site directory.
1440 × 900
Open in new tabexport default function FooterLinkColumns() {
return (
<footer className="border-t border-neutral-200 bg-white text-neutral-900">
<div className="mx-auto max-w-6xl px-6 pt-16 sm:pt-24">
<div className="grid gap-12 lg:grid-cols-12">
<div className="lg:col-span-4">
<a
href="#"
aria-label="Logo home"
className="inline-flex items-center gap-2 font-semibold text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-6"
>
<rect x="4" y="4" width="16" height="16" rx="3" />
<path d="M4 12h16M12 4v16" />
</svg>
Logo
</a>
<p className="mt-4 max-w-xs text-sm text-neutral-600">
One sentence that describes the purpose of this site and who it serves.
</p>
<nav aria-label="Social profiles" className="flex flex-wrap items-center gap-5 mt-6">
<a
href="#"
aria-label="Community profile"
className="text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-5"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M16 4a4 4 0 0 1 0 8M22 21v-2a4 4 0 0 0-3-3.9" />
<circle cx="9" cy="7" r="4" />
</svg>
</a>
<a
href="#"
aria-label="Updates feed"
className="text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-5"
>
<path d="M4 4a16 16 0 0 1 16 16M4 10a10 10 0 0 1 10 10" />
<circle cx="4" cy="20" r="1" />
</svg>
</a>
<a
href="#"
aria-label="Video channel"
className="text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-5"
>
<path d="M3 5h18v14H3zM10 9l5 3-5 3z" />
</svg>
</a>
<a
href="#"
aria-label="Source repository"
className="text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="size-5"
>
<path d="m8 8-4 4 4 4m8-8 4 4-4 4m-3-11-2 14" />
</svg>
</a>
</nav>
</div>
<div className="grid grid-cols-2 gap-x-6 gap-y-10 md:grid-cols-4 lg:col-span-8">
<nav aria-labelledby="footer-link-columns-product">
<h2 id="footer-link-columns-product" className="text-sm font-semibold">
Product
</h2>
<ul role="list" className="mt-4 grid gap-3">
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Overview
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Features
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Pricing
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Integrations
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Releases
</a>
</li>
</ul>
</nav>
<nav aria-labelledby="footer-link-columns-resources">
<h2 id="footer-link-columns-resources" className="text-sm font-semibold">
Resources
</h2>
<ul role="list" className="mt-4 grid gap-3">
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Guides
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Documentation
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Updates
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Community
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Examples
</a>
</li>
</ul>
</nav>
<nav aria-labelledby="footer-link-columns-company">
<h2 id="footer-link-columns-company" className="text-sm font-semibold">
Company
</h2>
<ul role="list" className="mt-4 grid gap-3">
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
About
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Careers
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Press
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Partners
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Contact
</a>
</li>
</ul>
</nav>
<nav aria-labelledby="footer-link-columns-support">
<h2 id="footer-link-columns-support" className="text-sm font-semibold">
Support
</h2>
<ul role="list" className="mt-4 grid gap-3">
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Help center
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Contact support
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Status
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Accessibility
</a>
</li>
<li>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Feedback
</a>
</li>
</ul>
</nav>
</div>
</div>
<div className="flex flex-col gap-4 border-t border-neutral-200 py-6 md:flex-row md:items-center md:justify-between mt-12">
<p className="text-sm text-neutral-500">© 2026 Site name</p>
<nav aria-label="Legal navigation" className="flex flex-wrap gap-x-6 gap-y-3">
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Privacy
</a>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Terms
</a>
<a
href="#"
className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Cookies
</a>
</nav>
</div>
</div>
</footer>
)
}Pattern notes
- When to use
- Use for four clear destination groups. Choose footer-centered-links for a shorter directory. Variations: use account links in one group, reduce social links, or replace the statement with a short mission.
- Hierarchy
- Logo and a 14px statement lead, then four labelled groups with five links each and 14px copyright. Limit statement to 22 words and group labels and links to 1–2 words. Social links have accessible names.
- Responsive
- Below 1024px identity stacks above the link grid with a 48px gap. Groups use two columns below 768px and four above. Copyright and legal links stack below 768px and are justified above. Legal and social rows wrap as needed.
- Layout
- A white footer has a neutral-200 top border and a 1152px max-w-6xl container with 24px side padding, 64px top padding and 96px from 640px. At 1024px a 12-column grid with 48px gaps assigns 4 columns to identity and 8 to four navigation groups. Blurb max-width is 320px. Groups use 14px headings, 16px heading-to-list spacing and 12px link gaps. Four social glyphs are 20px. A legal row follows a 48px margin and hairline with 24px vertical padding.
- States
- Text links hover from neutral-900 to neutral-600. Social glyphs hover to neutral-600. Navigation is static. Every enabled control has a 2px neutral-900 focus outline offset 2px. There are no disabled controls.
┌──────────────────────────────────────────────────────────────┐
│ Logo Product Resources Company Support │
│ One-sentence Overview Guides About Help │
│ identity statement Features Docs Careers Contact │
│ [Social icon links] Pricing Updates Press Status │
│ More links in each group │
├──────────────────────────────────────────────────────────────┤
│ Copyright Privacy Terms Cookies │
└──────────────────────────────────────────────────────────────┘More in Footer
View all Footer patternsFooter — Address beside a map
Layout tags: asymmetric,·media,·spacious
Footer — Centred links
Layout tags: centered,·row,·compact