Breadcrumb Rails Components
A few examples of breadcrumb components for your Ruby on Rails application. Built with Tailwind CSS.
Examples
Basic Breadcrumb
A simple breadcrumb navigation with slash separators.
<div class="w-full flex justify-center">
<nav aria-label="Breadcrumb" class="flex justify-center overflow-x-auto whitespace-nowrap">
<ol class="flex items-center space-x-2 text-sm w-full">
<li>
<a href="#" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
Home
</a>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<a href="#" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
Products
</a>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<a href="#" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
Electronics
</a>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<span class="text-neutral-900 dark:text-neutral-100 font-medium" aria-current="page">
Headphones
</span>
</li>
</ol>
</nav>
</div>Breadcrumb with Icons
Breadcrumb navigation with home icon and chevron separators.
<div class="w-full flex justify-center">
<nav aria-label="Breadcrumb" class="flex justify-center overflow-x-auto whitespace-nowrap">
<ol class="flex items-center space-x-1 text-sm w-full">
<li>
<a href="#" class="flex items-center text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M7.94127 1.36281C8.56694 0.887445 9.4333 0.886569 10.0591 1.36312L15.3088 5.35287C15.7448 5.68398 16 6.20008 16 6.746V14.25C16 15.7692 14.7692 17 13.25 17H10.75V13.251C10.75 12.699 10.302 12.251 9.75 12.251H8.25C7.698 12.251 7.25 12.699 7.25 13.251V17H4.75C3.23079 17 2 15.7692 2 14.25V6.746C2 6.19867 2.2559 5.68346 2.69155 5.3526L7.94127 1.36281Z"></path></g></svg>
<span class="sr-only">Home</span>
</a>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<a href="#" class="ml-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800">
Dashboard
</a>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<a href="#" class="ml-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800">
Projects
</a>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-1 text-neutral-900 dark:text-neutral-100 font-medium p-1.5" aria-current="page">
Project Alpha
</span>
</li>
</ol>
</nav>
</div>Breadcrumb with Background
Breadcrumb navigation with background styling and custom separators.
<div class="w-full flex justify-center">
<nav aria-label="Breadcrumb" class="flex justify-center w-full">
<ol class="flex items-center space-x-1 text-sm bg-neutral-50 dark:bg-neutral-900 px-4 py-2 rounded-lg overflow-x-auto whitespace-nowrap">
<li>
<a href="#" class="text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 transition-colors font-medium">
Home
</a>
</li>
<li class="flex items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<a href="#" class="text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 transition-colors font-medium">
Documentation
</a>
</li>
<li class="flex items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<a href="#" class="text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 transition-colors font-medium">
Components
</a>
</li>
<li class="flex items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-neutral-900 dark:text-neutral-100 font-semibold" aria-current="page">
Breadcrumb
</span>
</li>
</ol>
</nav>
</div>Breadcrumb with Truncation
Breadcrumb navigation with ellipsis truncation for long paths.
<div class="w-full flex justify-center">
<nav aria-label="Breadcrumb" class="flex justify-center overflow-x-auto whitespace-nowrap">
<ol class="flex items-center space-x-2 text-sm w-full">
<li>
<a href="#" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
Home
</a>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
...
</button>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<a href="#" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
Category
</a>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<a href="#" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
Subcategory
</a>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<span class="text-neutral-900 dark:text-neutral-100 font-medium truncate max-w-[200px]" aria-current="page" title="Very Long Product Name That Might Need Truncation">
Very Long Product Name That Might Need Truncation
</span>
</li>
</ol>
</nav>
</div>Breadcrumb with Dropdown
Breadcrumb navigation with dropdown menu for condensed navigation paths. This example uses the dropdown component stimulus controllers.
<div class="flex justify-center w-full whitespace-nowrap">
<nav aria-label="Breadcrumb" class="flex justify-center whitespace-nowrap">
<ol class="flex justify-center items-center space-x-2 text-sm w-full">
<li>
<a href="#" class="flex gap-1.5 items-center text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M7.94127 1.36281C8.56694 0.887445 9.4333 0.886569 10.0591 1.36312L15.3088 5.35287C15.7448 5.68398 16 6.20008 16 6.746V14.25C16 15.7692 14.7692 17 13.25 17H10.75V13.251C10.75 12.699 10.302 12.251 9.75 12.251H8.25C7.698 12.251 7.25 12.699 7.25 13.251V17H4.75C3.23079 17 2 15.7692 2 14.25V6.746C2 6.19867 2.2559 5.68346 2.69155 5.3526L7.94127 1.36281Z"></path></g></svg>
<span class="hidden sm:block">Home</span>
</a>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<!-- Dropdown for hidden breadcrumb items -->
<div class="relative" data-controller="dropdown-popover">
<button
class="flex items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600"
data-dropdown-popover-target="button"
data-action="dropdown-popover#toggle"
aria-label="Show more breadcrumb items"
>
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
</svg>
</button>
<dialog
class="absolute z-10 w-fit rounded-lg border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100"
data-controller="menu"
data-dropdown-popover-target="menu"
autofocus="false"
data-action="click@document->dropdown-popover#closeOnClickOutside
close->menu#reset
keydown.up->menu#prev keydown.down->menu#next
keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
>
<div class="flex flex-col p-1" role="menu">
<a href="#" class="flex items-center rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" tabindex="-1">
Electronics
</a>
<a href="#" class="flex items-center rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" tabindex="-1">
Audio & Sound
</a>
</div>
</dialog>
</div>
</li>
<li class="flex items-center space-x-2">
<span class="text-neutral-400 dark:text-neutral-600">/</span>
<span class="flex items-center gap-1 text-neutral-900 dark:text-neutral-100 font-medium" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="m15.75,13.5c-.4141,0-.75-.3359-.75-.75v-3.75c0-3.3086-2.6914-6-6-6s-6,2.6914-6,6v3.75c0,.4141-.3359.75-.75.75s-.75-.3359-.75-.75v-3.75C1.5,4.8643,4.8643,1.5,9,1.5s7.5,3.3643,7.5,7.5v3.75c0,.4141-.3359.75-.75.75Z" stroke-width="0"></path><path d="m5.25,9c-2.0679,0-3.75,1.6821-3.75,3.75s1.6821,3.75,3.75,3.75c.9648,0,1.75-.7852,1.75-1.75v-4c0-.9648-.7852-1.75-1.75-1.75Z" stroke-width="0"></path><path d="m12.75,9c-.9648,0-1.75.7852-1.75,1.75v4c0,.9648.7852,1.75,1.75,1.75,2.0679,0,3.75-1.6821,3.75-3.75s-1.6821-3.75-3.75-3.75Z" stroke-width="0"></path></g></svg>
<span class="hidden sm:block">Headphones</span>
</span>
</li>
</ol>
</nav>
</div>