Breadcrumbs

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

Rules for the breadcrumbs

Must not be used on any page that uses the hero banner pattern such as the University's homepage.
Must not be used on long-form pages.
Must be used at the top of content pages, sitting immediately beneath the navigation bar and above the page content.

Breadcrumbs

Example

Code

<!-- Begin pattern: breadcrumbs //-->
<div class="container breadcrumbs--wrapper">
    <div class="row">
        <div class="col-lg-12 content">
            <nav aria-label="Breadcrumb">
                <ol class="breadcrumbs">
                    <li><a href="#">University</a></li>
                    <li><a href="#">Study at St Andrews</a></li>
                    <li aria-current="page">Undergraduate</li>
                </ol>
            </nav>
        </div>
    </div>
</div>
<!-- End pattern: breadcrumbs //-->

Breadcrumbs (old version) - deprecated

This option is no longer supported

This implementation is now deprecated and will be removed in a future release. This does not include the breadcrumbs--wrapper class which is required to add collapsible margins.

Example

Code

<!-- Begin pattern: breadcrumbs //-->
<div class="container">
    <div class="row">
        <div class="col-lg-12 content">
            <nav aria-label="Breadcrumb">
                <ol class="breadcrumbs">
                    <li><a href="#">University</a></li>
                    <li><a href="#">Study at St Andrews</a></li>
                    <li aria-current="page">Undergraduate</li>
                </ol>
            </nav>
        </div>
    </div>
</div>
<!-- End pattern: breadcrumbs //-->