Inspire Design System : Breadcrumb

The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.

Design Kit: RELEASED

Bobwai component: bobwai-breadcrumb IN DEVELOPMENT

Place breadcrumbs at the top left corner of the screen, above the page title.
Use for large websites and complex products that have hierarchically arranged pages.
Each breadcrumb should start with a link to the root page and include the current page.
All page links in the breadcrumb component should be interactive and link to their respective pages.

Page link - Directs users to the parent-level page. It works as a link.

Separator - Clearly distinguishes each page.

Current page name - It tells users where they are in the path.

Key	Interaction
<Tab> and <Shift> + <Tab>	Tab keys allow moving focus between links.
<Enter>	Trigger a breadcrumb link

Breadcrumb item names use title case - see also Content.

For more specification for a link see Link item.

Used In	Type	PX	Token
Separator	spacing	4	spacing-200

The breadcrumb should remain in the same relative order and location on each web page.
The link text should be clear, reflect the breadcrumb location accurately and easy to understand for all users.
The link to the current page element in the breadcrumb has the aria-current="page" attribute.

The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.