Breadcrumbs
Breadcrumbs are used to provide context for the currently-viewed page.
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 |
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 more than 2 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.
It is not appropriate to use Breadcrumbs when:
- There is only one level of navigation.
- There isn’t a clear navigation path or the page is orphaned.
<nav class="s-breadcrumbs mb6 sm:mb2" aria-label="breadcrumb">
<div class="s-breadcrumbs--item">
<a class="s-breadcrumbs--link" href="…" aria-label="Stack Overflow">@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>
What types of questions should I avoid asking?
<nav class="s-breadcrumbs mb6 sm:mb2" aria-label="breadcrumb">
<div class="s-breadcrumbs--item">
<a class="s-breadcrumbs--link" href="…" aria-label="Stack Exchange">@Svg.LogoSEXxs.With("mtn2")</a>
@Svg.ArrowRightAltSm.With("s-breadcrumbs--divider")
</div>
<div class="s-breadcrumbs--item">
<a class="s-breadcrumbs--link" href="…">…</a>
</div>
</nav>
Close votes
<nav class="s-breadcrumbs mb6 sm:mb2" aria-label="breadcrumb">
<div class="s-breadcrumbs--item">
<a href="…" class="s-link s-link__muted mtn2" aria-label="…">
<div class="team-avatar s-avatar">
@Svg.ShieldXSm.With("native s-avatar--badge")
</div>
<span class="pl4">…</span>
</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>