Breadcrumb

Navigation trail used on every page except Home. Auto-emits a BreadcrumbList schema — no extra configuration needed. Accepts a single prop: crumbs, an array of { label, href? } objects. The last item is the current page and has no href. Horizontally scrollable on mobile if the trail overflows. Accepts variant to match the section it sits inside.

crumbs — Array<{ label: string; href?: string }> — required
variant — "light" | "dark" | "brand" — default "light"

1 — 2-level trail · variant="light" · Home › Current page

2 — 3-level trail · variant="light" · Home › Section › Current page

3 — 4-level trail · variant="light" · deepest depth on the site (portfolio project pages)

4 — 2-level trail · variant="dark"

5 — 3-level trail · variant="dark"

6 — 2-level trail · variant="brand"

7 — 3-level trail · variant="brand"

Typical page placement

Place <Breadcrumb> directly after the <Header> and before the <PageHero>. On dark-hero pages, use variant="dark" to match the hero section's background. On pages where the hero is light or absent, use the default variant="light".

<Header ... />
<Breadcrumb
  crumbs={[
    { label: 'Home',              href: '/' },
    { label: 'Custom Home Builds', href: '/custom-home-builds/' },
    { label: 'Burlington' },
  ]}
  variant="dark"
/>
<PageHero variant="dark" ... />