Default Breadcrumb
-
Home
-
Home
-
/
-
Library
-
Home
-
/
-
Library
-
/
-
Data
<div class="preview-content">
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 mb-3">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 mb-3">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
<li class="inline-flex items-center">/</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Library
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
<li class="inline-flex items-center">/</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Library
</a>
</li>
<li class="inline-flex items-center">/</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Data
</li>
</ol>
</div>
Arrow Style
<div class="preview-content">
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 mb-3">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 mb-3">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-chevrons-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Library
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-chevrons-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Library
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-chevrons-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Data
</li>
</ol>
</div>
Pipe Style
<div class="preview-content">
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 mb-3">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 mb-3">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Library
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Library
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Data
</li>
</ol>
</div>
Breadcrumb with Icon
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
Library
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Data
</li>
</ol>
Colored Breadcrumb
-
Home
-
/
-
App Center
-
/
-
Application
-
Home
-
/
-
App Center
-
/
-
Application
-
Home
-
/
-
App Center
-
/
-
Application
-
Home
-
/
-
App Center
-
/
-
Application
-
Home
-
/
-
App Center
-
/
-
Application
-
Home
-
/
-
App Center
-
/
-
Application
<div class="preview-content">
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 bg-primary p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center font-medium text-white" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 bg-info p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center font-medium text-white" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 bg-dark p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center font-medium text-white" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 bg-warning p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center font-medium text-white" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 bg-success p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center font-medium text-white" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 bg-danger p-3 rounded-lg">
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center">
<a class="flex items-center text-white" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center text-white">/</li>
<li class="inline-flex items-center font-medium text-white" aria-current="page">
Application
</li>
</ol>
</div>
Ghost Breadcrumb
<div>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 border border-primary bg-primary-50 p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 border border-info bg-info-50 p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 border border-dark bg-gray-50 p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 border border-warning bg-warning-50 p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 border border-success bg-success-50 p-3 rounded-lg mb-4">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Application
</li>
</ol>
<ol class="flex flex-wrap items-center whitespace-nowrap gap-2 border border-danger bg-danger-50 p-3 rounded-lg">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
<i class="icon icon-house me-2"></i> Home
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-600 hover:text-primary" href="#">
App Center
</a>
</li>
<li class="inline-flex items-center">
<i class="icon icon-arrow-right"></i>
</li>
<li class="inline-flex items-center font-medium text-dark" aria-current="page">
Application
</li>
</ol>
</div>
'/%3e%3cpath%20d='M19.3718%208.44531C13.2794%208.77342%208.42255%2013.8273%208.42255%2020.0001V34.643C8.42255%2036.336%207.05011%2037.7085%205.35714%2037.7085C3.66416%2037.7085%202.29171%2036.336%202.29171%2034.643V22.0124C5.86298%2012.0352%2013.2293%208.65628%2019.3718%208.44531Z'%20fill='url(%23paint1_linear_1134_24406)'/%3e%3cpath%20d='M24.111%2018.6378L20.8502%2019.8353L19.6368%2023.0902L18.4392%2019.8294L15.1843%2018.616L18.4451%2017.4184L19.6586%2014.1636L20.8561%2017.4243L24.111%2018.6378Z'%20fill='url(%23paint2_linear_1134_24406)'/%3e%3cpath%20d='M26.0749%2014.0398L24.7502%2014.5263L24.2573%2015.8486L23.7708%2014.5239L22.4485%2014.0309L23.7732%2013.5444L24.2661%2012.2221L24.7526%2013.5468L26.0749%2014.0398Z'%20fill='url(%23paint3_linear_1134_24406)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_1134_24406'%20x1='21.5672'%20y1='33.2429'%20x2='17.6287'%20y2='7.94212'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_1134_24406'%20x1='5.99286'%20y1='14.1017'%20x2='11.3239'%20y2='34.0911'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
