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> <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' },
},
};