Links / Breadcrumbs

WCAG Description of Component

A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of Web pages. A breadcrumb trail either displays locations in the path the user took to reach the Web page, or it displays the location of the current Web page within the organization of the site.

Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current Web page. They are placed in the same location within each Web page in the set.

It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include ">", "|", "/", "::", and "→".
Reference link

Functional Description

List should read as breadcrumbs
All elements should be links except the last one which is the title of the page
List items do not announce "bullet" when using screen reader
Slash is not announced between list items
The list-style=""; was found as a recommendation from this article

Component Example

Code Snippets

HTML

                
<nav aria-label="Breadcrumbs Example">
    <ul class="breadcrumbs">
        <li><a href="/">Home</a><span aria-hidden="true">/</span></li>
        <li><a href="/links">Links</a><span aria-hidden="true">/</span></li>
        <li>Breadcrumb Component</li>
    </ul>
</nav>

CSS

                
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    list-style: "";
    padding: 0;

    li {
        padding-right: 1rem;
        // note: display: tablet-cell removes the announcement "bullet"
        display: table-cell;

        span {
            content: '/';
            padding-left: 1rem;
        }

        &:last-of-type {
            padding-right: 0;
        }
    }
}

History Tracking

Code orginally created by Kelly; Approved by Steen on Nov 20,2023