Chevron left
RailsUI

Components

Breadcrumbs

Theme

Themes/hound/logo.svg

Hound

Framework

Tailwind CSS logo

Tailwind CSS

Quicklinks

Quickly navigate to different breadcrumb patterns below

Breadcrumbs help with everything from search engine optimization to easier navigation.

Breadcrumbs

Simple

<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-indigo-600 dark:text-indigo-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-indigo-600 dark:text-indigo-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-indigo-600 dark:text-indigo-500", data: { "aria-current": "page" }

Breadcrumbs

Contained

<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">
  <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", classes: "w-5 h-5 text-slate-400 group-hover:text-slate-600" %>
        <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 flex-shrink-0 sm:block hidden"></span>
      <a href="#" class="hover:underline hover:text-slate-600 sm:pl-4">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 flex-shrink-0 sm:block hidden"></span>
      <a href="#" aria-current="page" class="text-indigo-600 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">
  <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", classes: "w-5 h-5 text-slate-400 group-hover:text-slate-600" %>
        <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 flex-shrink-0 sm:block hidden"></span>
      <%= link_to "Library", "#", class: "hover:underline hover:text-slate-600 sm:pl-4" %>
    </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 flex-shrink-0 sm:block hidden"></span>
      <%= link_to "Data", "#", data: { "aria-current": "page" }, class: "text-indigo-600 sm:pl-4" %>
    </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{"aria-label" => "breadcrumb", class: "border-slate-300/80"}
  %ol.flex.items-center.justify-star.space-x-6.px-4.list-none
    %li.sm:h-12.flex.items-center.justify-center
      %a.hover:underline.hover:text-slate-600.inline-block.pl-2.group{href: "#"}
        = icon "home", classes: "w-5 h-5 text-slate-400 group-hover:text-slate-600"
        %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"}
      = link_to "Library", "#", class: "hover:underline hover:text-slate-600 sm:pl-4"
    %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"}
      = link_to "Data", "#", data: { "aria-current": "page" }, class: "text-indigo-600 sm:pl-4"

Breadcrumbs

Dark simple

<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-200 text-sm">
  <ol class="flex flex-wrap items-center space-x-3 list-none m-0 p-0">
    <li>
      <a href="#" class="hover:underline hover:text-slate-400">Home</a>
    </li>
    <li class="flex space-x-3">
      <div class="flex items-center">
        <span class="text-slate-500">/</span>
      </div>
      <a href="#" class="hover:underline hover:text-slate-400">Library</a>
    </li>
    <li class="flex space-x-3">
      <div class="flex items-center">
        <span class="text-slate-500">/</span>
      </div>
      <a href="#" aria-current="page" class="text-indigo-500">Data</a>
    </li>
  </ol>
</nav>
<nav aria-label="breadcrumb" class="my-6 font-medium flex 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-400" %>
    </li>
    <li class="flex space-x-3">
      <div class="flex items-center">
        <span class="text-slate-500">/</span>
      </div>
      <%= link_to "Library", "#", class: "hover:underline hover:text-slate-400" %>
    </li>
    <li class="flex space-x-3">
      <div class="flex items-center">
        <span class="text-slate-500">/</span>
      </div>
      <%= link_to "Home", "#", class: "text-indigo-500", data: { "aria-current": "page" } %>
    </li>
  </ol>
</nav>
%nav.my-6.font-medium.flex.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-400"
    %li.flex.space-x-3
      .flex.items-center
        %span.text-slate-500 /
      = link_to "Library", "#", class: "hover:underline hover:text-slate-400"
    %li.flex.space-x-3
      .flex.items-center
        %span.text-slate-500 /
      = link_to "Home", "#", class: "text-indigo-500", data: { "aria-current": "page" }

Breadcrumbs

Dark contained

<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-200 text-sm bg-slate-800 rounded items-center border-slate-600/80 border overflow-hidden sm:py-0 py-4">
  <ol class="flex items-center justify-star space-x-6 px-4">
    <li class="sm:h-12 flex items-center justify-center">
      <a href="#" class="hover:underline hover:text-slate-300 inline-block pl-2 group">
        <%= icon "home", classes: "w-5 h-5 text-slate-400 group-hover:text-slate-300" %>
        <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-500/50 flex-shrink-0 sm:block hidden"></span>
      <a href="#" class="hover:underline hover:text-slate-300 sm:pl-4">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-500/50 flex-shrink-0 sm:block hidden"></span>
      <a href="#" aria-current="page" class="text-indigo-500 sm:pl-4">Data</a>
    </li>
  </ol>
</nav>
<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-200 text-sm bg-slate-800 rounded items-center border-slate-600/80 border overflow-hidden sm:py-0 py-4">
  <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-300 inline-block pl-2 group" do %>
        <%= icon "home", classes: "w-5 h-5 text-slate-400 group-hover:text-slate-300" %>
        <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-500/50 flex-shrink-0 sm:block hidden"></span>
      <%= link_to "Library", "#", class: "hover:underline hover:text-slate-300 inline-block pl-2 group"%>
    </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-500/50 flex-shrink-0 sm:block hidden"></span>
      <%= link_to "Data", "#", class: "text-indigo-500 sm:pl-4", data: { "aria-current": "page" } %>
    </li>
  </ol>
</nav>
%nav.my-6.font-medium.flex.text-slate-200.text-sm.bg-slate-800.rounded.items-center.border.overflow-hidden.sm:py-0.py-4{"aria-label" => "breadcrumb", class: "border-slate-600/80"}
  %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-300 inline-block pl-2 group" do %>
        = icon "home", classes: "w-5 h-5 text-slate-400 group-hover:text-slate-300"
        %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-500/50"}
        = link_to "Library", "#", class: "hover:underline hover:text-slate-300 inline-block pl-2 group"%>
    %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-500/50"}
        = link_to "Data", "#", class: "text-indigo-500 sm:pl-4", data: { "aria-current": "page" }

Badges

Buttons