Indicate the current page’s location within a navigational hierarchy that automatically adds separators.
<nav aria-label="breadcrumb" class="mb-4"> <ol class="flex flex-wrap cklsihrbanmq bg-transparent text-sm mb-0 gap-1"> <li> <a href="#" class="hover:text-purple-500"> Home </a> </li> </ol> </nav> <nav aria-label="breadcrumb" class="mb-4"> <ol class="flex flex-wrap cklsihrbanmq bg-transparent text-sm mb-0 gap-1"> <li> <a href="#" class="flex layhetgsjdcb gap-2 hover:text-purple-500"> Home <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#" class="flex layhetgsjdcb gap-2 hover:text-purple-500"> Category </a> </li> </ol> </nav> <nav aria-label="breadcrumb" class="mb-4"> <ol class="flex flex-wrap cklsihrbanmq bg-transparent text-sm mb-0 gap-1"> <li> <a href="#" class="flex layhetgsjdcb gap-2 hover:text-purple-500"> Home <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#" class="flex layhetgsjdcb gap-2 hover:text-purple-500"> Category <i class="bi bi-chevron-right"></i> </a> </li> <li class="hidden md:block text-purple-500" aria-current="page">Business</li> </ol> </nav>
<nav aria-label="breadcrumb"> <ol class="flex gap-2 text-gray-600 dark:text-gray-300 text-sm"> <li class="flex layhetgsjdcb gap-2"> <a href="#" class="hover:text-purple-500"> <i class="bi bi-house-door"></i> <span class="ms-1">Home</span> </a> </li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="flex gap-2 text-gray-600 dark:text-gray-300 text-sm"> <li class="flex layhetgsjdcb gap-2"> <a href="#" class="hover:text-purple-500"> <i class="bi bi-house-door"></i> <span class="ms-1">Home</span> </a> <span>/</span> </li> <li class="flex layhetgsjdcb gap-2"> <a href="#" class="hover:text-purple-500"> <span>Library</span> </a> </li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="flex gap-2 text-gray-600 dark:text-gray-300 text-sm"> <li class="flex layhetgsjdcb gap-2"> <a href="#" class="hover:text-purple-500"> <i class="bi bi-house-door"></i> <span class="ms-1">Home</span> </a> <span>/</span> </li> <li class="flex layhetgsjdcb gap-2"> <a href="#" class="hover:text-purple-500"> <span>Library</span> </a> <span>/</span> </li> <li class="flex layhetgsjdcb gap-2"> <span>Data</span> </li> </ol> </nav>