# Footer

> A site footer shell for link columns and a bottom copyright row.

URL: https://apogee.avaui.dev/docs/footer
Last updated: 2026-10-16

A site footer shell for link columns and a bottom copyright row.

Last updated October 16, 2026

```astro
<Footer>
<Grid cols={3} gap={6}>
  <div>
    <p class="text-sm font-medium text-neutral">Product</p>
    <ul class="mt-3 flex flex-col gap-2 text-sm text-neutral-faded">
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
    </ul>
  </div>
  <div>
    <p class="text-sm font-medium text-neutral">Company</p>
    <ul class="mt-3 flex flex-col gap-2 text-sm text-neutral-faded">
      <li><a href="#">About</a></li>
      <li><a href="#">Careers</a></li>
    </ul>
  </div>
  <div>
    <p class="text-sm font-medium text-neutral">Legal</p>
    <ul class="mt-3 flex flex-col gap-2 text-sm text-neutral-faded">
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
    </ul>
  </div>
</Grid>
<p slot="bottom">© 2026 Larkspur, Inc.</p>
</Footer>
```

## Add

```sh
npx @ava-ui/apogee add footer
```

No Apogee dependencies. Pairs well with `Grid` for the column layout.

## Usage

```astro
---
import Footer from '@/components/apogee/Footer/Footer.astro'
---
<Footer>
  <nav>…link columns…</nav>
  <p slot="bottom">© 2026 Larkspur, Inc.</p>
</Footer>
```

## Anatomy

-   **Default slot** — the main content, typically a `Grid` of link-list columns.
-   **`bottom`** slot (optional) — a row below a top divider, laid out as a column on mobile and a row (space-between) from `sm:` up. Renders only when passed.

## API

`@composable` — exposed to Content Editors in AVA. Any other attribute passes through to the root `<footer>`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | — | Extra classes on the root, merged last. |

## States

Static: no interactive states. Links inside keep their own hover and focus states.

## Examples

Without a bottom row:

```astro
<Footer>
<p class="text-sm text-neutral-faded">A single-column footer, no bottom row.</p>
</Footer>
```

Bottom row with multiple items (space-between on wider screens):

```astro
<Footer>
  <Grid cols={2}>…</Grid>
  <p slot="bottom">© 2026 Larkspur, Inc.</p>
  <div slot="bottom" class="flex gap-4">
    <a href="#">Privacy</a>
    <a href="#">Terms</a>
  </div>
</Footer>
```

## Accessibility

Native semantics — renders a real `<footer>` landmark, no extra ARIA needed. Links inside it keep their own keyboard behaviour.

## Tokens

| Token | Used for |
| --- | --- |
| `--border-neutral` | Top border of the footer and of the `bottom` row |
| `--foreground-neutral-faded` | `bottom` row text colour |

## Do / Don’t

-   **Do** use `Grid` (or another layout primitive) inside the default slot for multi-column links.
-   **Do** keep the `bottom` row to copyright + a short legal link list.
-   **Don’t** put primary navigation or a CTA that belongs in the header here.
-   **Don’t** nest another `Footer` inside it.

## Content

-   Column headings are short nouns (“Product”, “Company”), sentence case, no ending punctuation.
-   Bottom copyright line: `© {year} {name}`, no trailing period.

## Related

[

NavbarA responsive site header that collapses its links into a mobile panel below the md breakpoint.

](https://apogee.avaui.dev/docs/navbar)[

SidebarA vertical navigation aside, sticky and full-height on desktop, collapsible behind a toggle on mobile.

](https://apogee.avaui.dev/docs/sidebar)[

SectionA full-width band with vertical rhythm and an optional Container, used to lay out page content.

](https://apogee.avaui.dev/docs/section)