Breadcrumbs
Breadcrumbs components designed with TailwindCSS.
Simple
Screen Size:
<div>
<ol class="flex text-gray-700">
<li class="px-2"><a href="#" class="hover:underline">Home</a></li>
<li class="text-gray-500 select-none">/</li>
<li class="px-2"><a href="#" class="hover:underline">Series</a></li>
<li class="text-gray-500 select-none">/</li>
<li class="px-2 text-indigo-600">Game of thrones</li>
</ol>
<br />
<br />
<ol class="flex text-gray-700">
<li class="px-2"><a href="#" class="hover:underline">Home</a></li>
<li class="text-gray-500 select-none">›</li>
<li class="px-2"><a href="#" class="hover:underline">Series</a></li>
<li class="text-gray-500 select-none">›</li>
<li class="px-2 text-indigo-600">Game of thrones</li>
</ol>
<br />
<br />
<ol class="flex text-gray-700">
<li class="px-2"><a href="#" class="hover:underline">Home</a></li>
<li class="text-gray-500 select-none">→</li>
<li class="px-2"><a href="#" class="hover:underline">Series</a></li>
<li class="text-gray-500 select-none">→</li>
<li class="px-2 text-indigo-600">Game of thrones</li>
</ol>
</div>
With Rounded Background
Screen Size:
<div class="w-full">
<ol class="flex text-gray-700 bg-gray-300 rounded py-2 px-2">
<li class="px-2"><a href="#" class="hover:underline">Home</a></li>
<li class="text-gray-500 select-none">/</li>
<li class="px-2"><a href="#" class="hover:underline">Series</a></li>
<li class="text-gray-500 select-none">/</li>
<li class="px-2 text-indigo-600">Game of thrones</li>
</ol>
<br />
<br />
<ol class="flex text-gray-700 bg-gray-300 rounded py-2 px-2">
<li class="px-2"><a href="#" class="hover:underline">Home</a></li>
<li class="text-gray-500 select-none">›</li>
<li class="px-2"><a href="#" class="hover:underline">Series</a></li>
<li class="text-gray-500 select-none">›</li>
<li class="px-2 text-indigo-600">Game of thrones</li>
</ol>
<br />
<br />
<ol class="flex text-gray-700 bg-gray-300 rounded py-2 px-2">
<li class="px-2"><a href="#" class="hover:underline">Home</a></li>
<li class="text-gray-500 select-none">→</li>
<li class="px-2"><a href="#" class="hover:underline">Series</a></li>
<li class="text-gray-500 select-none">→</li>
<li class="px-2 text-indigo-600">Game of thrones</li>
</ol>
</div>
Designed and built with ♥ by Saleh Mir. Licensed under the MIT License.