Breadcrumbs

Luke van Zyl·Updated April 6, 2026

Overview

Breadcrumbs show a user's location within a navigational hierarchy and let them jump back to any previous level. Each step except the current page is a clickable link. The current page appears as plain text at the end of the trail, reinforcing context without implying it's navigable.

Sandbox

Specs

Path

Path

Anatomy

1. Trail — The full sequence of links and labels, read left to right.
2. Ancestor links — Clickable labels for each level above the current page.
3. Separator — A visual divider between each step (e.g., /).
4. Current page label — The final item; not a link, matches the page title.

Usage

Breadcrumbs are used sparingly in EMR. The app relies heavily on modals for sub-level workflows, which don't require breadcrumbs. Use them only when the user has navigated to a dedicated page that exists within a real hierarchy.

• Show breadcrumbs only when the user is at least two levels deep. A single parent level doesn't justify showing a trail.
• Use breadcrumbs in multi-location flows where the context of which location or entity is being edited is critical. In these flows, users often drill down through a category before reaching a specific location, and the breadcrumb trail reinforces where they are and how to get back.
• The final breadcrumb may repeat the page title. This is intentional — it anchors the user within the hierarchy even when the last step is already visible as a heading.

Example — Preventive Care Reminders:

A user navigating to location-specific reminder settings would follow: Reminders → Preventive Care → BluePearl Pet Hospital — Chicago, IL. The first two steps are clickable. The location name appears as both the final breadcrumb and the page heading.

When not to use:

• Don't add breadcrumbs to modal workflows. Modals are self-contained; a breadcrumb trail inside one is confusing and unnecessary.
• Don't show breadcrumbs when there is only one level of hierarchy above the current page — the back navigation or page title is sufficient.
• Don't use breadcrumbs as a substitute for primary navigation or tabs.

Best Practices

Do	Don't
Show breadcrumbs only when the user is two or more levels deep	Don't show a breadcrumb trail with only one ancestor link
Make every ancestor link clickable; leave only the current page as plain text	Don't make the current page label a link
Match the current page label exactly to the page title	Don't truncate or abbreviate breadcrumb labels unless space is critically constrained
Use breadcrumbs in multi-location flows where knowing which location is being edited is critical	Don't add breadcrumbs to modal dialogs or flyout panels
Keep the trail shallow — if a hierarchy goes beyond three or four levels, reconsider the information architecture	Don't use breadcrumbs as the only way to navigate back; pair with browser history or a back action when appropriate

Accessibility

• Wrap the breadcrumb trail in a <nav> element with aria-label="Breadcrumb" to identify it as a landmark.
• Use an ordered list (<ol>) internally so screen readers convey the sequential structure.
• The current page item must have aria-current="page" to distinguish it from clickable ancestor links.
• Separator characters should be hidden from assistive technology using aria-hidden="true" — they are visual only.
• Keyboard: each ancestor link is reachable via Tab and activatable with Enter.