Breadcrumb Component
A breadcrumb in a webpage is a navigational aid that displays the user's location within a website's hierarchy. It typically appears as a horizontal trail of links, starting with the homepage and leading to the current page. Breadcrumbs can help users orient themselves within the website's structure and easily navigate back to previous pages.
Icon Breadcrumb
1<div class="flex items-center overflow-x-auto whitespace-nowrap py-4">
2 <a href="#" class="text-gray-600 focus:text-blue-600">
3 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
4 <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
5 </svg>
6 </a>
7
8 <span class="mx-5 text-gray-500 rtl:-scale-x-100">
9 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
10 <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" />
11 </svg>
12 </span>
13
14 <a href="#" class="-px-2 flex items-center text-gray-600 focus:text-blue-600 hover:underline">
15 <svg xmlns="http://www.w3.org/2000/svg" class="mx-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
16 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
17 </svg>
18
19 <span class="mx-2 font-semibold">Account</span>
20 </a>
21
22 <span class="mx-5 text-gray-500 rtl:-scale-x-100">
23 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
24 <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" />
25 </svg>
26 </span>
27
28 <a href="#" class="-px-2 flex items-center text-gray-600 focus:text-blue-600 hover:underline">
29 <svg xmlns="http://www.w3.org/2000/svg" class="mx-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
30 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
31 </svg>
32
33 <span class="mx-2 font-semibold">Profile</span>
34 </a>
35
36 <span class="mx-5 text-gray-500 rtl:-scale-x-100">
37 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
38 <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" />
39 </svg>
40 </span>
41
42 <a href="#" class="-px-2 flex items-center text-gray-600 focus:text-blue-600 hover:underline">
43 <svg xmlns="http://www.w3.org/2000/svg" class="mx-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
44 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
45 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
46 </svg>
47
48 <span class="mx-2 font-semibold">Settings</span>
49 </a>
50</div>Normal Breadcrumb
1<div class="my-4">
2<div class="inline-flex flex-wrap">
3 <a class="breadcrumb-link text-slate-500 font-semibold focus:text-blue-600 hover:text-blue-600 px-3 py-2 transition-colors duration-300 ease-in-out" href="#">
4 <span>Dashboard</span>
5 </a>
6</div>
7</div>
8
9<div class="my-4">
10<div class="inline-flex items-center flex-wrap">
11 <a class="breadcrumb-link text-slate-500 font-semibold focus:text-blue-600 hover:text-blue-600 px-3 py-2 transition-colors duration-300 ease-in-out" href="#">
12 <span>Dashboard</span>
13 </a>
14 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mx-3 text-slate-500">
15 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
16 </svg>
17 <a class="breadcrumb-link text-slate-500 font-semibold focus:text-blue-600 hover:text-blue-600 px-3 py-2 transition-colors duration-300 ease-in-out" href="#">
18 <span>Components</span>
19 </a>
20</div>
21</div>
22
23<div class="my-4">
24<div class="inline-flex items-center flex-wrap">
25 <a class="breadcrumb-link text-slate-500 font-semibold focus:text-blue-600 hover:text-blue-600 px-3 py-2 transition-colors duration-300 ease-in-out" href="#">
26 <span>Dashboard</span>
27 </a>
28 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mx-3 text-slate-500">
29 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
30 </svg>
31 <a class="breadcrumb-link text-slate-500 font-semibold focus:text-blue-600 hover:text-blue-600 px-3 py-2 transition-colors duration-300 ease-in-out" href="#">
32 <span>Components</span>
33 </a>
34 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mx-3 text-slate-500">
35 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
36 </svg>
37 <a class="breadcrumb-link text-slate-500 font-semibold px-3 py-2 transition-colors duration-300 ease-in-out hover:text-blue-600 focus:text-blue-600" href="#">
38 <span>Breadcrumbs</span>
39 </a>
40</div>
41</div>Boxed Breadcrumb
1<!-- Breadcumbs 1 -->
2<div class="my-4 mx-4">
3 <div class="inline-flex flex-wrap">
4 <a class="text-slate-500 font-semibold bg-gray-200 px-5 py-2 rounded-l-lg rounded-r-lg hover:text-white hover:ease-in-out hover:bg-blue-600 focus:bg-blue-600 transition focus:ease-in-out focus:text-white" href="#" >
5 <span>Dashboard</span>
6 </a>
7 </div>
8</div>
9
10<!-- Breadcumbs 2 -->
11<div class="my-4 mx-4">
12 <div class="inline-flex items-center flex-wrap">
13 <a class="text-slate-500 font-semibold bg-gray-200 px-5 py-2 rounded-l-lg rounded-r-lg hover:text-white hover:ease-in-out hover:bg-blue-600 focus:bg-blue-600 transition focus:ease-in-out focus:text-white" href="">
14 <span>Dashboard</span>
15 </a>
16 <svg
17 xmlns="http://www.w3.org/2000/svg"
18 fill="none"
19 viewBox="0 0 24 24"
20 stroke-width="1.5"
21 stroke="currentColor"
22 class="w-4 h-4 mx-3 text-slate-500"
23 >
24 <path
25 stroke-linecap="round"
26 stroke-linejoin="round"
27 d="M8.25 4.5l7.5 7.5-7.5 7.5"
28 />
29 </svg>
30 <a class="text-slate-500 font-semibold bg-gray-200 px-5 py-2 rounded-l-lg rounded-r-lg hover:text-white hover:ease-in-out hover:bg-blue-600 focus:bg-blue-600 transition focus:ease-in-out focus:text-white" href="">
31 <span>Components</span>
32 </a>
33 </div>
34</div>
35
36<!-- Breadcumbs 3 -->
37<div class="my-4 mx-4">
38 <div class="inline-flex items-center flex-wrap gap-y-4">
39 <a class="text-slate-500 font-semibold bg-gray-200 px-5 py-2 rounded-l-lg rounded-r-lg hover:text-white hover:ease-in-out hover:bg-blue-600 focus:bg-blue-600 transition focus:ease-in-out focus:text-white" href="#">
40 <span>Dashboard</span>
41 </a>
42 <svg
43 xmlns="http://www.w3.org/2000/svg"
44 fill="none"
45 viewBox="0 0 24 24"
46 stroke-width="1.5"
47 stroke="currentColor"
48 class="w-4 h-4 mx-3 text-slate-500"
49 >
50 <path
51 stroke-linecap="round"
52 stroke-linejoin="round"
53 d="M8.25 4.5l7.5 7.5-7.5 7.5"
54 />
55 </svg>
56 <a class="text-slate-500 font-semibold bg-gray-200 px-5 py-2 rounded-l-lg rounded-r-lg hover:text-white hover:ease-in-out hover:bg-blue-600 focus:bg-blue-600 transition focus:ease-in-out focus:text-white" href="#">
57 <span>Components</span>
58 </a>
59 <svg
60 xmlns="http://www.w3.org/2000/svg"
61 fill="none"
62 viewBox="0 0 24 24"
63 stroke-width="1.5"
64 stroke="currentColor"
65 class="w-4 h-4 mx-3 text-slate-500"
66 >
67 <path
68 stroke-linecap="round"
69 stroke-linejoin="round"
70 d="M8.25 4.5l7.5 7.5-7.5 7.5"
71 />
72 </svg>
73 <a class="text-slate-500 font-semibold bg-gray-200 px-5 py-2 rounded-l-lg rounded-r-lg hover:text-white hover:ease-in-out hover:bg-blue-600 focus:bg-blue-600 transition focus:ease-in-out focus:text-white" href="#">
74 <span>Breadcumbs</span>
75 </a>
76 </div>
77</div>