Breadcrumbs
Displays the path to the current resource using a hierarchy of links.
Structure
Breadcrumbs are made using a <nav> element with aria-label="breadcrumb" containing
an ordered list (<ol>) of links. The current page is indicated with
aria-current="page" and should not be a link.
Examples
Separators
The separator between breadcrumb items can be customized.
By default, ">" is used as the separator. But this can be changed by overriding the
--separator
CSS variable.
Icons
Breadcrumbs can include icons to enhance visual hierarchy and usability.
A <svg> element can be added inside the breadcrumb item link.
Collapsed
For very long breadcrumb trails, you can show an ellipsis to indicate collapsed items.
Instead of a link, the collapsed item can be represented by a span with aria-hidden="true". The
attribute is there to indicate that the item is not part of the navigation and should not be announced by screen
readers.