Components
Breadcrumbs are useful for keeping track of your location in a website's hierarchy and making it easy to go back if you need to.
<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
<ol class="flex flex-wrap items-center space-x-3">
<li>
<a href="#" class="hover:underline hover:text-slate-600 dark:hover:text-slate-400">Home</a>
</li>
<li class="flex space-x-3">
<div class="flex items-center">
<span class="text-slate-300 dark:text-slate-500">/</span>
</div>
<a href="#" class="hover:underline hover:text-slate-600 dark:hover:text-slate-400">Library</a>
</li>
<li class="flex space-x-3">
<div class="flex items-center">
<span class="text-slate-300 dark:text-slate-500">/</span>
</div>
<a href="#" aria-current="page" class="text-primary-500 dark:text-primary-500">Data</a>
</li>
</ol>
</nav>
<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
<ol class="flex flex-wrap items-center space-x-3 list-none m-0 p-0">
<li>
<%= link_to "Home", "#", class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
</li>
<li class="flex space-x-3">
<div class="flex items-center">
<span class="text-slate-300 dark:text-slate-500">/</span>
</div>
<%= link_to "Library", "#", class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
</li>
<li class="flex space-x-3">
<div class="flex items-center">
<span class="text-slate-300 dark:text-slate-500">/</span>
</div>
<%= link_to "Data", "#", class: "text-primary-500 dark:text-primary-500", data: { "aria-current": "page" } %>
</li>
</ol>
</nav>
%nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
%ol.flex.flex-wrap.items-center.space-x-3.list-none.m-0.p-0
%li
= link_to "Home", "#", class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
%li.flex.space-x-3
.flex.items-center
%span.text-slate-300.dark:text-slate-500 /
= link_to "Library", "#", class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
%li.flex.space-x-3
.flex.items-center
%span.text-slate-300.dark:text-slate-500 /
= link_to "Data", "#", class: "text-primary-500 dark:text-primary-500", data: { "aria-current": "page" }
<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 text-sm bg-white rounded items-center border-slate-300/80 border overflow-hidden sm:py-0 py-4 dark:bg-slate-800/70 dark:border-slate-700">
<ol class="flex items-center justify-star space-x-6 px-4 list-none">
<li class="sm:h-12 flex items-center justify-center">
<a href="#" class="hover:underline hover:text-slate-600 inline-block pl-2 group">
<%= icon "home", class: "size-5 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-200" %>
<span class="sr-only">Home</span>
</a>
</li>
<li class="sm:h-12 flex items-center space-x-2 justify-center">
<span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
<a href="#" class="hover:text-slate-700 sm:pl-4 dark:hover:text-slate-200 text-slate-600 dark:text-slate-300">Library</a>
</li>
<li class="sm:h-12 flex items-center space-x-2 justify-center">
<span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
<a href="#" aria-current="page" class="text-indigo-600 dark:text-indigo-400 sm:pl-4">Data</a>
</li>
</ol>
</nav>
<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 text-sm bg-white rounded items-center border-slate-300/80 border overflow-hidden sm:py-0 py-4 dark:bg-slate-800/70 dark:border-slate-700">
<ol class="flex items-center justify-star space-x-6 px-4 list-none">
<li class="sm:h-12 flex items-center justify-center">
<%= link_to "#", class: "hover:underline hover:text-slate-600 inline-block pl-2 group" do %>
<%= icon "home", class: "size-5 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-200" %>
<span class="sr-only">Home</span>
<% end %>
</li>
<li class="sm:h-12 flex items-center space-x-2 justify-center">
<span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
<%= link_to "Library", "#", class: "hover:text-slate-700 sm:pl-4 dark:hover:text-slate-200 text-slate-600 dark:text-slate-300" %>
</li>
<li class="sm:h-12 flex items-center space-x-2 justify-center">
<span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
<a href="#" aria-current="page" class="text-indigo-600 dark:text-indigo-400 sm:pl-4">Data</a>
</li>
</ol>
</nav>
%nav.my-6.font-medium.flex.text-slate-500.text-sm.bg-white.rounded.items-center.border.overflow-hidden.sm:py-0.py-4.dark:border-slate-700(aria-label="breadcrumb" class="border-slate-300/80 dark:bg-slate-800/70")
%ol.flex.items-center.justify-star.space-x-6.px-4.list-none
%li.sm:h-12.flex.items-center.justify-center
= link_to "#", class: "hover:underline hover:text-slate-600 inline-block pl-2 group" do
= icon "home", class: "size-5 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-200"
%span.sr-only Home
%li.sm:h-12.flex.items-center.space-x-2.justify-center
%span.transform.h-14.w-px.flex-shrink-0.sm:block.hidden(class="rotate-[20deg] bg-slate-300/50 dark:bg-slate-600/80")
= link_to "Library", "#", class: "hover:text-slate-700 sm:pl-4 dark:hover:text-slate-200 text-slate-600 dark:text-slate-300"
%li.sm:h-12.flex.items-center.space-x-2.justify-center
%span.transform.h-14.w-px.flex-shrink-0.sm:block.hidden(class="rotate-[20deg] bg-slate-300/50 dark:bg-slate-600/80")
%a.text-indigo-600.dark:text-indigo-400.sm:pl-4(aria-current="page" href="#") Data