Breadcrumb

<ol class="mv-breadcrumb">
  <li class="mv-breadcrumb-item">
    <a href="#" class="mv-breadcrumb-link">Home</a>
  </li>
  <li class="mv-breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </li>
  <li class="mv-breadcrumb-item">
    <a href="#" class="mv-breadcrumb-link">Components</a>
  </li>
  <li class="mv-breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </li>
  <li class="mv-breadcrumb-item">
    <span class="mv-breadcrumb-page">Breadcrumb</span>
  </li>
</ol>

<ol class="mv-breadcrumb">
  <li class="mv-breadcrumb-item">
    <a href="#" class="mv-breadcrumb-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house" aria-hidden="true">
        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></a>
  </li>
  <li class="mv-breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </li>
  <li class="mv-breadcrumb-item">
    <a href="#" class="mv-breadcrumb-link">Components</a>
  </li>
  <li class="mv-breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </li>
  <li class="mv-breadcrumb-item">
    <span class="mv-breadcrumb-page">Breadcrumb</span>
  </li>
</ol>

<ol class="mv-breadcrumb">
  <li class="mv-breadcrumb-item">
    <a href="#" class="mv-breadcrumb-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house" aria-hidden="true">
        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></a>
  </li>
  <li class="mv-breadcrumb-separator">
    <div class="mx-1 rounded-full size-1 bg-mono/30"></div>
  </li>
  <li class="mv-breadcrumb-item">
    <a href="#" class="mv-breadcrumb-link">Components</a>
  </li>
  <li class="mv-breadcrumb-separator">
    <div class="mx-1 rounded-full size-1 bg-mono/30"></div>
  </li>
  <li class="mv-breadcrumb-item">
    <span class="mv-breadcrumb-page">Breadcrumb</span>
  </li>
</ol>

<ol class="mv-breadcrumb">
  <li class="mv-breadcrumb-item">
    <a href="#" class="mv-breadcrumb-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house" aria-hidden="true">
        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></a>
  </li>
  <li class="mv-breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </li>
  <li class="mv-breadcrumb-item">
    <div data-mv-dropdown="true" data-mv-dropdown-trigger="click">
      <button class="mv-btn mv-btn-icon mv-btn-dim" data-mv-dropdown-toggle="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="19" cy="12" r="1"></circle>
          <circle cx="5" cy="12" r="1"></circle>
        </svg>
      </button>
      <div class="mv-dropdown-menu w-40" data-mv-dropdown-menu="true">
        <ul class="mv-dropdown-menu-sub">
          <li><a href="#" class="mv-dropdown-menu-link">Documentation</a></li>
          <li><a href="#" class="mv-dropdown-menu-link">Themes</a></li>
          <li><a href="#" class="mv-dropdown-menu-link">Github</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li class="mv-breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </li>
  <li class="mv-breadcrumb-item">
    <a href="#" class="mv-breadcrumb-link">Components</a>
  </li>
  <li class="mv-breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </li>
  <li class="mv-breadcrumb-item">
    <span class="mv-breadcrumb-page">Breadcrumb</span>
  </li>
</ol>

<div class="flex">
  <div class="mv-card">
    <div class="mv-card-content px-3.5 p-2">
      <ol class="mv-breadcrumb">
        <li class="mv-breadcrumb-item">
          <a href="#" class="mv-breadcrumb-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house" aria-hidden="true">
              <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
              <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></a>
        </li>
        <li class="mv-breadcrumb-separator">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </li>
        <li class="mv-breadcrumb-item">
          <a href="#" class="mv-breadcrumb-link">Components</a>
        </li>
        <li class="mv-breadcrumb-separator">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true">
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </li>
        <li class="mv-breadcrumb-item">
          <span class="mv-breadcrumb-page">Breadcrumb</span>
        </li>
      </ol>
    </div>
  </div>
</div>