Footer
Site footer with brand on the left and grouped link columns on the
right, plus a copyright line below a divider. Pass an optional
address slot for org contact info — rendered inside <address> for
local-SEO friendliness.
Each link column renders as a proper <ul role="list"> so search
engines pick up the footer-nav hierarchy correctly.
Default#
Loading…
Column (FooterColumn)#
Each entry in columns.
heading: ReactNode(required) — small uppercase mono heading rendered above the link list.links: ReadonlyArray<FooterLink>(required) — the column's links.
Link (FooterLink)#
Each entry in a column's links.
label: ReactNode(required) — visible link text.href: string(required) — destination URL. Renders as<a>.
Address slot#
When provided, address is rendered inside <address> next to the
brand. Use it for org contact info — phone, email, mailing address.
Improves local-SEO extraction and gives screen readers the semantic
"contact info for this page" hint.
tsx
<Footer
brand={<Logo />}
address={<>1 Market St · San Francisco · hi@ship.it</>}
columns={[…]}
/>Top-level props#
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | ReactNode | — | Brand label (logo + word mark). |
| columns * | readonly FooterColumn[] | — | |
| copyright | ReactNode | — | Copyright / legal line. |
| closing | ReactNode | — | Right-side closing line (e.g., `made with care · san francisco`). |
| address | ReactNode | — | Optional contact / address block. Rendered inside `<address>` next to the brand for org contact info (phone, email, mailing address). |
| align | enum | split | Horizontal alignment of the link columns and closing line. `'split'` (default) pushes the columns and closing to the right; `'center'` centers them. Defaults to `'split'` so existing consumers are unchanged. |