Breadcrumbs

Breadcrumbs are used to provide context for the currently-viewed page.

Classes

Class Parent Description
.s-breadcrumbs N/A Base parent container for breadcrumbs
.s-breadcrumbs--item .s-breadcrumbs Individual breadcrumb element containing a link and a divider
.s-breadcrumbs--link .s-breadcrumbs--item Breadcrumb link element
.s-breadcrumbs--divider .s-breadcrumbs--item Breadcrumb divider element

Examples

Breadcrumbs show users where they are within a site’s hierarchy. Breadcrumbs help orient the user and allow for navigation to previous page levels. It can be appropriate to use a breadcrumb when:

  • The user is many levels of navigation deep
  • The current page does not have its own navigation
  • The user needs to quickly go back to the previous parent page

Breadcrumbs should be the first page element—placed directly above the page’s title. The page the user is on should not appear in the breadcrumb trail, since that indicator is satisfied by the title of the page itself. Additionally, the last .s-breadcrumb--item shouldn’t include the divider.

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav class="s-breadcrumbs mb6 sm:mb2" aria-label="breadcrumb">
    <div class="s-breadcrumbs--item">
        <a class="s-breadcrumbs--link" href="…">Stack Overflow</a>
        @Svg.ArrowRightAltSm.With("s-breadcrumbs--divider")
    </div>
    <div class="s-breadcrumbs--item">
        <a class="s-breadcrumbs--link" href="…"></a>
        @Svg.ArrowRightAltSm.With("s-breadcrumbs--divider")
    </div>
    <div class="s-breadcrumbs--item">
        <a class="s-breadcrumbs--link" href="…"></a>
    </div>
</nav>

Payment Details

When possible, an icon can be used as the highest breadcrumb level. Take care in positioning this icon relative to the rest of the breadcrumb links.

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav class="s-breadcrumbs mb6 sm:mb2" aria-label="breadcrumb">
    <div class="s-breadcrumbs--item">
        <a class="s-breadcrumbs--link" href="…">@Svg.LogoGlyphXxs.With("mtn2")</a>
        @Svg.ArrowRightAltSm.With("s-breadcrumbs--divider")
    </div>
    <div class="s-breadcrumbs--item">
        <a class="s-breadcrumbs--link" href="…"></a>
        @Svg.ArrowRightAltSm.With("s-breadcrumbs--divider")
    </div>
    <div class="s-breadcrumbs--item">
        <a class="s-breadcrumbs--link" href="…"></a>
    </div>
</nav>

Payment Details