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="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</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 text-neutral-400 dark:text-neutral-600" 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 text-neutral-400 dark:text-neutral-600" 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 text-neutral-400 dark:text-neutral-600" 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 text-neutral-400 dark:text-neutral-600" 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 text-neutral-400 dark:text-neutral-600" 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 text-neutral-400 dark:text-neutral-600" 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.
- Home
-
/
- / Headphones
<div class="flex justify-center w-full whitespace-nowrap">
<ol class="flex justify-center items-center space-x-2 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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</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" data-dropdown-popover-placement-value="bottom-start">
<button
class="flex outline-none 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"
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"
style="margin-right: initial;"
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>
<a href="#" class="flex items-center gap-1 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" 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>
</a>
</li>
</ol>
</div>