Breadcrumbs
Overview
Breadcrumbs are used to help users navigate the SAMHSA website.
Usage
Breadcrumbs are used on breakpoints large and greater. They are displayed on all pages with the exception of Home and Search.
Functionality
- All pages in the breadcrumb are links accept the current page.
- OnClick or OnTap of link, system displays the target page in the same window.
- There is no need to assign special keyboard functions using this code.
Accessibility
There is not HTML property for breadcrumbs. So to help make them usuable for screen readers, it is recommended that these guidelines are followed.
- Use the
<nav>property to call out the navigational element. - Use area labels to name both the element as a whole
<nav aria-label="breadcrumbs">and to show the current page<li aria-current="location"> - Make the divider a decorative element by putting it inside the CSS.
Code
HTML
<nav class="breadcrumb" aria-label="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/grandparent">Grandparent</a></li>
<li><a href="/parent">Parent</a></li>
<li aria-current>Current Location</li>
</ol>
</nav>
SCSS
Note link color and styling is consistent with global styles.
.breadcrumb ol {
padding: 10px 16px;
list-style: none;
li {
display: inline;
font-size: .75rem;
}
li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
}