CynosureComponents / More
SiteFooter
The bottom of a website: the brand and a tagline, columns of links under headings, and a bottom row for the copyright, legal links and social links. It stacks on narrow screens.
When to useLink to "When to use"
- The end of every page of a marketing or documentation site, after
main.
Use something else when:
- you need the bottom of a dialog or a card: their own
actions - the page is an app inside AppShell, which usually has no footer
UsageLink to "Usage"
tsx
import { IconButton, Link, SiteFooter } from "@arshad-shah/cynosure";
import { mail } from "@arshad-shah/cynosure/icons";
<SiteFooter
brand="Acme"
tagline="Tools for small teams."
columns={[{ title: "Product", links: [{ label: "Pricing", href: "/pricing" }] }]}
legal={<>Copyright 2026 Acme. <Link href="/privacy">Privacy</Link></>}
social={<IconButton icon={mail} label="Email" href="mailto:hello@acme.dev" variant="ghost" tone="neutral" />}
/>Narrow screensLink to "Narrow screens"
Columns wrap onto more rows, and the legal text and social links stack.
PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
brand | The logo or the site's name, at the top of the inline start. | ReactNode | |
tagline | A sentence under the brand about the site or the company. | ReactNode | |
columns | Link columns, as data: a heading and its links. They sit side by side and wrap onto more rows when narrow. | SiteFooterColumn[] | |
headingLevel | Heading level of the column titles, to fit the page outline. Default 2. | 2 | 3 | 4 | 2 |
legal | The bottom row's start: copyright and legal links. | ReactNode | |
social | The bottom row's end: links to the site's social accounts, usually IconButtons with href. | ReactNode | |
size | Widest the content gets: the size of its Container, to line up with the page. Default "lg". | "sm" | "md" | "lg" | "full" | "xl" | "lg" |
labels | Replace the built-in English text: nav, the name of the links' navigation landmark. | Partial<SiteFooterLabels> | |
id | Set on the footer element. | string | |
aria-label | Names the footer, when a page has more than one. | string | |
className | Added to the footer element, for layout. | string | |
style | Layout only. Restyle through --cy-site-footer-* tokens. | CSSProperties |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
Behaviour and accessibilityLink to "Behaviour and accessibility"
| Input | Result |
|---|---|
| Tab | Every column link in order, then the legal links and the social links |
- Landmarks: the
footeris the contentinfo landmark at the top level of the page. All columns sit in onenavnamed "Footer" (labels.nav). - Headings: each column title is a Heading at
headingLevel(default 2) and names the column's list. - Links: neutral Links;
externaladds a new-tab icon and "(opens in new tab)" for screen readers. - Naming:
aria-labelandidare set on thefooter, for a page with more than one.
TouchLink to "Touch"
Each link row is at least 24px tall, and 44px on coarse pointers, with a hit area of the same size, so neighbouring links never share a finger's target. Social IconButtons keep their own 44px hit areas.
ThemingLink to "Theming"
| Token | What it sets | Default |
|---|---|---|
--cy-site-footer-background | Background | --cy-color-surface |
--cy-site-footer-border | Hairline above the footer and above its bottom row | --cy-color-line |
--cy-site-footer-padding-block | Space above and below the content and between its rows | --cy-space-10 |
--cy-site-footer-column-min-width | Least width of a column before the columns wrap | 10rem |
ts
createTheme({ components: { siteFooter: { background: "transparent", columnMinWidth: "12rem" } } });RelatedLink to "Related"
SiteHeader · Section · Container · Link · IconButton
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.