Breadcrumbs

Digital pattern library

The breadcrumbs pattern indicates the current page's location within a navigational hierarchy in relation to the homepage.

Must not be used on the homepage or on long-form content pages.
Must be used at the top of content pages, sitting immediately beneath the navigation bar and above the page content.

Default breadcrumbs

Code


<!-- Begin pattern: breadcrumbs //-->

<div class="container">
    <div class="row">
        <div class="col-lg-12 content">
            <h2 class="sr-only">Breadcrumbs navigation</h2>
            <nav>
                <ul class="breadcrumbs">
                        <li><a href="#">University</a></li>
                        <li><a href="#">Study at St&nbsp;Andrews</a></li>
                    <li>Undergraduate</li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- End pattern: breadcrumbs //-->