Breadcrumbs

Overview

Breadcrumbs communicate the user's current location within a site or application hierarchy. Breadcrumb Group is a fully composable system built from separator, label prefix, item, and group components, each a nested instance, so every label, overflow marker, and separator is customizable directly from the parent without detaching.

When should you use them?

Use breadcrumbs when users navigate a clear, hierarchical structure more than one level deep, like nested categories, folders, or settings pages. They show where the user is and let them jump back to any parent level. Skip them for flat structures or single-level navigation.

How should you use them?

• Use breadcrumbs for hierarchical navigation more than one level deep; skip them for flat structures.
• Show the full path, marking the last item as the current page and making it non-clickable.
• Use the overflow marker to collapse middle items when the trail is long.
• Keep labels short and matching the page titles they link to.
• Match the group variant (Ghost, Outline, Soft) to the surrounding navigation surface.
• Keep breadcrumbs keyboard-navigable and mark the current page for screen readers.