Breadcrumbs
The path from the start to the current screen, so the person knows where they are and can go back a few steps.
On this page
Playground
Levels
Background
<nav class="feitio-breadcrumbs" aria-label="You are here"><ol><li><a href="#playground">Home</a></li><li><span class="sep" aria-hidden="true"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></span><span aria-current="page">Weekly backup</span></li></ol></nav>When to use
- On screens two or more levels deep: a schedule inside Schedules.
When not to use
- At the first level: the Nav already says where the person is.
- As history: it is the place in the structure, not the path the person took.
Examples
The path
The current screen last, in soft text and without a link.
Show code
<nav class="feitio-breadcrumbs" aria-label="Você está em">
<ol>
<li><a href="/">Início</a></li>
<li><span class="sep" aria-hidden="true">…</span><a href="/agendamentos">Agendamentos</a></li>
<li><span class="sep" aria-hidden="true">…</span><span aria-current="page">Backup semanal</span></li>
</ol>
</nav>On mobile
Only the level above, with the back arrow.
Show code
<li class="back"><a href="/agendamentos">…Agendamentos</a></li>Anatomy
- Levels above: links.
- Separator: the hand-drawn arrow, hidden from screen readers.
- Current screen: soft text, no link.
Do and don’t
Do
The current screen without a link: it does not lead where the person already is.
Don’t
The current screen as a link and a slash as separator.
Accessibility
- A
<nav aria-label="You are here">with an ordered list. - The current screen with
aria-current="page"; the separator witharia-hidden.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-breadcrumbs" | on the <nav> | Levels in a row, wrapping when they do not fit. |
class="sep" | with aria-hidden | The arrow between levels. |
aria-current="page" | on the current screen | Soft text, no link. |
class="back" | on mobile | Only the level above, with the back arrow. |