All components (204)

Page footer

Structure · SiteFooter · .amset-footer

What it is and when to use it

The footer of a page: brand and description, link columns, social links and the legal strip with its controls. It is a real <footer>, not a div that looks like one.

When to use it

At the bottom of a public site or an application: inside AppShell (footer={<SiteFooter … />}) or at the end of the <body> in a custom layout.

When not to

For the footer of a card, a dialog or a table: those have their own (footer of Card, Dialog).
Inside a <main>, an <article> or a <section>: there a <footer> stops being the footer of the page.

Accessibility: hanging directly from the document, the browser exposes it as contentinfo, the landmark a screen reader jumps to with one key. Each column is a <nav> whose name is its title, to tell it apart from the main navigation; the legal strip is another navigation ("Legal information"). The titles are h2 by default and are adjusted with headingLevel so no level is skipped. An external link (https://… or external) opens in a new tab with rel="noopener noreferrer", carries an icon and the notice "opens in a new tab" for the screen reader. The social links are icon only, and their name is the text of label.

Keyboard: it has no keyboard of its own; they are links and Tab goes through them in reading order. With onNavigate the normal click on an internal link is handled by the project router; Ctrl, Cmd, Shift or the middle button open it apart.

Fine-tuning: CSS variables --amset-footer-*: -bg, -gap, -padding and -column-width (minimum width of a column).

What it looks like

<SiteFooter
  brand="Aurelia Jewelry"
  description="Handmade pieces from Valencia since 1987."
  sections={[
    { key: 'store', title: 'Store', links: [{ key: 'anillos', label: 'Rings', href: '/anillos' }] },
  ]}
  legal="© 2026 Joyería Aurelia"
  legalLinks={[{ key: 'privacidad', label: 'Privacy', href: '/privacidad' }]}
/>

Props

Import it with import { SiteFooter } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`actions`	`ReactNode`	Controls of the bottom strip: language selector, theme selector...
`brand`	`ReactNode`	The logo or the brand name, at the top left.
`className`	`string`	Merged with the library classes; it does not replace them.
`description`	`ReactNode`	One or two sentences under the brand.
`headingLevel`	`3 \| 4 \| 2`	Level of the column titles (`h2` by default). It has to follow the page `h1` without skipping levels.
`legal`	`ReactNode`	Legal line: "© 2026 Joyería Aurelia".
`legalLinks`	`readonly FooterLink[]`	Links of the legal strip: legal notice, privacy, cookies.
`onNavigate`	`(href: string) => void`	The project router navigates, not the browser, just like in `Link`.
`sections`	`readonly FooterSection[]`	Link columns: each one is a `<nav>` with its title.
`social`	`readonly FooterSocialLink[]`	Social networks, icon only.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-footer-bg`	`var(--amset-surface)`
`--amset-footer-gap`	`var(--amset-space-8)`
`--amset-footer-column-width`	`10rem`
`--amset-footer-padding`	`var(--amset-space-8) var(--amset-space-6)`

How to change it

.amset-footer {
  --amset-footer-bg: ...;
  --amset-footer-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: