Permalink
Fetching contributors…
Cannot retrieve contributors at this time
57 lines (44 sloc) 1.32 KB

Breadcrumb

Navigation for hierarchical trails.

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>

ARIA

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

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

Variables

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