SOROUSH.DESIGN
Design SystemMarkdownStyled System

Breadcrumbs

The trail of links from a site's root to the current page, so a page shows where it sits and every ancestor is one click away.

Source

Accessibility

  • Name the trail with aria-label - a nav landmark that's easy to find.
  • Mark the current page's crumb aria-current="page".
  • The crumbs are an ordered list; the separators are hidden from assistive technology.
  • The collapsed button is a native button named by expandLabel.