Breadcrumbs

<nav aria-label="Breadcrumbs">
    <ol class="flex items-center gap-x3 text-fg-muted">
        <li class="flex items-center gap-x1.5">
            <a href="#" class="ease-linear hover-text-fg-subtitle flex items-center gap-x1.5">
                <span aria-hidden="true" class="flex i-carbon-home text-xl"></span>
                Home
            </a>
            <span aria-hidden="true" class="flex shring-0 i-carbon-chevron-right"></span>
        </li>
        <li class="flex items-center gap-x1.5">
            <a href="#" class="ease-linear hover-text-fg-subtitle flex items-center gap-x1.5">
                <span aria-hidden="true" class="flex i-carbon-api text-xl"></span>
                Navigation
            </a>
            <span aria-hidden="true" class="flex shring-0 i-carbon-chevron-right"></span>
        </li>
        <li class="flex items-center gap-x1.5 text-fg-title font-semibold">
            <span aria-hidden="true" class="flex i-carbon-worship"></span>
            <span aria-current="page" class="flex">Current Page</span>
        </li>
    </ol>
</nav>

<nav aria-label="Breadcrumbs">
    <ol class="flex items-center gap-x-3 text-fg-muted">
        <li class="flex items-center gap-x-1.5">
            <a href="#" class="ease-linear hover-text-sub-title">
                Home
            </a>
            <span aria-hidden="true" class="flex i-ph-caret-right"></span>
        </li>
        <li class="flex items-center gap-x-1.5">
            <span class="pointer-events-none">
                <span aria-hidden="true" class="flex i-ph-dots-three"></span>
            </span>
            <span aria-hidden="true" class="flex i-ph-caret-right"></span>
        </li>
        <li class="text-title font-semibold">
            <span aria-current="page" class="flex">Current Page</span>
        </li>
    </ol>
</nav>