Breadcrumb
Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website. Check out code for detail of usage.
<ul class="flex flex-wrap items-center space-x-2">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Home</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Elements</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Breadcrumb</li>
</ul>
Separators
Separators can be svg or any HTML chars. Check out code for detail of usage.
<ul class="flex flex-wrap items-center space-x-2">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Home</a
>
<span> ⇒ </span>
</li>
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Elements</a
>
<span> ⇒ </span>
</li>
<li>Breadcrumb</li>
</ul>
<ul class="flex flex-wrap items-center space-x-2">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Home</a
>
<span> · </span>
</li>
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Elements</a
>
<span> · </span>
</li>
<li>Breadcrumb</li>
</ul>
<ul class="flex flex-wrap items-center space-x-2">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Home</a
>
<span class="text-xs font-light"> | </span>
</li>
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Elements</a
>
<span class="text-xs font-light"> | </span>
</li>
<li>Breadcrumb</li>
</ul>
<ul class="flex flex-wrap items-center space-x-2">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Home</a
>
<span class="text-xs font-light"> / </span>
</li>
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Elements</a
>
<span class="text-xs font-light"> / </span>
</li>
<li>Breadcrumb</li>
</ul>
<ul class="flex flex-wrap items-center space-x-2">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Home</a
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
</li>
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Elements</a
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
</li>
<li>Breadcrumb</li>
</ul>
With Icon
Breadcrumb can have an icon. Check out code for detail of usage.
- Elements
-
Calendar
<ul class="flex flex-wrap items-center space-x-2">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
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>
</a>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li class="flex items-center space-x-2">
<a
class="flex items-center space-x-1.5 text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
></path>
</svg>
<span>Elements</span>
</a>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
<div class="flex items-center space-x-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5 text-slate-400 dark:text-navy-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span>Calendar</span>
</div>
</li>
</ul>
Bordered Breadcrumb
Breadcrumb can be bordered. Check out code for detail of usage.
- Elements
-
Calendar
<ul class="flex flex-wrap items-center space-x-2">
<li class="flex items-center space-x-2">
<a
class="rounded-lg border border-slate-200 px-1.5 py-1 leading-none text-primary transition-colors hover:text-primary-focus dark:border-navy-500 dark:text-accent-light dark:hover:text-accent"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
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>
</a>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li class="flex items-center space-x-2">
<a
class="flex items-center space-x-1.5 rounded-lg border border-slate-200 py-1 px-1.5 leading-none text-primary transition-colors hover:text-primary-focus dark:border-navy-500 dark:text-accent-light dark:hover:text-accent"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
></path>
</svg>
<span>Elements</span>
</a>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
<div class="flex items-center space-x-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5 text-slate-400 dark:text-navy-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span>Calendar</span>
</div>
</li>
</ul>