Breadcrumbs

Usage

Breadcrumbs display the path users took to reach the current page, allowing easy navigation back to previous sections.

Best practices

Do

Use for showing a hierarchy of pages and enhance navigation

Don't

Don't use breadcrumbs to show progress along the process of completing a task. Use Step indicator instead.

Do

Use breadcrumbs to show hierarchy with multiple parent pages

Don't

Don’t use breadcrumbs if the page has a single parent page. Use Link instead.

Do

Provide the current page in the breadcrumbs, if the title is not present on the page.

Don't

Avoid repetition. Don't include the current page in the breadcrumbs if the page has a title.

Examples

Live Preview

Props

Fetching props...