SGDS Breadcrumb Component Skill

<sgds-breadcrumb> renders a navigational trail showing the user's location within a page hierarchy. Each step is a <sgds-breadcrumb-item> wrapping a standard <a> tag.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on these components.

Quick Decision Guide

Always pass a single <a> tag inside each <sgds-breadcrumb-item>.

Last item (current page):

• The component automatically sets aria-current="page" and active=true on the last <sgds-breadcrumb-item>. You do not need to set active manually; it is managed by the parent.

Overflow (5+ items):

• When 5 or more items are present, the middle items are automatically collapsed into an overflow menu using <sgds-overflow-menu>. No configuration is needed.