Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D

Breadcrumb

HOME first, then the main page this one belongs to, then where you are. Linked crumbs are ink-muted and hover with the drawn underline; the current page is plain ink-soft. Slashes in ink-faint. Never a typed arrow.

HANDLE
breadcrumb
LIVES IN
src/components/PageBadge.jsx (Breadcrumb) · .breadcrumb in src/index.css
USED ON
The eyebrow of every Page Opener
PROPS
trail: crumbs, each a string (where you are) or { label, to } (a link back)
EXAMPLE
LIVE

As it renders.

CODE
COPY AND PASTE

How it is called.

JSX
import { Breadcrumb } from '../components/PageBadge.jsx'

<Breadcrumb trail={[
  { label: 'HOME', to: '/' },
  { label: 'ARCHIVE', to: '/archive' },
  'PRINT',
]} />

{/* inside a Page Opener, pass the same array as trail */}
<PageOpener no="APPENDIX B / 03" trail={[{ label: 'HOME', to: '/' }, { label: 'ARCHIVE', to: '/archive' }, 'PRINT']} title="Paper" />
RULES

What must stay true.

HOME first, then the main page this one belongs to, then where you are. Linked crumbs are ink-muted and hover with the drawn underline; the current page is plain ink-soft. Slashes in ink-faint. Never a typed arrow.