Components
Tailwind CSS Breadcrumbs - Madhuranjan UI
Explore our collection of responsive, SEO-friendly Tailwind CSS Breadcrumbs. These designs enhance user navigation with modern aesthetics, ensuring your site is both engaging and easy to navigate.
Simple Breadcrumb
Experience clean and straightforward navigation with our simple breadcrumb design—ideal for guiding users effortlessly through your site.
1<div class="flex items-center justify-center p-4">
2 <!-- Breadcrumbs -->
3 <nav class="w-full max-w-6xl" aria-label="Breadcrumb">
4 <ol class="flex flex-wrap items-center space-x-1 md:space-x-2">
5 <!-- Home link with Home icon -->
6 <li class="flex items-center">
7 <a href="/" class="flex items-center text-sm font-medium text-blue-600 transition-colors hover:text-blue-800">
8 <svg class="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
9 <path d="M10.707 1.293a1 1 0 00-1.414 0L1 9.586V18a1 1 0 001 1h6a1 1 0 001-1v-4h2v4a1 1 0 001 1h6a1 1 0 001-1V9.586l-8.293-8.293z" />
10 </svg>Breadcrumb with Background
This design features a subtle background that adds visual depth while keeping your navigation clear and modern.
1<div class="bg-blue-900 px-5 py-2 rounded-md m-2 w-fit ">
2 <!-- Breadcrumbs -->
3 <nav class="flex" aria-label="Breadcrumb">
4 <ol class="inline-flex items-center space-x-1 md:space-x-3">
5 <!-- Home link with Home icon -->
6 <li class="inline-flex items-center">
7 <a href="/" class="inline-flex items-center text-white hover:text-gray-300">
8 <svg class="mr-1 h-4 w-4 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
9 <path d="M10.707 1.293a1 1 0 00-1.414 0L1 9.586V18a1 1 0 001 1h6a1 1 0 001-1v-4h2v4a1 1 0 001 1h6a1 1 0 001-1V9.586l-8.293-8.293z" />
10 </svg>Breadcrumb with Slash Separator
Utilize a modern slash separator for a crisp, well-organized breadcrumb that clearly outlines your website hierarchy.
1<div class="bg-gray-50 p-4 dark:bg-gray-900">
2 <nav class="flex" aria-label="Breadcrumb">
3 <ol class="inline-flex items-center space-x-2">
4 <!-- Home -->
5 <li>
6 <a href="/" class="text-blue-700 hover:text-blue-900 dark:text-blue-300 dark:hover:text-blue-100"> Home </a>
7 </li>
8 <li>
9 <span class="text-gray-500 dark:text-gray-400">/</span>
10 </li>Breadcrumb with Icons
Enhance usability by integrating icons into your breadcrumb. This design offers a visually engaging experience while maintaining clear navigation.
1<div class="bg-gray-50 dark:bg-gray-900 p-4">
2 <div class="mx-auto max-w-7xl">
3 <nav class="flex" aria-label="Breadcrumb">
4 <ol class="inline-flex items-center space-x-2 md:space-x-3">
5 <!-- Home -->
6 <li class="inline-flex items-center">
7 <a href="/" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
8 <svg class="w-5 h-5 mr-1.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
9 <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd" />
10 </svg>Stylish Pill-Style Breadcrumb
Add a modern touch with our pill-style breadcrumb that combines sophistication and clarity—perfect for a contemporary website design.
1<div class="p-4">
2 <!-- Container with max-width and centered alignment -->
3 <div class="mx-auto max-w-7xl">
4 <!-- Breadcrumb navigation with pill-style items -->
5 <nav class="flex items-center overflow-x-auto bg-gray-100 dark:bg-gray-800 rounded-full p-1 scrollbar-hide">
6 <!-- Home -->
7 <a href="/" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-full transition-colors whitespace-nowrap">
8 <!-- Home icon -->
9 <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
10 <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd" />