- Elements
- Breadcrumbs
Default
Code
<!-- default -->
<ol class="flex text-gray-500 font-semibold dark:text-white-dark">
<li>
<a href="javascript:;" class="hover:text-gray-500/70 dark:hover:text-white-dark/70">
<svg> ... </svg>
</a>
</li>
<li class="before:content-['/'] before:px-1.5"><a href="javascript:;">Components</a></li>
<li class="before:content-['/'] before:px-1.5"><a href="javascript:;" class="text-black dark:text-white-light hover:text-black/70 dark:hover:text-white-light/70">UI Kit</a></li>
</ol>
Basic
Code
<!-- basic -->
<ol class="flex text-gray-500 font-semibold dark:text-white-dark">
<li><a href="javascript:;">Components</a></li>
<li class="before:content-['/'] before:px-1.5"><a href="javascript:;" class="text-black dark:text-white-light hover:text-black/70 dark:hover:text-white-light/70">UI Kit</a></li>
</ol>
Arrowed
Code
<!-- arrowed -->
<ol class="flex text-primary font-semibold dark:text-white-dark">
<li class="bg-[#ebedf2] rounded-tl-md rounded-bl-md dark:bg-[#1b2e4b]"><a href="javascript:;" class="p-1.5 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 relative h-full flex items-center before:absolute ltr:before:-right-[15px] rtl:before:-left-[15px] rtl:before:rotate-180 before:inset-y-0 before:m-auto before:w-0 before:h-0 before:border-[16px] before:border-l-[15px] before:border-r-0 before:border-t-transparent before:border-b-transparent before:border-l-[#ebedf2] before:z-[1] dark:before:border-l-[#1b2e4b] hover:text-primary/70 dark:hover:text-white-dark/70">Home</a></li>
<li class="bg-[#ebedf2] dark:bg-[#1b2e4b]"><a class="bg-primary text-white-light p-1.5 ltr:pl-6 rtl:pr-6 ltr:pr-2 rtl:pl-2 relative h-full flex items-center before:absolute ltr:before:-right-[15px] rtl:before:-left-[15px] rtl:before:rotate-180 before:inset-y-0 before:m-auto before:w-0 before:h-0 before:border-[16px] before:border-l-[15px] before:border-r-0 before:border-t-transparent before:border-b-transparent before:border-l-primary before:z-[1]">Components</a></li>
<li class="bg-[#ebedf2] dark:bg-[#1b2e4b]"><a href="javascript:;" class="p-1.5 px-3 ltr:pl-6 rtl:pr-6 relative h-full flex items-center before:absolute ltr:before:-right-[15px] rtl:before:-left-[15px] rtl:before:rotate-180 before:inset-y-0 before:m-auto before:w-0 before:h-0 before:border-[16px] before:border-l-[15px] before:border-r-0 before:border-t-transparent before:border-b-transparent before:border-l-[#ebedf2] before:z-[1] dark:before:border-l-[#1b2e4b] hover:text-primary/70 dark:hover:text-white-dark/70">UI Kit</a></li>
</ol>
Dotted Seperators
Code
<!-- dotted seperators -->
<ol class="flex text-gray-500 font-semibold dark:text-white-dark">
<li><a href="javascript:;" class="hover:text-gray-500/70 dark:hover:text-white-dark/70">Home</a></li>
<li class="before:w-1 before:h-1 before:rounded-full before:bg-primary before:inline-block before:relative before:-top-0.5 before:mx-4"><a href="javascript:;" class="text-primary">Components</a></li>
<li class="before:w-1 before:h-1 before:rounded-full before:bg-primary before:inline-block before:relative before:-top-0.5 before:mx-4"><a href="javascript:;" class="hover:text-gray-500/70 dark:hover:text-white-dark/70">UI Kit</a></li>
</ol>
With Icons
Code
<!-- with icons -->
<ol class="flex items-center flex-wrap text-gray-500 font-semibold dark:text-white-dark gap-y-4">
<li>
<a href="javascript:;" class="p-2.5 border border-gray-500/20 rounded-md shadow flex items-center justify-center dark:border-0 dark:bg-[#191e3a] hover:text-gray-500/70 dark:hover:text-white-dark/70">
<svg> ... </svg>
</a>
</li>
<li class="flex items-center before:w-1 before:h-1 before:rounded-full before:bg-primary before:inline-block before:relative before:-top-0.5 before:mx-4">
<a href="javascript:;" class="p-2.5 border border-gray-500/20 rounded-md shadow flex items-center justify-center text-primary dark:border-0 dark:bg-[#191e3a]">
<svg> ... </svg>
Components
</a>
</li>
<li class="flex items-center before:w-1 before:h-1 before:rounded-full before:bg-primary before:inline-block before:relative before:-top-0.5 before:mx-4">
<a class="p-2.5 border border-gray-500/20 rounded-md shadow flex items-center justify-center dark:border-0 dark:bg-[#191e3a] hover:text-gray-500/70 dark:hover:text-white-dark/70" href="javascript:;">
<svg> ... </svg>
UI Kit
</a>
</li>
</ol>
© . Vristo All rights reserved.