Breadcrumbs

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Category</a></li>
    <li>Current Page</li>
  </ol>
</nav>

Requires: ux.min.css

<nav class="text-sm" aria-label="Breadcrumb">
  <ol class="flex items-center flex-wrap list-none m-0 p-0">
    <li class="inline-flex items-center"><a class="inline-flex items-center gap-1 text-primary no-underline rounded-md px-1.5 py-0.5 hover:bg-primary/10" href="#">Home</a></li>
    <li class="inline-flex items-center before:content-['/'] before:mx-2 before:opacity-40"><a class="inline-flex items-center gap-1 text-primary no-underline rounded-md px-1.5 py-0.5 hover:bg-primary/10" href="#">Products</a></li>
    <li class="inline-flex items-center before:content-['/'] before:mx-2 before:opacity-40"><a class="inline-flex items-center gap-1 text-primary no-underline rounded-md px-1.5 py-0.5 hover:bg-primary/10" href="#">Category</a></li>
    <li class="inline-flex items-center before:content-['/'] before:mx-2 before:opacity-40 text-base-content/60">Current Page</li>
  </ol>
</nav>

Requires: tw.min.css

// No JavaScript required - pure CSS + HTML

<nav class="breadcrumbs breadcrumbs-arrow" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Settings</a></li>
    <li>Profile</li>
  </ol>
</nav>

Requires: ux.min.css

<nav class="text-sm" aria-label="Breadcrumb">
  <ol class="flex items-center flex-wrap list-none m-0 p-0">
    <li class="inline-flex items-center"><a class="text-primary no-underline rounded-md px-1.5 py-0.5 hover:bg-primary/10" href="#">Home</a></li>
    <li class="inline-flex items-center before:content-['›'] before:mx-2 before:opacity-40 before:text-lg"><a class="text-primary no-underline rounded-md px-1.5 py-0.5 hover:bg-primary/10" href="#">Settings</a></li>
    <li class="inline-flex items-center before:content-['›'] before:mx-2 before:opacity-40 before:text-lg text-base-content/60">Profile</li>
  </ol>
</nav>

Requires: tw.min.css

// No JavaScript required - pure CSS + HTML

<nav class="breadcrumbs breadcrumbs-dot" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Users</a></li>
    <li>John Doe</li>
  </ol>
</nav>

Requires: ux.min.css

<nav class="text-sm" aria-label="Breadcrumb">
  <ol class="flex items-center flex-wrap list-none m-0 p-0">
    <li class="inline-flex items-center"><a class="text-primary no-underline rounded-md px-1.5 py-0.5 hover:bg-primary/10" href="#">Dashboard</a></li>
    <li class="inline-flex items-center before:content-['•'] before:mx-2 before:opacity-40"><a class="text-primary no-underline rounded-md px-1.5 py-0.5 hover:bg-primary/10" href="#">Users</a></li>
    <li class="inline-flex items-center before:content-['•'] before:mx-2 before:opacity-40 text-base-content/60">John Doe</li>
  </ol>
</nav>

Requires: tw.min.css

// No JavaScript required - pure CSS + HTML