Breadcrumbs

Usage

• Use Breadcrumbs to show the user's current location within the page hierarchy.
• Add breadcrumbs to pages that are two or more levels deep.
• Place breadcrumbs on the left side of the top nav bar on nested pages, consistently across the app.
• Represent the actual page hierarchy — never the user's session history or the path they clicked through.

Behaviors

• Render the last item as the active/current page: plain text, not a link. Set shouldRenderLastElementAsLink to render it as a link instead.
• Disable an item (isDisabled on the breadcrumb object) to make it non-interactive. Disabled items render in a lighter grey whether active or not.
• Collapse (maxItems, default 4) middle items into an ellipsis dropdown when the items exceed the container width or the maxItems threshold. The first and last items always stay visible; the ellipsis opens the collapsed middle items in a dropdown.
• Truncate long item text (isTruncated on the breadcrumb object) — for dynamic values such as model names. Truncation caps width at space-3200.
• Separators, hover color, and the focus outline are built in — no props control them.

Content

• Use the full page title as the item text so location is unambiguous.
• Use sentence case, not title case.

Implementation Notes

• Pass the hierarchy as an array of objects to breadcrumbs. Each object accepts text (required), href, isDisabled, isTruncated, onClick, itemClassName, linkClassName, and contentClassName.
• Give an item href to render it as an <a>. Give it onClick with no href to render it as a <button>. An item with neither renders as plain text.
• maxItems counts the ellipsis as one item. The minimum visible count is 3 (first item, ellipsis, last item), so values below 3 are floored.
• Truncation is opt-in per item via isTruncated — it is not applied automatically, despite the design doc's wording.
• The root renders a <nav aria-label="Breadcrumbs"> wrapping a <ul>. Override the element with as.
• Extends Box — sprinkle props (spacing, layout) are supported on the root.
• BreadcrumbsItem and BreadcrumbsEllipsisItem (Ember: PlumaBreadcrumbsItem, PlumaBreadcrumbsEllipsisItem) are exported, but Breadcrumbs composes them from the breadcrumbs array. Use the subcomponents directly only when building a custom list.
• Ember invocation: <PlumaBreadcrumbs @breadcrumbs={{this.items}} @maxItems={{5}} />. All props take the @ prefix; the arg names and defaults match React.