Footer

A footer is where a page stops: who made it, where else a reader can go, and the small print that has to be reachable from everywhere. Its columns are data rather than markup, so the same footer renders on every page of a site from one description, and every destination renders through the framework's link primitive.

It renders nothing it was not given. A page with a copyright line and no navigation gets a one-line footer, not three empty columns.

Usage

import { Footer } from "@asheeui/web";

<Footer
  brand="Ashee SMS"
  description="Campaign messaging for growing teams."
  groups={[
    { title: "Product", links: [{ label: "Campaigns", href: "/campaigns" }] },
    { title: "Company", links: [{ label: "About", href: "/about" }] },
  ]}
  copyright="Ashee Softworks"
/>;

Columns

A group is a title and its links; a link is label, href and its state. icon puts content before the label and isExternal marks a destination that leaves the site, which the link primitive renders with the attributes and the affordance an off-site destination needs. id is optional on both and defaults to the position in the list.

Each group is its own navigation landmark named by its title, so a reader who wants the developer links can jump to that column instead of walking the whole band. The title is also a heading, so the columns appear in the page's outline. A destination can state the component that renders it, per link or for the whole footer through link; the more specific statement wins, as links and substitution describes.

On the platform the same groups stack and wrap rather than becoming a row at a breakpoint, which is what a footer read by scrolling a phone wants. See React Native.

The bottom row

copyright, legal and social share a lower row: the copyright line beside a named row of legal links and a named row of social ones. newsletter is a slot in the brand column, so a signup form sits under the product's name instead of in the small print.

The band's surface is variant: solid is the page background, muted is a subdued band and bordered is the page background with a separator above it, the registered default, because a footer is usually the end of a long page and needs to be told apart from it. spacing is the vertical padding, taken from the shared space scale.

Props

Four options are registered by the component: variant is bordered, spacing is lg, contained is true and containerSize is lg. Each resolves from the instance, then from components.footer, then from the registration, so a product that always ends on a muted band states it once. The footer does not read defaultRadius or defaultVariant: a footer is a band, not a control, so the button vocabulary does not apply to it.

Accessibility

• The element is a <footer> by default, which is the contentinfo landmark when it is the page's last band. as changes the element without changing what the footer holds.
• Each group is a navigation landmark named by its title, and the title is rendered as a heading, so the columns are reachable and findable at once. The legal and social rows are named landmarks too: legalLabel and socialLabel, Legal and Social by default, because a landmark name is page furniture and has to be translatable.
• The copyright line is plain text, so it is read as a statement rather than offered as a control.
• An isExternal destination is given the target and relationship attributes it needs and the affordance that says it leaves the site, so a reader is told where it goes before pressing it.

Every link is drawn by the framework's link primitive, so the page keeps its own element for them: see links and substitution.

Related