Breadcrumb

Navigation aid that helps users understand their location within a website's hierarchy and navigate back to previous sections.

Class name	Type
`.prs-breadcrumb`	Component	For <nav> then nest <ol>

Default

<nav class="prs-breadcrumb" role="navigation" aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="../../">Parent with a really long name to see truncation</a></li>
    <li><a href="../">Parent</a></li>
    <li>Current</li>
  </ol>
</nav>

<!-- this is just for demo purposes -->
<script>
  document.querySelectorAll('.prs-breadcrumb a').forEach(link => { link.addEventListener('click', function(event) { event.preventDefault() }) });
</script>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-breadcrumb {
  /* adjust this for link truncation width */
  --max-w: 12rem;

  > ol {
    color: var(--prs-c-gray-900);
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;

    > li {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    > :where(li:not(:last-child))::after {
      margin: 3px 4.5px;
      border: 4px solid transparent;
      border-right: 0 none;
      border-left: 5px solid currentColor;
      content: '';
    }
  }

  a {
    max-width: var(--max-w);
    color: var(--prs-c-aqua);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition-property: var(--prs-transition-property);
    transition-timing-function: var(--prs-transition-timing);
    transition-duration: var(--prs-transition-duration);

    &:hover {
      color: var(--prs-c-aqua-600);
      text-decoration: underline;
    }
  }
}

Figma

Coming soon...