- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Breadcrumbs
Component status | Contribution |
---|---|
Current version | @spectrum-css/breadcrumb@9.1.5 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/breadcrumb@10.0.0-s2-foundations.15 |
Released | October 4, 2024 |
Variants
StandardContribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs">
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
DraggedContribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs">
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item is-dragged">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
NestedContribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs">
<li class="spectrum-Breadcrumbs-item">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-FolderOpen" />
</svg>
</button>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Sub Item</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
Nested (root visible)Contribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs">
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-FolderOpen" />
</svg>
</button>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
MultilineContribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
Multiline (dragged)Contribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item is-dragged">
<a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
Multiline NestedContribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
<li class="spectrum-Breadcrumbs-item">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-FolderOpen" />
</svg>
</button>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" href="#">Sub Item</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
Multiline Nested (root visible)Contribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-FolderOpen" />
</svg>
</button>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
CompactContribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--compact">
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
Compact NestedContribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--compact">
<li class="spectrum-Breadcrumbs-item">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-FolderOpen" />
</svg>
</button>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" href="#">Sub Item</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
Compact Nested (root visible)Contribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--compact">
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-FolderOpen" />
</svg>
</button>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
DisabledContribution
Show markup
<nav>
<ul class="spectrum-Breadcrumbs">
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<div class="spectrum-Breadcrumbs-itemLink is-disabled" role="link" aria-disabled="true">Trend</div>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
<nav>
<ul class="spectrum-Breadcrumbs">
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-FolderOpen" />
</svg>
</button>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Breadcrumbs-item">
<a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
</li>
</ul>
</nav>
Custom Properties API
This component can be modified via its --mod-*
prefixed custom properties. A list of those prefixed custom properties can be found here.
Migration Guide
New Action Button markup
Action Button requires .spectrum-ActionButton-icon
class on icons nested inside of Action Button.
Remove focus-ring class
We’ve migrated away from the focus-ring class in favor of the native :focus-visible
pseudo-class due to changes in browser support.