Breadcrumb may contain one or more links which represents parts of path. The last link is always formatted as the current page.
<Breadcrumb>
<Breadcrumb.Link label="Root page" />
<Breadcrumb.Link
label="Subpage"
onClick={() => alert('Redirected')}
/>
<Breadcrumb.Link label="Current page" />
</Breadcrumb>
Wrapping
When the Breadcrumb's length exceeds the screen width, the individual links will wrap the screen.
<Breadcrumb>
<Breadcrumb.Link label="Marketing Pro" onClick={() => alert('Redirected')} />
<Breadcrumb.Link label="Analytics" onClick={() => alert('Redirected')}/>
<Breadcrumb.Link label="Category: Referral – Customers" onClick={() => alert('Redirected')} />
<Breadcrumb.Link label="Campaign: West Side Promotion" onClick={() => alert('Redirected')} />
</Breadcrumb>
- To navigate to a previous page in a flow or section of the app, use a Back Link.
Importing
import { Breadcrumb } from '@servicetitan/design-system';
