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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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>
ENG
ARB
GER
