Breadcrumb

Finder-inspired path navigation. The shared layouts/_breadcrumb partial renders these in-app; the markup is shown below for reference.

Basic Breadcrumb

HTML

<nav class="ziom-breadcrumb">
  <ol class="ziom-breadcrumb-list">
    <li class="ziom-breadcrumb-item">
      <a href="/" class="ziom-breadcrumb-link ziom-breadcrumb-link-home"><i class="ph ph-house"></i></a>
    </li>
    <li class="ziom-breadcrumb-separator"><i class="ph ph-caret-right"></i></li>
    <li class="ziom-breadcrumb-item">
      <a href="#" class="ziom-breadcrumb-link">Buildings</a>
    </li>
    <li class="ziom-breadcrumb-separator"><i class="ph ph-caret-right"></i></li>
    <li class="ziom-breadcrumb-item ziom-breadcrumb-item-current">
      <a href="#" class="ziom-breadcrumb-link">123 Main Street</a>
    </li>
  </ol>
</nav>

With Actions

HTML

<nav class="ziom-breadcrumb">
  <ol class="ziom-breadcrumb-list">
    <li class="ziom-breadcrumb-item">
      <a href="#" class="ziom-breadcrumb-link">Leads</a>
    </li>
    <li class="ziom-breadcrumb-separator"><i class="ph ph-caret-right"></i></li>
    <li class="ziom-breadcrumb-item ziom-breadcrumb-item-current">
      <a href="#" class="ziom-breadcrumb-link">New Lead</a>
    </li>
  </ol>
  <div class="ziom-breadcrumb-actions">
    <button class="ziom-btn ziom-btn-sm ziom-btn-primary"><i class="ph ph-plus"></i> <span>Add</span></button>
  </div>
</nav>