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 uniquement — React, depuis @krizaka/ui/site-footer. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. The family's adoption (NAV-SYS): the footer of www.krizaka.com, ui.krizaka.com, java.krizaka.com and every dev.<product> site.
Quand l’utiliser
- 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.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { SiteFooter, SiteFooterColumn, SiteFooterLink } from "@krizaka/ui/site-footer";Exemples
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 | Défaut | Description |
|---|---|---|---|
currentrequis | 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 | Défaut | Description |
|---|---|---|---|
titlerequis | string | — | The column's heading (“Docs”) — passed translated. |
SiteFooter.Link
A link of the footer.
| Prop | Type | Défaut | 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 | Défaut | Description |
|---|---|---|---|
titlerequis | string | — | The column's heading (“Docs”) — passed translated. |
SiteFooterLink
A link of the footer.
| Prop | Type | Défaut | Description |
|---|---|---|---|
active | boolean | — | The current page: aria-current="page". |
asChild | boolean | — | Renders your router's <Link>. |
Accessibilité
- 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.
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 3.11.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub