Navigation
Breadcrumb
The path to the current page as a list of links.
On this page
A breadcrumb shows where the current page sits and gives a way back up. It is an ordered list of links inside a <nav>: quiet ink for the way back, strong ink for where you are, and a small chevron the stylesheet draws between steps.
Breadcrumb
<nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a class="breadcrumb-link" href="#projects">Projects</a> </li> <li class="breadcrumb-item"> <a class="breadcrumb-link" href="#atlas">Atlas</a> </li> <li class="breadcrumb-item"> <a class="breadcrumb-link" href="#deployments" aria-current="page">Deployments</a> </li> </ol></nav>#Long paths
Steps wrap onto a second line when the row runs out, and a single long name ends in an ellipsis at 16rem. To shorten a deep path, replace the middle steps with a menu.
Long paths
<nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a class="breadcrumb-link" href="#home">Home</a> </li> <li class="breadcrumb-item"> <button type="button" class="btn btn-quiet btn-square btn-sm" popovertarget="crumbs" aria-label="Show 2 more levels"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="5" cy="12" r="1" /> <circle cx="12" cy="12" r="1" /> <circle cx="19" cy="12" r="1" /> </svg> </button> <div id="crumbs" popover class="menu"> <a class="menu-item" href="#workspace">Workspace</a> <a class="menu-item" href="#projects">Projects</a> </div> </li> <li class="breadcrumb-item"> <a class="breadcrumb-link" href="#atlas">Atlas</a> </li> <li class="breadcrumb-item"> <a class="breadcrumb-link" href="#settings" aria-current="page">Environment variables and secrets</a> </li> </ol></nav>#Accessibility
- Wrap the list in
<nav aria-label="Breadcrumb">and use an<ol>: the order is the meaning. - Mark the last step with
aria-current="page". It may stay a link to the current page or be an<a>withouthref. - The chevrons are drawn by the stylesheet and are not announced. They mirror in right-to-left text.
#Classes
| Class | Description |
|---|---|
breadcrumb | The list of steps, on an ol inside a nav with aria-label. Steps wrap onto a second line when the row runs out |
breadcrumb-item | A step, on an li. The stylesheet draws a chevron before every step but the first and mirrors it in right-to-left text |
breadcrumb-link | The link of a step. A long name ends in an ellipsis at 16rem |