Breadcrumb - Launchpad

Default

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Separator: Arrow

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--arrow">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Separator: Chevron

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--chevron">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Separator: Dot

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--dot">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Separator: Dash

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--dash">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Size: Small

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--sm">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Size: Default

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Size: Large

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--lg">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Contained

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--contained">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Components</li>
    </ol>
</nav>

Contained + Arrow + Large

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--contained lp-breadcrumb--arrow lp-breadcrumb--lg">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Dashboard</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Settings</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Profile</li>
    </ol>
</nav>

With Icons

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--arrow">
        <li class="lp-breadcrumb-item">
            <span class="lp-breadcrumb-icon material-symbols-outlined">home</span>
            <a href="#">Home</a>
        </li>
        <li class="lp-breadcrumb-item">
            <span class="lp-breadcrumb-icon material-symbols-outlined">settings</span>
            <a href="#">Settings</a>
        </li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">
            <span class="lp-breadcrumb-icon material-symbols-outlined">person</span>
            Profile
        </li>
    </ol>
</nav>

With Icons (Contained + Small)

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--contained lp-breadcrumb--chevron lp-breadcrumb--sm">
        <li class="lp-breadcrumb-item">
            <span class="lp-breadcrumb-icon material-symbols-outlined">home</span>
            <a href="#">Home</a>
        </li>
        <li class="lp-breadcrumb-item">
            <span class="lp-breadcrumb-icon material-symbols-outlined">folder</span>
            <a href="#">Documents</a>
        </li>
        <li class="lp-breadcrumb-item">
            <span class="lp-breadcrumb-icon material-symbols-outlined">folder_open</span>
            <a href="#">Projects</a>
        </li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">
            <span class="lp-breadcrumb-icon material-symbols-outlined">description</span>
            Report.pdf
        </li>
    </ol>
</nav>

Collapsed (Long Trail)

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--collapsed lp-breadcrumb--arrow">
        <li class="lp-breadcrumb-item"><a href="#">Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Category</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Subcategory</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Section</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--ellipsis">&hellip;</li>
        <li class="lp-breadcrumb-item"><a href="#">Parent Page</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Current Page</li>
    </ol>
</nav>

Accessible Markup Reference

Uses <nav aria-label="Breadcrumb">, semantic <ol>/<li>, and aria-current="page" on the active item.

<nav aria-label="Breadcrumb">
    <ol class="lp-breadcrumb lp-breadcrumb--chevron lp-breadcrumb--contained">
        <li class="lp-breadcrumb-item">
            <span class="lp-breadcrumb-icon material-symbols-outlined">home</span>
            <a href="#">Home</a>
        </li>
        <li class="lp-breadcrumb-item"><a href="#">Products</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Electronics</a></li>
        <li class="lp-breadcrumb-item lp-breadcrumb-item--active" aria-current="page">Laptops</li>
    </ol>
</nav>
<p class="lp-text-muted lp-text-xs lp-mt-3">
    Uses <code>&lt;nav aria-label="Breadcrumb"&gt;</code>, semantic <code>&lt;ol&gt;</code>/<code>&lt;li&gt;</code>,
    and <code>aria-current="page"</code> on the active item.
</p>