Breadcrumb

vel-src: breadcrumb.css

A secondary navigation trail showing the user's current location within a site hierarchy.

Class	Properties
vel-breadcrumb	Ordered list container for breadcrumb items (default slash separator)
vel-breadcrumb-item	Individual list item within the breadcrumb trail
vel-breadcrumb-link	Anchor element for navigable breadcrumb steps
vel-breadcrumb-active	Marks the current (non-navigable) breadcrumb step
vel-breadcrumb-chevron	Modifier on vel-breadcrumb to use a › chevron separator
vel-breadcrumb-dot	Modifier on vel-breadcrumb to use a · dot separator

Examples

Default (slash separator)

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <nav aria-label="Breadcrumb">
    <ol class="vel-breadcrumb">
      <li class="vel-breadcrumb-item">
        <a class="vel-breadcrumb-link" href="#">Home</a>
      </li>
      <li class="vel-breadcrumb-item">
        <a class="vel-breadcrumb-link" href="#">Components</a>
      </li>
      <li class="vel-breadcrumb-item vel-breadcrumb-active" aria-current="page">
        Breadcrumb
      </li>
    </ol>
  </nav>
</div>

Chevron variant

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <nav aria-label="Breadcrumb">
    <ol class="vel-breadcrumb vel-breadcrumb-chevron">
      <li class="vel-breadcrumb-item">
        <a class="vel-breadcrumb-link" href="#">Home</a>
      </li>
      <li class="vel-breadcrumb-item">
        <a class="vel-breadcrumb-link" href="#">Docs</a>
      </li>
      <li class="vel-breadcrumb-item vel-breadcrumb-active" aria-current="page">
        Breadcrumb
      </li>
    </ol>
  </nav>
</div>