Warp Design System

Appearance

Breadcrumbs - Elements ​

Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.

ElementsreleasedReactreleasedVuereleased

Accessibility ​

Breadcrumbs are exposed as navigation so assistive technology users can identify the path to the current page.

Label The Navigation ​

The component has a localized default accessible label. Use aria-label when the default label is not specific enough, especially if the page has more than one breadcrumb trail or other navigation landmarks nearby.

html
<w-breadcrumbs aria-label="Product category path">
  <a href="/marketplace">Marketplace</a>
  <a href="/marketplace/furniture">Furniture</a>
  <span aria-current="page">Sofas</span>
</w-breadcrumbs>

Mark The Current Page ​

The last breadcrumb item should represent the current page and include aria-current="page".

Use a non-link element for the current page when it should not be clickable:

html
<w-breadcrumbs aria-label="You are here">
  <a href="/real-estate">Real estate</a>
  <a href="/real-estate/homes">Homes for sale</a>
  <span aria-current="page">Oslo</span>
</w-breadcrumbs>

If the current page remains a link, keep aria-current="page" on that link:

html
<w-breadcrumbs aria-label="You are here">
  <a href="/real-estate">Real estate</a>
  <a href="/real-estate/homes">Homes for sale</a>
  <a href="/real-estate/homes/oslo" aria-current="page">Oslo</a>
</w-breadcrumbs>

Keep The Trail Predictable ​

Order breadcrumb items from the broadest parent to the current page. Use concise link text that names the destination.

Do not include separator characters in the markup. The component adds visual separators between items.

Breadcrumbs should support orientation within the site hierarchy. They should not be used as the only way to navigate the site or as a replacement for a page heading.

Usage ​

Breadcrumbs show where the current page sits in a site hierarchy and let users move back to parent pages.

Use w-breadcrumbs near the top of a page or section, before the main page heading or primary content. Add each breadcrumb item as a direct child. The component adds separators automatically.

Basic Breadcrumbs ​

Use links for parent pages and mark the current page with aria-current="page".

html
<w-breadcrumbs aria-label="You are here">
  <a href="/real-estate">Real estate</a>
  <a href="/real-estate/homes">Homes for sale</a>
  <span aria-current="page">Oslo</span>
</w-breadcrumbs>

Current Page ​

The current page should be the last breadcrumb item.

Use a span when the current page should not be clickable:

html
<w-breadcrumbs aria-label="You are here">
  <a href="/real-estate">Real estate</a>
  <a href="/real-estate/homes">Homes for sale</a>
  <span aria-current="page">Oslo</span>
</w-breadcrumbs>

Content Guidelines ​

Keep breadcrumb labels short and ordered from broadest section to most specific page. Do not add slash separators yourself; the component inserts them between items.

Breadcrumbs should not replace the page heading, primary navigation, or step navigation in a process.

Examples ​

Basic ​

html
  <w-breadcrumbs>
    <a href="#/real-estate">Real estate</a>
    <a href="#/real-estate/homes">Homes for sale</a>
    <span aria-current="page">Oslo</span>
  </w-breadcrumbs>

Custom Accessible Label ​

html
  <w-breadcrumbs aria-label="Product category path">
    <a href="#/marketplace">Marketplace</a>
    <a href="#/marketplace/furniture">Furniture</a>
    <span aria-current="page">Sofas</span>
  </w-breadcrumbs>

Short Path ​

html
  <w-breadcrumbs>
    <a href="#/help">Help</a>
    <span aria-current="page">Contact us</span>
  </w-breadcrumbs>

Styling API ​

<w-breadcrumbs> API ​

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties ​

NameTypeDefaultSummary
ariaLabel (JS only)string | null-Accessible label for the breadcrumb navigation.

Property Details ​

ariaLabel (JS only) ​

Accessible label for the breadcrumb navigation. Defaults to the localized "You are here" label. Set aria-label when the default label is not specific enough for the page.

  • Type: string | null
  • Default: -

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system