Myna UI

Breadcrumbs

<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <a href="#" class="text-gray-800">Reports</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <span class="text-gray-400">Export</span>
    </li>
  </ul>
</nav>
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <span class="text-gray-400">Reports</span>
    </li>
  </ul>
</nav>

<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <a href="#" class="text-gray-800">Reports</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <span class="text-gray-400">Export</span>
    </li>
  </ul>
</nav>

<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <a href="#" class="text-gray-800">Reports</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <a href="#" class="text-gray-800">Social</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <span class="text-gray-400">Export</span>
    </li>
  </ul>
</nav>

<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <a href="#" class="text-gray-800">路路路</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <a href="#" class="text-gray-800">Reports</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <a href="#" class="text-gray-800">Social</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <span class="text-gray-400">Export</span>
    </li>
  </ul>
</nav>
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-2 text-sm font-medium">
    <li class="flex items-center space-x-2">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-2">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <a href="#" class="text-gray-800">Reports</a>
    </li>
    <li class="flex items-center space-x-2" aria-current="page">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <span class="text-gray-400">Export</span>
    </li>
  </ul>
</nav>
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-2 text-sm font-medium">
    <li class="flex items-center space-x-2">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-2" aria-current="page">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <span class="text-gray-400">Reports</span>
    </li>
  </ul>
</nav>

<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-2 text-sm font-medium">
    <li class="flex items-center space-x-2">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-2">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <a href="#" class="text-gray-800">Reports</a>
    </li>
    <li class="flex items-center space-x-2" aria-current="page">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <span class="text-gray-400">Export</span>
    </li>
  </ul>
</nav>

<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-2 text-sm font-medium">
    <li class="flex items-center space-x-2">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-2">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <a href="#" class="text-gray-800">Reports</a>
    </li>
    <li class="flex items-center space-x-2">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <a href="#" class="text-gray-800">Social</a>
    </li>
    <li class="flex items-center space-x-2" aria-current="page">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <span class="text-gray-400">Export</span>
    </li>
  </ul>
</nav>

<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-2 text-sm font-medium">
    <li class="flex items-center space-x-2">
      <a href="#" class="text-gray-800">Dashboard</a>
    </li>
    <li class="flex items-center space-x-2">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <a href="#" class="text-gray-800">路路路</a>
    </li>
    <li class="flex items-center space-x-2">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <a href="#" class="text-gray-800">Reports</a>
    </li>
    <li class="flex items-center space-x-2">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <a href="#" class="text-gray-800">Social</a>
    </li>
    <li class="flex items-center space-x-2" aria-current="page">
      <svg class="h-3.5 w-3.5 shrink-0 stroke-gray-300" viewBox="0 0 256 256" aria-hidden="true">
        <polyline
          points="96 48 176 128 96 208"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></polyline>
      </svg>
      <span class="text-gray-400">Export</span>
    </li>
  </ul>
</nav>
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="flex items-center space-x-1 text-gray-800">
        <svg class="h-4 w-4 shrink-0 fill-gray-500" aria-hidden="true" viewBox="0 0 256 256">
          <path
            d="M184,32H72A16,16,0,0,0,56,48V224a8.1,8.1,0,0,0,4.1,7,7.6,7.6,0,0,0,3.9,1,7.9,7.9,0,0,0,4.2-1.2L128,193.4l59.7,37.4a8.3,8.3,0,0,0,8.2.2,8.1,8.1,0,0,0,4.1-7V48A16,16,0,0,0,184,32Z"></path>
        </svg>
        <span>Dashboard</span>
      </a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <a href="#" class="flex items-center space-x-1 text-gray-800">
        <svg class="h-4 w-4 shrink-0 fill-gray-500" aria-hidden="true" viewBox="0 0 256 256">
          <path
            d="M200,32H163.7a47.8,47.8,0,0,0-71.4,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32.1,32.1,0,0,1,32,32H96A32.1,32.1,0,0,1,128,32Z"></path>
        </svg>
        <span>Reports</span>
      </a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
      <span class="flex items-center space-x-1">
        <svg class="h-4 w-4 shrink-0 fill-gray-400" aria-hidden="true" viewBox="0 0 256 256">
          <path
            d="M136,88H120V35.3L91.7,63.6A8,8,0,0,1,80.3,52.3l42-42a8.1,8.1,0,0,1,11.4,0l42,42a8,8,0,0,1,0,11.3,8,8,0,0,1-11.4,0L136,35.3Zm64,0H136v40a8,8,0,0,1-16,0V88H56a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V104A16,16,0,0,0,200,88Z"></path>
        </svg>
        <span class="text-gray-400">Export</span>
      </span>
    </li>
  </ul>
</nav>