Breadcrumb may contain one or more links which represents parts of path. The last link is always formatted as the current page.

const clickFunc = () => {
    alert('Redirected');
}
render (
    <Breadcrumb>
            <Breadcrumb.Link label="Root page" />
            <Breadcrumb.Link label="Subpage" onClick={clickFunc} />
            <Breadcrumb.Link label="Current page" />
    </Breadcrumb>
)

Wrapping

When the Breadcrumb's length exceeds the screen width, the individual links will wrap the screen.

const clickFunc = () => {
    alert('Redirected');
}
render (
    <Breadcrumb>
            <Breadcrumb.Link label="Marketing Pro" onClick={clickFunc} />
            <Breadcrumb.Link label="Analytics" onClick={clickFunc} />
            <Breadcrumb.Link label="Category: Referral – Customers" onClick={clickFunc} />
            <Breadcrumb.Link label="Campaign: West Side Promotion" onClick={clickFunc} />
    </Breadcrumb>
)

Related Components

  • 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';