Breadcrumb
A record of where you came from, naming the patient in full. Never a route forward.
Overview
A breadcrumb is a second, independent statement of location, and in a clinical record the part that earns its place is the patient segment: a clinician returning to a screen after an interruption re-orients from the top of it. A trail that says a patient is open without saying which has answered the wrong question.
How these four sit together — the anatomy of a screen, how deep a hierarchy may go, and what has to happen on a route change — is on Navigation.
Breadcrumb
- Backward only. A breadcrumb is a record of where you came from, not a route forward. A trail whose later segments are clickable before they have been visited is a wizard wearing a breadcrumb's clothes.
- Never the primary means of navigation. It is a second statement of location for a reader who is re-orienting, and it earns its space at three levels or more. At two, a labelled back control says the same thing in less room.
- Labels match the navigation exactly. A section called ECG review in the panel and Electrocardiography in the trail gives a returning reader two names for one place, and the reconciliation is theirs to do.
- The patient segment is never abbreviated. Where the trail carries a patient it carries the name and the identifier in full, per Patient header, and it agrees with the header rather than paraphrasing it. Two identity statements that disagree are worse than one.
- It stays on one line, and it never truncates the patient to get there. Where a deep trail will not fit, the middle collapses into an overflow control — never the first segment and never the last, because those are the two a reader is actually using.
What the component enforces, and what it only asks for
The trail is data, which makes the split short and the dangerous half obvious.
| Rule | Held by | How |
|---|---|---|
| The current page is marked and is not a link | The component | current renders with aria-current="page" outside the anchor list.Asserted: Breadcrumb: the last item is aria-current and not a link |
| Segments are never truncated | The component | No ellipsis, no max width. A patient identifier shortened to fit is the one segment that had to be complete. Asserted: Breadcrumb: a real landmark holding an ordered list |
| It is a real landmark with an ordered list | The component | The order is the meaning, and the separator is hidden from assistive technology rather than read as a word between every segment. Asserted: Breadcrumb: a real landmark holding an ordered list |
| The patient is named in the trail | You | items is an array you build. A trail of generic labels says a patient is open without saying which, which is the question a returning clinician is actually asking. |
| It only points backwards | You | Nothing stops you passing a segment nobody has visited. A trail whose later steps are clickable is a wizard wearing a breadcrumb's clothes. |
A rule stated on a component page reads as a rule the component keeps. 3 of these 5 are; 2 are obligations this page was quietly handing to the reader. The component keeps the trail readable. Whether it names the patient — the only reason it earns its space here — is yours.
Do's and don'ts
The patient is named in the path. A returning clinician re-orients from the top of the screen.
Generic labels. It says a patient is open without saying which, which is the question actually being asked.
The patient segment in full, and the last label matching the panel exactly. A second independent statement of identity that agrees with the header.
The patient truncated to make room, and a section named one thing here and another in the panel. Two names for one place, and an identity that no longer matches.
Triage worklist / HARLAND, Arthur J. · MRN 44 812 907 / ECG review
Backward only. Every segment before the current one has been visited, and each is a place the clinician can return to.
Register / Consent / Allergies / Medications / Review
A trail whose later segments are visible before they have been reached is a wizard wearing a breadcrumb’s clothes, and the reader now believes two steps are done that are not.
Accessibility
- A
navigationlandmark labelled “Breadcrumb”, containing an ordered list — the order is the meaning. - The current page carries
aria-current="page"and is not a link. - The separator is decorative and hidden from assistive technology; it is not read as a word between every segment.
- No segment is truncated. A patient identifier shortened to fit is the one thing on the trail that had to be complete.
Outcomes of use
- Effectiveness — a returning clinician re-orients without opening anything, and knows which patient is open.
- Efficiency — one glance replaces a scroll to the patient header.
- Satisfaction — orientation after an interruption, which is the specified context of use rather than an aberration from it. Attributes believed to contribute to an outcome; the outcome is settled by observing real use, not by this page — see Usability & context of use.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1). Which of these the component keeps and which are yours is stated in the guarantees table; a control the component does not keep is one your risk file must show you keep.
- The patient segment names the patient in full. (you name the patient; the component never truncates it) Mitigates: acting on the wrong record after an interruption.
- Backward only. (you) Mitigates: a trail read as a wizard, with later steps appearing complete before they have been done.
Implementation
$ npx shadcn@latest add https://md.notjustany.tech/r/breadcrumb.json<Breadcrumb
items={[
{ label: "Triage worklist", href: "/worklist" },
{ label: patient.display, href: patientHref },
{ label: "ECG review" }, // the last item is the current one
]}
/>Related
- Navigation — where the trail sits and what happens on a route change.
- Masthead · Side navigation · View heading
- Patient header — the fuller statement of identity.