Breadcrumbs

Examples

Basic Usage

Negative Cases

The component supports a negative mode, suitable for areas with dark background.

Viewports

When the viewport shrinks, the breadcrumb splits into two lines. The maximum number of items displayed in the breadcrumb depends on the viewport size. To access the remaining items, a "Show Path" button appears, allowing users to navigate back to the desired levels. If the viewport is too small, the single path should automatically wrap onto multiple lines.

Back Button

The Icon component allows you to choose between seven optical weights for each icon.

Multiline

If the viewport is too small, the single path should automatically wrap onto multiple lines.

Custom Slot Start

The user can add a custom back button instead of using the default one

Custom Link

The user can provide a custom link instead of using the default one

Customization

On colorful surfaces, breadcrumb text should use the neutral-primary color to ensure sufficient contrast.