Breadcrumb
Default breadcrumb
html
typescript
<nav flowbiteBreadcrumb>
<ol flowbiteBreadcrumbContent>
<li flowbiteBreadcrumbItem>
<flowbite-icon
name="home"
class="size-4 stroke-2" />
<span class="ml-2">Home</span>
</li>
<li flowbiteBreadcrumbItem>
<flowbite-icon
name="chevron-right"
class="size-4 stroke-2" />
<span class="ml-2">Projects</span>
</li>
<li flowbiteBreadcrumbItem>
<flowbite-icon
name="chevron-right"
class="size-4 stroke-2" />
<span class="ml-2">Flowbite</span>
</li>
</ol>
</nav>Themes
Breadcrumb
{
"host": {
"base": "inline-flex items-center gap-1 rounded-lg px-5 py-3",
"transition ": "",
"solid": {
"on": "border",
"off": "border-none bg-transparent"
},
"color": {
"default": {
"light": "border-gray-300 bg-gray-100",
"dark": "dark:border-gray-900 dark:bg-gray-800"
},
"info": {
"light": "border-blue-300 bg-blue-100",
"dark": "dark:border-blue-900 dark:bg-blue-800"
},
"failure": {
"light": "border-red-300 bg-red-100",
"dark": "dark:border-red-900 dark:bg-red-800"
},
"success": {
"light": "border-green-300 bg-green-100",
"dark": "dark:border-green-900 dark:bg-green-800"
},
"warning": {
"light": "border-yellow-300 bg-yellow-100",
"dark": "dark:border-yellow-900 dark:bg-yellow-800"
},
"primary": {
"light": "border-primary-300 bg-primary-100",
"dark": "dark:border-primary-900 dark:bg-primary-800"
}
}
}
}Breadcrumb content
{
"host": {
"base": "inline-flex items-center space-x-1 md:space-x-2",
"transition ": ""
}
}Breadcrumb item
{
"host": {
"base": "group inline-flex items-center justify-between text-sm font-medium data-hover:cursor-pointer",
"transition ": "",
"color": {
"default": {
"light": "text-gray-700 data-hover:text-gray-900",
"dark": "dark:text-gray-100 dark:data-hover:text-white"
},
"info": {
"light": "text-blue-700 data-hover:text-blue-900",
"dark": "dark:text-blue-100 dark:data-hover:text-blue-300"
},
"failure": {
"light": "text-red-700 data-hover:text-red-900",
"dark": "dark:text-red-100 dark:data-hover:text-red-300"
},
"success": {
"light": "text-green-700 data-hover:text-green-900",
"dark": "dark:text-green-100 dark:data-hover:text-green-300"
},
"warning": {
"light": "text-yellow-700 data-hover:text-yellow-900",
"dark": "dark:text-yellow-100 dark:data-hover:text-yellow-300"
},
"primary": {
"light": "data-hover:text-primary-900 text-primary-700",
"dark": "dark:text-primary-100 dark:data-hover:text-primary-300"
}
}
}
}