Breadcrumbs - Skeleton

Blog
›
Category
›
Article

<ol class="flex items-center gap-4">
  <li><a class="opacity-60 hover:underline" href="#">Blog</a></li>
  <li class="opacity-50" aria-hidden>&rsaquo;</li>
  <li><a class="opacity-60 hover:underline" href="#">Category</a></li>
  <li class="opacity-50" aria-hidden>&rsaquo;</li>
  <li>Article</li>
</ol>

Icons

Feel free to mix in icons for the anchor labels or separators.

Current

---
import { ChevronRight, House, Cog } from 'lucide-react';
---

<ol class="flex items-center gap-4">
  <li>
    <a class="opacity-60 hover:opacity-100" href="#">
      <House size={24} />
    </a>
  </li>
  <li class="opacity-50" aria-hidden>
    <ChevronRight size={14} />
  </li>
  <li>
    <a class="opacity-60 hover:opacity-100" href="#">
      <Cog size={24} />
    </a>
  </li>
  <li class="opacity-50" aria-hidden>
    <ChevronRight size={14} />
  </li>
  <li>Current</li>
</ol>