Footer section

A ready site footer; link columns or a single row, copyright and social links.

Last updated

Show code
<FooterSection columns={[{ heading, links: [{ label, href }] }, …]} copyright="© 2026 Example" social={[{ label, href, icon }]}>
<span slot="brand">Example</span>
</FooterSection>

Add

npx @ava-ui/apogee add footer-section

API

Prop Type Default Category Description
columns { heading, links: { label, href }[] }[] [] content Link groups; simple flattens them into one row.
copyright string — content Bottom row text.
social { label, href, icon }[] [] content Icons: mail, globe, rss, at-sign, share, message. The icon set has no brand marks; put your own SVG links in the social slot instead.
brand slot content Logo or wordmark.
social slot content Replaces the social list; your own <a aria-label> links with brand SVGs.
top slot content Above the links, with a divider under it: a newsletter signup or a call to action.
navLabel string 'Footer' content Name of the link nav in simple.
layout 'simple' | 'columns' 'columns' layout

Layouts

Show code
<FooterSection layout="simple" columns={…} copyright="…" social={…} />

Top slot

Show code
<FooterSection columns={…} copyright="…">
<div slot="top">…</div>
</FooterSection>

Accessibility

  • Each column is a nav named by its heading; social links carry aria-label and a 40px hit area.