Breadcrumbs

The breadcrumb component is used to display the current page's location within the site hierarchy. It helps users navigate back to previous pages. Add aria-label="Breadcrumb" to the section element for accessibility and use aria-current="page" on the last item to indicate the current page.

.c-breadcrumbs > .c-breadcrumbs__list > .c-breadcrumbs__item > a.c-breadcrumbs__link / > span.c-breadcrumbs__current

1. Home
2. Category
3. Current Page

Show Code

<section class="c-breadcrumbs" role="navigation" aria-label="Breadcrumb">
    <ol class="c-breadcrumbs__list">
        <li class="c-breadcrumbs__item">
            <a href="#" class="c-breadcrumbs__link">Home</a>
        </li>
        <li class="c-breadcrumbs__item">
            <a href="#" class="c-breadcrumbs__link">Category</a>
        </li>
        <li class="c-breadcrumbs__item" aria-current="page">
            <span class="c-breadcrumbs__current">Current Page</span>
        </li>
    </ol>
</section>