Breadcrumb

List of links to the parent pages of the current page in hierarchical order.

<nav aria-label="breadcrumb">
  <ol class="flex items-center gap-2 text-sm">
      <li>
          <a href="https://tailus.io" class="link text-body variant-ghost">Tailus UI</a>
      </li>
      <li role="presentation">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-caption">
              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
          </svg>
      </li>
      <li>
          <a href="/" class="link text-body variant-ghost">Tailus UI HTML</a>
      </li>
      <li role="presentation">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-caption">
              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
          </svg>
      </li>
      <li>
          <a href="#" class="link text-body variant-ghost">Components</a>
      </li>
      <li role="presentation">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-caption">
              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
          </svg>
      </li>
      <li>
          <span class="font-medium text-title">Breadcrumb</span>
      </li>
  </ol>
</nav>

With Slash

<nav aria-label="breadcrumb">
  <ol class="flex items-center gap-2 text-sm">
      <li>
          <a href="https://tailus.io" class="link text-body variant-ghost">Tailus UI</a>
      </li>
      <li role="presentation">
          <svg aria-hidden xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-caption">
              <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
          </svg>
      </li>
      <li>
          <a href="/" class="link text-body variant-ghost">Tailus UI HTML</a>
      </li>
      <li role="presentation">
          <svg aria-hidden xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-caption">
              <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
          </svg>
      </li>
      <li>
          <a href="#" class="link text-body variant-ghost">Components</a>
      </li>
      <li role="presentation">
          <svg aria-hidden xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-caption">
              <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
          </svg>
      </li>
      <li>
          <a href="/" aria-current="page" class="font-medium text-title">Breadcrumb</a>
      </li>
  </ol>
</nav>