Site footer
The footer shared by every site of the Krizaka family: the site's mark and line, its own columns, the family in columns (from @krizaka/ui/sites), and the signature line — “A Krizaka company / product / open-source project” — with the version and Montréal.
Web only — React, from @krizaka/ui/site-footer. Beta: its API may still change in a minor version.
Why it is here. The family's adoption (NAV-SYS): the footer of www.krizaka.com, ui.krizaka.com, java.krizaka.com and every dev.<product> site.
When to use
- The bottom of every page of a Krizaka site: www, ui., java., dev.<product>.
- With
MarketingLayout'sfooterslot, under a bar of@krizaka/ui/nav-barwithNavBar.Family.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { SiteFooter, SiteFooterColumn, SiteFooterLink } from "@krizaka/ui/site-footer";Examples
A product
dev.orazaka.com: the product's columns, the family, “A Krizaka product”, DEV · v1.2.3.
The company
www.krizaka.com: “A Krizaka company”, the company's column, the legal links at the end of the signature line.
Open source, in French
ui.krizaka.com in French: « Un projet open source de Krizaka », the version of the packages.
Props
SiteFooter
The footer of a Krizaka site: its own columns, the family in columns, the signature, the version, Montréal.
| Prop | Type | Default | Description |
|---|---|---|---|
currentrequired | SiteId | — | The site this footer belongs to (@krizaka/ui/sites): its mark and line, its signature, marked in the family. |
children | ReactNode | — | The site's own columns (SiteFooter.Column), before the family. |
env | string | — | The environment, when it is not production (DEV). |
labels | FamilyLabels | familyLabels.en | The family's words, passed translated: familyLabels.fr from @krizaka/ui/sites, or your own of the same shape. |
legal | ReactNode | — | The end of the signature line: legal links, a language switch (SiteFooter.Links or any inline content). |
version | string | — | The version the site runs (1.2.3, shown v1.2.3). |
SiteFooter.Column
One of the site's own columns: a heading and its links.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | The column's heading (“Docs”) — passed translated. |
SiteFooter.Link
A link of the footer.
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | — | The current page: aria-current="page". |
asChild | boolean | — | Renders your router's <Link>. |
SiteFooterColumn
One of the site's own columns: a heading and its links.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | The column's heading (“Docs”) — passed translated. |
SiteFooterLink
A link of the footer.
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | — | The current page: aria-current="page". |
asChild | boolean | — | Renders your router's <Link>. |
Accessibility
- A
footerlandmark; the family is anavnamed bylabels.family, each column a list named by its heading. - The current site says
aria-current="true"and “You are here” to screen readers; a status is written, never only a colour. - The marks are decorative: every site's name is written beside its mark.
Best practices
- Set
currentto the site's id: it chooses the mark, the line, the signature (company, product, open source) and marks the site in the family. - Two or three own columns at most (
SiteFooter.Column+SiteFooter.Link), never a link to another site of the family: the family columns hold them. - Pass the version the site runs (
version, andenv="DEV"on a dev environment) and the legal links inlegal. - Pass the words translated:
labels={familyLabels[locale]}from@krizaka/ui/sites.
Related components
Generated from the code of @krizaka/ui 3.11.0: its meta.ts, its examples and its types.Edit this documentation on GitHub