Breadcrumb

An accessible breadcrumb trail that also injects JSON-LD structured data for search engines.

What it does

Breadcrumb renders a <nav aria-label="Breadcrumb"> with an ordered list and chevron separators. The last item has aria-current="page" and is not linked. It also injects a BreadcrumbList JSON-LD script tag automatically, which helps Google display breadcrumb trails in search results.

Props

items — an array of { label: string; href?: string } objects. Required. The last item should have no href — it represents the current page and is rendered as a non-linked span with aria-current="page".

Usage

import Breadcrumb from "@/components/Breadcrumb";

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Blog", href: "/blog" },
    { label: "How to Ship Fast" },
  ]}
/>

Items with an href are rendered as Link elements with a hover color transition. The final item — the current page — omits href and is rendered as a plain <span> with slightly bolder text.

JSON-LD output

The component builds a BreadcrumbList schema automatically from the items array. It uses config.domainName to construct the full item URLs — make sure domainName is set correctly in config.ts so the structured data points to real URLs.

TipPlace the breadcrumb near the top of the page content, above the page title. That's where users and screen readers expect to find it, and it matches the visual hierarchy Google uses when displaying it in search snippets.

TipThe blog post page already uses Breadcrumb. You can reuse it on any deep-nested page — docs, legal pages, category pages — by passing the relevant trail. The JSON-LD is generated automatically, no extra config needed.