Docs
Breadcrumb
Breadcrumb
Displays a hierarchy of links to the current page or resource in an application.
Examples
Basic Usage
<ol class="kt-breadcrumb">
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link">Home</a>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link">Components</a>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<span class="kt-breadcrumb-page">Breadcrumb</span>
</li>
</ol>
Icon
<ol class="kt-breadcrumb">
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-house"
aria-hidden="true"
>
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
></path></svg
></a>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link">Components</a>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<span class="kt-breadcrumb-page">Breadcrumb</span>
</li>
</ol>
Separator
<ol class="kt-breadcrumb">
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-house"
aria-hidden="true"
>
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
></path></svg
></a>
</li>
<li class="kt-breadcrumb-separator">
<div class="mx-1 rounded-full size-1 bg-mono/30"></div>
</li>
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link">Components</a>
</li>
<li class="kt-breadcrumb-separator">
<div class="mx-1 rounded-full size-1 bg-mono/30"></div>
</li>
<li class="kt-breadcrumb-item">
<span class="kt-breadcrumb-page">Breadcrumb</span>
</li>
</ol>
Dropdown
<ol class="kt-breadcrumb">
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-house"
aria-hidden="true"
>
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
></path></svg
></a>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<div data-kt-dropdown="true" data-kt-dropdown-trigger="click">
<button
class="kt-btn kt-btn-icon kt-btn-dim"
data-kt-dropdown-toggle="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-ellipsis"
aria-hidden="true"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div class="kt-dropdown-menu w-40" data-kt-dropdown-menu="true">
<ul class="kt-dropdown-menu-sub">
<li><a href="#" class="kt-dropdown-menu-link">Documentation</a></li>
<li><a href="#" class="kt-dropdown-menu-link">Themes</a></li>
<li><a href="#" class="kt-dropdown-menu-link">Github</a></li>
</ul>
</div>
</div>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link">Components</a>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<span class="kt-breadcrumb-page">Breadcrumb</span>
</li>
</ol>
Card
<div class="flex">
<div class="kt-card">
<div class="kt-card-content px-3.5 p-2">
<ol class="kt-breadcrumb">
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-house"
aria-hidden="true"
>
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
></path></svg
></a>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<a href="#" class="kt-breadcrumb-link">Components</a>
</li>
<li class="kt-breadcrumb-separator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-right"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</li>
<li class="kt-breadcrumb-item">
<span class="kt-breadcrumb-page">Breadcrumb</span>
</li>
</ol>
</div>
</div>
</div>