The closing directory of a site: numbered fine print, a breadcrumb, link columns and a legal line.
import { FooterDirectory } from '@brand-studio/ui';
export default function FooterDirectoryDemo() {
return (
<FooterDirectory
notes={['Prices include tax. Kits ship with a strap and a body cap.', 'Service prices apply to cameras made after 2020.']}
breadcrumbs={[{ label: 'Halden', href: '#home' }, { label: 'Cameras', href: '#cameras' }, { label: 'Halden R', href: '#r' }]}
columns={[
{ title: 'Shop', links: [{ label: 'Cameras', href: '#cameras' }, { label: 'Lenses', href: '#lenses' }, { label: 'Film', href: '#film' }] },
{ title: 'Service', links: [{ label: 'Repairs', href: '#repairs' }, { label: 'Parts', href: '#parts' }] },
{ title: 'Company', links: [{ label: 'About', href: '#about' }, { label: 'Contact', href: '#contact' }] },
]}
legal={<p>Halden is a fictional brand.</p>}
/>
);
}Installation
pnpm add @brand-studio/uinpm install @brand-studio/uiyarn add @brand-studio/uibun add @brand-studio/uiInstall the peer dependencies
npm install react react-domImport the stylesheet once
import '@brand-studio/ui/styles.css';Wrap your app in a brand theme
import { BrandTheme, FooterDirectory } from '@brand-studio/ui'; import brand from './brand.json'; <BrandTheme palette={brand.tokens} mode="system"> {/* your app */} </BrandTheme>
Usage
import { FooterDirectory } from '@brand-studio/ui';<FooterDirectory
notes={['Prices include tax.']}
breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Cameras', href: '/cameras' }]}
columns={[{ title: 'Shop', links: [{ label: 'Cameras', href: '/cameras' }] }]}
legal={<p>Copyright 2026 Halden.</p>}
/>Number footnotes in the page copy to match the order of notes.
Accessibility
- The breadcrumb is a
<nav>labelled Breadcrumb, and its last link hasaria-current="page". - The link columns are a
<nav>named bylabel, each list labelled by its column heading.
API Reference
| Prop | Type | Default |
|---|---|---|
breadcrumbs? | { label: string; href: string; }[] | – |
columns | FooterColumn[] | – |
notes? | React.ReactNode[] | – |
legal? | React.ReactNode | – |
label? | string | – |
className? | string | – |