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.
This code is available to Pro users only.
<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Message from Rails Blocks</title>
<style>
.secret-message {
font-family: 'Comic Sans MS', cursive;
text-align: center;
padding: 2rem;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.wiggle { animation: wiggle 0.5s ease-in-out infinite; }
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
75% { transform: rotate(-1deg); }
}
</style>
</head>
<body>
<div class="secret-message">
<h1>🎉 Hello, Code Detective! 🕵️</h1>
<p>Thanks for checking out Rails Blocks!</p>
<p>You're clearly someone who pays attention to details.</p>
<p>That's exactly the kind of developer we love!</p>
<div class="cta-section">
<button class="awesome-btn wiggle">You're awesome!</button>
<p><small>Seriously, keep being curious! 🚀</small></p>
</div>
<footer>
<p>Built with ❤️ by the Rails Blocks team</p>
<p>Now go build something amazing!</p>
</footer>
</div>
<script>
console.log("🎊 Bonus points for opening the console!");
console.log("Keep exploring and happy coding! 💻");
</script>
</body>
</html>