# Footer section

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

URL: https://apogee.avaui.dev/docs/sections/footer-section
Last updated: 2026-10-21

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

Last updated October 21, 2026

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

## Add

```sh
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

```astro
<FooterSection layout="simple" columns={…} copyright="…" social={…} />
```

## Top slot

```astro
<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.