Top

Usage

The breadcrumb markup makes use of nav, ul, and ol elements for semantic structuring. Within each list item is a link and an optional caret. The caret in the last item will be hidden automatically.

<nav class="breadcrumb">
    <ol>
        <li><a href="/">Major Page <span class="caret">/</span></a></li>
        <li><a href="/">Minor Page <span class="caret">/</span></a></li>
        <li><a href="/">Sub Page <span class="caret">/</span></a></li>
    </ol>
</nav>

Sizes

Applying a .small or .large class to the .breadcrumb element will alter the padding and font size.

<nav class="breadcrumb large">
    ...
</nav>
Top

ARIA

The navigation role and the appropriate aria-* attributes are required when supporting ARIA.

<nav class="breadcrumb" role="navigation" aria-label="Breadcrumb Navigation">
    ...
</nav>
Top

Variables

Variable Default Description
$breadcrumb-class .breadcrumb CSS class name for the breadcrumb element.