Breadcrumb
Responsive breadcrumb trails with icon-only home controls, collapsed states, background surfaces, and edge cases for single or long paths.
Available components
Standard breadcrumb
A regular breadcrumb trail with the built-in home control, two ancestor links, and a current page label.
Products
Grid services
Project overview
Standard breadcrumb
The same trail in dark mode to verify the shell, text contrast, and icon treatment.
Products
Grid services
Project overview
Background breadcrumb
Background mode adds the rounded surface behind the trail for denser layouts.
Operations
Dispatch center
Incident summary
Background breadcrumb
The background variant in dark mode keeps the breadcrumb readable on a tinted surface.
Operations
Dispatch center
Incident summary
Collapsed breadcrumb
Four crumbs force the breadcrumb into its collapsed desktop layout with a plus trigger.
Portfolio
Hydrogen
Storage
Quarterly report
Collapsed breadcrumb
The collapsed state in dark mode checks the trigger, links, and current crumb together.
Portfolio
Hydrogen
Storage
Quarterly report
Edge cases
Single item breadcrumb
Single-item trails stay stable and present the lone page as a linked breadcrumb item with the mobile divider.
Overview
Transformation update
Single item breadcrumb
The one-item edge case should still read cleanly in dark mode as a linked crumb.
Overview
Transformation update
Long label breadcrumb
Long labels check that the trail stays legible when text stretches the row.
Engineering and delivery roadmap
Quarterly transformation update for distributed energy assets
Long label breadcrumb
The same long-label stress test in dark mode keeps the layout and typography honest.
Engineering and delivery roadmap
Quarterly transformation update for distributed energy assets