Basic Breadcrumbs - Tailwind Component
A breadcrumb is a type of secondary navigation scheme that reveals the user’s location in a website, it made with Tailwind CSS.
breadcrumbs
Loading component...
159 lines
<div class="min-w-screen min-h-screen flex items-center justify-center bg-gray-100 py-6">
<div class="container">
<div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
<div class="w-full">
<div class="py-3 px-5 mb-4 bg-blue-100 text-blue-900 text-sm rounded-md border border-blue-200">
<ul class="flex items-center">
<li><a href="#" class="underline font-semibold">Home</a></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</li>
<li><a href="#" class="underline font-semibold">Project</a></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</li>
<li>Detail project</li>
</ul>
</div>
<div class="py-3 px-5 mb-4 bg-gray-100 text-gray-900 rounded-md text-sm border border-gray-200">
<ul class="flex">
<li><a href="#" class="underline font-semibold">Home</a></li>
<li><span class="mx-2">/</span></li>
<li><a href="#" class="underline font-semibold">Project</a></li>
<li><span class="mx-2">/</span></li>
<li>Detail project</li>
</ul>
</div>
<div class="py-3 px-5 mb-4 bg-green-100 text-green-900 text-sm rounded-md border border-green-200">
<ul class="flex items-center">
<li><a href="#" class="underline font-semibold">Home</a></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</li>
<li><a href="#" class="underline font-semibold">Project</a></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</li>
<li>Deatil project</li>
</ul>
</div>
<div class="py-3 px-5 mb-4 bg-red-100 text-red-900 text-sm rounded-md border border-red-200">
<ul class="flex">
<li><a href="#" class="underline font-semibold">Home</a></li>
<li><span class="mx-2">/</span></li>
<li><a href="#" class="underline font-semibold">...</a></li>
<li><span class="mx-2">/</span></li>
<li><a href="#" class="underline font-semibold">Project</a></li>
<li><span class="mx-2">/</span></li>
<li>Detail project</li>
</ul>
</div>
<div class="py-3 px-5 mb-4 bg-yellow-100 text-yellow-900 text-sm rounded-md border border-yellow-200">
<ul class="flex items-center">
<li><a href="#" class="underline">Home</a></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</li>
<li><a href="#" class="underline">...</a></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</li>
<li><a href="#" class="underline">Pages</a></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</li>
<li>Sample page</li>
</ul>
</div>
<div class="py-3 px-5 mb-4 bg-purple-100 text-purple-900 text-sm rounded-md border border-purple-200">
<ul class="flex">
<li><a href="#" class="inline-flex items-center font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Home
</a></li>
<li><span class="mx-2">/</span></li>
<li><a href="#" class="inline-flex items-center font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
<path fill-rule="evenodd"
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
clip-rule="evenodd" />
</svg>
Report
</a></li>
<li><span class="mx-2">/</span></li>
<li class="inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z"
clip-rule="evenodd" />
</svg>
Export
</li>
</ul>
</div>
<div class="py-3 px-5 mb-4 bg-gray-300 text-gray-700 rounded-md text-sm border border-gray-400">
<ul class="flex">
<li><a href="#" class="inline-flex items-center font-semibold hover:text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Home</a></li>
<li><span class="mx-2">|</span></li>
<li><a href="#" class="font-semibold hover:text-gray-900">Report</a></li>
<li><span class="mx-2">|</span></li>
<li>Export</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
</style>