Skip to main content

Breadcrumb

Breadcrumbs are a navigational component that shows the user's location in a website or application. They are typically used to show the user's location in a hierarchy of pages or sections.

Result
Loading...
Live Editor
<Breadcrumb>
	<Breadcrumb.Item>Home</Breadcrumb.Item>
	<Breadcrumb.Item>Second</Breadcrumb.Item>
	<Breadcrumb.Item>Third</Breadcrumb.Item>
	<Breadcrumb.Item active>Active</Breadcrumb.Item>
</Breadcrumb>

Using icons​

Icons, such as the home icon, can be used in the breadcrumb component. These will be styled larger than the breadcrumb text.

Result
Loading...
Live Editor
<div data-testid="pw-breadcrumb-using-icons">
	<Breadcrumb>
		<Breadcrumb.Item linkProps={{ 'aria-label': 'Home' }}>
			<span className="icon-home-03" />
		</Breadcrumb.Item>
		<Breadcrumb.Item>Second</Breadcrumb.Item>
		<Breadcrumb.Item>Third</Breadcrumb.Item>
		<Breadcrumb.Item active>Active</Breadcrumb.Item>
	</Breadcrumb>
</div>

Analytics​

The Breadcrumb component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'BreadcrumbItem',
	actions: {
		onClick: { type: 'BREADCRUMBITEM_CLICK', payload: 'Click' },
	},
};

Props​