<!--{ @aria-label The value "Breadcrumb" is a common term as well as designates this navigation element as unique }-->
<nav aria-label="Breadcrumb" class="breadcrumbs">
<a href="https://nycopportunity.github.io/standard/demos/index">Home</a>
<!--{ @class "rtl:flip" changes the orientation of the chevron icon based on the reading direction of the page }-->
<!--{ @aria-hidden "true" removes this non-critical icon from screen reader view }-->
<svg aria-hidden="true" class="breadcrumbs__chevron icon-ui rtl:flip">
<use href="#lucide-chevron-right"></use>
</svg>
<a href="#">Elements</a>
<!--{ @class "rtl:flip" changes the orientation of the chevron icon based on the reading direction of the page }-->
<!--{ @aria-hidden "true" removes this non-critical icon from screen reader view }-->
<svg aria-hidden="true" class="breadcrumbs__chevron icon-ui rtl:flip">
<use href="#lucide-chevron-right"></use>
</svg>
<!--{ @aria-current "page" designates this label as the current page of the navigation }-->
<b aria-current="page">Breadcrumb</b>
</nav>
The Breadcrumb is a navigation element that showcases where the user is on a website and allows them to navigate back to parent pages quickly. It is the same as the Breadcrumb Component in the U.S. Web Design System (USWDS) and follows the same usage guidelines.