# Breadcrumb (/docs/breadcrumb) `Breadcrumb` renders a trail of links showing the current page's place in a hierarchy — home → … → current page. It's a pure Server Component — no state, no `"use client"`. ```tsx import { Breadcrumb } from "@42-central/ui-react/breadcrumb"; ; ``` ## Basic [#basic] The `data` form is the quickest way to use it — pass an array of crumbs. The last entry defaults to the current, non-interactive crumb unless another entry explicitly sets `current`; separators between crumbs are generated automatically, never placed by hand. The last crumb renders muted and non-interactive (`aria-current="page"`) — it isn't a link, so it's deliberately de-emphasized rather than made the visually strongest item. That's the inverse of some breadcrumb conventions; it's what this component's source design calls for. ## Compound form [#compound-form] Drop to `Breadcrumb.Root` + `Breadcrumb.Home`/`Breadcrumb.Item` for full control over composition — same rendering as the `data` form, hand-written instead of generated. Repo File ## Truncation [#truncation] The trail always fits its container, and it takes no JavaScript to do it: when space runs out, link crumbs ellipsize first — all the way down to a bare "…" — and the current crumb only starts shrinking once they can't give up any more. The home icon and separators never shrink. Hover or keyboard-focus a crumb to open it back up to its full label. Drag the corner of the box below to try it.

The full label stays in the DOM, so screen readers always announce it. Inside a flex row (a header next to other controls), the breadcrumb's `