A digital services project by FlexionBreadcrumb
navigationUSWDS-derived
A trail of links showing the current page location within a site hierarchy.
Reference: USWDS documentation ↗
Variants
Default
<nav class="flex-breadcrumb" aria-label="Breadcrumbs">
<ol class="flex-breadcrumb__list">
<li class="flex-breadcrumb__list-item"><a class="flex-breadcrumb__link" href="/">Home</a></li>
<li class="flex-breadcrumb__list-item"><a class="flex-breadcrumb__link" href="/catalog">Catalog</a></li>
<li class="flex-breadcrumb__list-item" aria-current="page"><span>Current Page</span></li>
</ol>
</nav>Two Levels
<nav class="flex-breadcrumb" aria-label="Breadcrumbs">
<ol class="flex-breadcrumb__list">
<li class="flex-breadcrumb__list-item"><a class="flex-breadcrumb__link" href="/">Home</a></li>
<li class="flex-breadcrumb__list-item" aria-current="page"><span>Current Page</span></li>
</ol>
</nav>Wrap
<nav class="flex-breadcrumb" aria-label="Breadcrumbs" data-variant="wrap">
<ol class="flex-breadcrumb__list">
<li class="flex-breadcrumb__list-item"><a class="flex-breadcrumb__link" href="/">Home</a></li>
<li class="flex-breadcrumb__list-item"><a class="flex-breadcrumb__link" href="/agencies">Federal Agencies</a></li>
<li class="flex-breadcrumb__list-item"><a class="flex-breadcrumb__link" href="/agencies/examples">Department of Examples</a></li>
<li class="flex-breadcrumb__list-item"><a class="flex-breadcrumb__link" href="/agencies/examples/programs">Programs and Initiatives</a></li>
<li class="flex-breadcrumb__list-item" aria-current="page"><span>Current Page</span></li>
</ol>
</nav>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-breadcrumb | .flex-breadcrumb | Breadcrumb nav wrapper |
usa-breadcrumb__list | .flex-breadcrumb__list | Ordered list of breadcrumb items |
usa-breadcrumb__list-item | .flex-breadcrumb__list-item | Individual breadcrumb item |
usa-breadcrumb__link | .flex-breadcrumb__link | Breadcrumb link |
usa-breadcrumb--wrap | data-variant="wrap" | Wrap variant — items wrap instead of truncating |
Verified properties
font-familyfont-sizeline-heightcolorpadding-toppadding-bottomlist-style-typedisplayBehavior promises
- ○ Separator icon appears between items via CSS ::after
- ○ Wrap variant allows items to wrap to next line
- ○ Last item is plain text with aria-current="page"
Source CSS
/* flex-breadcrumb — USWDS Breadcrumb conformance
Variants: default, wrap */
.flex-breadcrumb {
font-size: 1.06rem;
line-height: 1.3;
color: var(--flex-color-text);
background-color: var(--flex-color-bg);
padding-block: 1rem;
padding-inline: 0;
/* Default: truncate with ellipsis */
&:not([data-variant="wrap"]) .flex-breadcrumb__list {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
/* --- List --- */
.flex-breadcrumb__list {
margin-block: 0;
list-style-type: none;
display: block;
padding: 0.25rem;
margin-inline: -0.25rem;
}
/* --- List item --- */
.flex-breadcrumb__list-item {
display: inline;
white-space: normal;
/* Separator via ::after pseudo-element */
&:not(:last-child)::after {
content: "";
display: inline-block;
inline-size: 2ex;
block-size: 2ex;
vertical-align: baseline;
position: relative;
inset-block-end: -0.2em;
margin-inline: 0;
background: none;
background-color: var(--flex-gray-60);
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"),
linear-gradient(transparent, transparent);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: 2ex 2ex;
}
/* --- Current page (last item) --- */
&[aria-current="page"] {
font-weight: normal;
}
}
/* --- Link --- */
.flex-breadcrumb__link {
color: var(--flex-color-link);
display: inline;
text-decoration: none;
&:hover {
color: var(--flex-color-link-hover);
text-decoration: underline;
}
&:visited {
color: var(--flex-color-link-visited);
}
&:focus {
outline: 0.25rem solid var(--flex-color-focus);
outline-offset: 0;
}
}