Breadcrumb Components

Beautiful, responsive breadcrumb navigation components built with TailwindCSS. Perfect for showing page hierarchy and improving user navigation. Copy, paste, and customize for React, Vue, or HTML.

1. Simple Arrow Breadcrumb

Clean breadcrumb with arrow separators and hover effects, perfect for most applications.

<nav aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 text-sm">
    <li>
      <a href="#" class="text-gray-500 hover:text-violet transition-colors">Home</a>
    </li>
    <li>
      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </li>
    <li>
      <a href="#" class="text-gray-500 hover:text-violet transition-colors">Products</a>
    </li>
    <li>
      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </li>
    <li>
      <a href="#" class="text-gray-500 hover:text-violet transition-colors">Electronics</a>
    </li>
    <li>
      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </li>
    <li>
      <span class="text-gray-900 font-medium">Smartphones</span>
    </li>
  </ol>
</nav>
<template>
  <nav aria-label="Breadcrumb">
    <ol class="flex items-center space-x-2 text-sm">
      <li v-for="(item, index) in breadcrumbs" :key="index" class="flex items-center">
        <template v-if="index > 0">
          <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </template>
        <a v-if="item.href && index !== breadcrumbs.length - 1" 
           :href="item.href" 
           class="text-gray-500 hover:text-violet transition-colors">
          {{ item.label }}
        </a>
        <span v-else class="text-gray-900 font-medium">
          {{ item.label }}
        </span>
      </li>
    </ol>
  </nav>
</template>

<script setup>
const props = defineProps({
  breadcrumbs: {
    type: Array,
    default: () => [
      { label: 'Home', href: '/' },
      { label: 'Products', href: '/products' },
      { label: 'Electronics', href: '/products/electronics' },
      { label: 'Smartphones' }
    ]
  }
})
</script>
import React from 'react'

const SimpleArrowBreadcrumb = ({ breadcrumbs = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Electronics', href: '/products/electronics' },
  { label: 'Smartphones' }
] }) => {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center space-x-2 text-sm">
        {breadcrumbs.map((item, index) => (
          <li key={index} className="flex items-center">
            {index > 0 && (
              <svg className="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
              </svg>
            )}
            {item.href && index !== breadcrumbs.length - 1 ? (
              <a href={item.href} className="text-gray-500 hover:text-violet transition-colors">
                {item.label}
              </a>
            ) : (
              <span className="text-gray-900 font-medium">
                {item.label}
              </span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}

export default SimpleArrowBreadcrumb

2. Modern Pill Breadcrumb

Stylish breadcrumb with pill-shaped background and smooth transitions.

<nav aria-label="Breadcrumb" class="inline-flex items-center bg-gray-100 rounded-full p-1">
  <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-600 hover:bg-white hover:text-violet transition-all duration-200">
    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5v14l11-7z"></path>
    </svg>
    Home
  </a>
  <span class="text-gray-400 mx-1">/</span>
  <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-600 hover:bg-white hover:text-violet transition-all duration-200">
    Blog
  </a>
  <span class="text-gray-400 mx-1">/</span>
  <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-600 hover:bg-white hover:text-violet transition-all duration-200">
    Technology
  </a>
  <span class="text-gray-400 mx-1">/</span>
  <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-violet text-white">
    Web Development
  </span>
</nav>
<template>
  <nav aria-label="Breadcrumb" class="inline-flex items-center bg-gray-100 rounded-full p-1">
    <template v-for="(item, index) in breadcrumbs" :key="index">
      <a v-if="item.href && index !== breadcrumbs.length - 1" 
         :href="item.href" 
         class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-600 hover:bg-white hover:text-violet transition-all duration-200">
        <svg v-if="item.icon" class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon"></path>
        </svg>
        {{ item.label }}
      </a>
      <span v-else-if="index === breadcrumbs.length - 1" class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-violet text-white">
        {{ item.label }}
      </span>
      <span v-if="index < breadcrumbs.length - 1" class="text-gray-400 mx-1">/</span>
    </template>
  </nav>
</template>

<script setup>
const props = defineProps({
  breadcrumbs: {
    type: Array,
    default: () => [
      { label: 'Home', href: '/', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z' },
      { label: 'Blog', href: '/blog' },
      { label: 'Technology', href: '/blog/technology' },
      { label: 'Web Development' }
    ]
  }
})
</script>
import React from 'react'

const ModernPillBreadcrumb = ({ breadcrumbs = [
  { label: 'Home', href: '/', icon: true },
  { label: 'Blog', href: '/blog' },
  { label: 'Technology', href: '/blog/technology' },
  { label: 'Web Development' }
] }) => {
  return (
    <nav aria-label="Breadcrumb" className="inline-flex items-center bg-gray-100 rounded-full p-1">
      {breadcrumbs.map((item, index) => (
        <React.Fragment key={index}>
          {item.href && index !== breadcrumbs.length - 1 ? (
            <a href={item.href} className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-600 hover:bg-white hover:text-violet transition-all duration-200">
              {item.icon && (
                <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 5v14l11-7z" />
                </svg>
              )}
              {item.label}
            </a>
          ) : (
            <span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-violet text-white">
              {item.label}
            </span>
          )}
          {index < breadcrumbs.length - 1 && (
            <span className="text-gray-400 mx-1">/</span>
          )}
        </React.Fragment>
      ))}
    </nav>
  )
}

export default ModernPillBreadcrumb

3. Neobrutalist Breadcrumb

Bold neobrutalist design with thick borders, sharp edges, and vibrant colors.

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-2 text-sm font-bold">
    <li>
      <a href="#" class="inline-block px-4 py-2 bg-[#ffde59] border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all duration-150">
        HOME
      </a>
    </li>
    <li class="flex items-center">
      <div class="w-0 h-0 border-l-[12px] border-l-black border-y-[12px] border-y-transparent"></div>
    </li>
    <li>
      <a href="#" class="inline-block px-4 py-2 bg-[#ff5c5c] border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all duration-150 text-white">
        SHOP
      </a>
    </li>
    <li class="flex items-center">
      <div class="w-0 h-0 border-l-[12px] border-l-black border-y-[12px] border-y-transparent"></div>
    </li>
    <li>
      <a href="#" class="inline-block px-4 py-2 bg-[#4ade80] border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all duration-150">
        CATEGORY
      </a>
    </li>
    <li class="flex items-center">
      <div class="w-0 h-0 border-l-[12px] border-l-black border-y-[12px] border-y-transparent"></div>
    </li>
    <li>
      <span class="inline-block px-4 py-2 bg-violet border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] text-white font-black">
        PRODUCT
      </span>
    </li>
  </ol>
</nav>
<template>
  <nav aria-label="Breadcrumb">
    <ol class="flex items-center gap-2 text-sm font-bold">
      <template v-for="(item, index) in breadcrumbs" :key="index">
        <li>
          <a v-if="item.href && index !== breadcrumbs.length - 1" 
             :href="item.href" 
             :class="`inline-block px-4 py-2 ${item.bgColor} border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all duration-150 ${item.textColor}`">
            {{ item.label }}
          </a>
          <span v-else 
                :class="`inline-block px-4 py-2 ${item.bgColor} border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] ${item.textColor} font-black`">
            {{ item.label }}
          </span>
        </li>
        <li v-if="index < breadcrumbs.length - 1" class="flex items-center">
          <div class="w-0 h-0 border-l-[12px] border-l-black border-y-[12px] border-y-transparent"></div>
        </li>
      </template>
    </ol>
  </nav>
</template>

<script setup>
const props = defineProps({
  breadcrumbs: {
    type: Array,
    default: () => [
      { label: 'HOME', href: '/', bgColor: 'bg-[#ffde59]', textColor: 'text-black' },
      { label: 'SHOP', href: '/shop', bgColor: 'bg-[#ff5c5c]', textColor: 'text-white' },
      { label: 'CATEGORY', href: '/category', bgColor: 'bg-[#4ade80]', textColor: 'text-black' },
      { label: 'PRODUCT', bgColor: 'bg-violet', textColor: 'text-white' }
    ]
  }
})
</script>
import React from 'react'

const NeobrutalistBreadcrumb = ({ breadcrumbs = [
  { label: 'HOME', href: '/', bgColor: 'bg-[#ffde59]', textColor: 'text-black' },
  { label: 'SHOP', href: '/shop', bgColor: 'bg-[#ff5c5c]', textColor: 'text-white' },
  { label: 'CATEGORY', href: '/category', bgColor: 'bg-[#4ade80]', textColor: 'text-black' },
  { label: 'PRODUCT', bgColor: 'bg-violet', textColor: 'text-white' }
] }) => {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center gap-2 text-sm font-bold">
        {breadcrumbs.map((item, index) => (
          <React.Fragment key={index}>
            <li>
              {item.href && index !== breadcrumbs.length - 1 ? (
                <a href={item.href} 
                   className={`inline-block px-4 py-2 ${item.bgColor} border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all duration-150 ${item.textColor}`}>
                  {item.label}
                </a>
              ) : (
                <span className={`inline-block px-4 py-2 ${item.bgColor} border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] ${item.textColor} font-black`}>
                  {item.label}
                </span>
              )}
            </li>
            {index < breadcrumbs.length - 1 && (
              <li className="flex items-center">
                <div className="w-0 h-0 border-l-[12px] border-l-black border-y-[12px] border-y-transparent"></div>
              </li>
            )}
          </React.Fragment>
        ))}
      </ol>
    </nav>
  )
}

export default NeobrutalistBreadcrumb

4. Minimal Dots Breadcrumb

Clean minimal design with dot separators, perfect for modern interfaces.

<nav aria-label="Breadcrumb">
  <ol class="flex items-center space-x-4 text-sm">
    <li>
      <a href="#" class="text-gray-600 hover:text-violet transition-colors font-medium">Dashboard</a>
    </li>
    <li class="w-1.5 h-1.5 bg-gray-300 rounded-full"></li>
    <li>
      <a href="#" class="text-gray-600 hover:text-violet transition-colors font-medium">Projects</a>
    </li>
    <li class="w-1.5 h-1.5 bg-gray-300 rounded-full"></li>
    <li>
      <a href="#" class="text-gray-600 hover:text-violet transition-colors font-medium">Web Development</a>
    </li>
    <li class="w-1.5 h-1.5 bg-gray-300 rounded-full"></li>
    <li>
      <span class="text-violet font-semibold">E-commerce Platform</span>
    </li>
  </ol>
</nav>
<template>
  <nav aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4 text-sm">
      <template v-for="(item, index) in breadcrumbs" :key="index">
        <li>
          <a v-if="item.href && index !== breadcrumbs.length - 1" 
             :href="item.href" 
             class="text-gray-600 hover:text-violet transition-colors font-medium">
            {{ item.label }}
          </a>
          <span v-else class="text-violet font-semibold">
            {{ item.label }}
          </span>
        </li>
        <li v-if="index < breadcrumbs.length - 1" class="w-1.5 h-1.5 bg-gray-300 rounded-full"></li>
      </template>
    </ol>
  </nav>
</template>

<script setup>
const props = defineProps({
  breadcrumbs: {
    type: Array,
    default: () => [
      { label: 'Dashboard', href: '/dashboard' },
      { label: 'Projects', href: '/projects' },
      { label: 'Web Development', href: '/projects/web-development' },
      { label: 'E-commerce Platform' }
    ]
  }
})
</script>
import React from 'react'

const MinimalDotsBreadcrumb = ({ breadcrumbs = [
  { label: 'Dashboard', href: '/dashboard' },
  { label: 'Projects', href: '/projects' },
  { label: 'Web Development', href: '/projects/web-development' },
  { label: 'E-commerce Platform' }
] }) => {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center space-x-4 text-sm">
        {breadcrumbs.map((item, index) => (
          <React.Fragment key={index}>
            <li>
              {item.href && index !== breadcrumbs.length - 1 ? (
                <a href={item.href} className="text-gray-600 hover:text-violet transition-colors font-medium">
                  {item.label}
                </a>
              ) : (
                <span className="text-violet font-semibold">
                  {item.label}
                </span>
              )}
            </li>
            {index < breadcrumbs.length - 1 && (
              <li className="w-1.5 h-1.5 bg-gray-300 rounded-full"></li>
            )}
          </React.Fragment>
        ))}
      </ol>
    </nav>
  )
}

export default MinimalDotsBreadcrumb

5. Card Style Breadcrumb

Elegant card-based breadcrumb with subtle shadows and rounded corners.

<nav aria-label="Breadcrumb" class="inline-flex items-center bg-white border border-gray-200 rounded-lg shadow-sm p-2">
  <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md transition-colors group">
    <svg class="w-4 h-4 mr-2 text-gray-400 group-hover:text-violet" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5v14l11-7z"></path>
    </svg>
    Home
  </a>
  <svg class="w-4 h-4 text-gray-300 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  </svg>
  <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
    Documentation
  </a>
  <svg class="w-4 h-4 text-gray-300 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  </svg>
  <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
    Components
  </a>
  <svg class="w-4 h-4 text-gray-300 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  </svg>
  <span class="px-3 py-2 text-sm font-semibold text-violet bg-violet/10 rounded-md">
    Breadcrumb
  </span>
</nav>
<template>
  <nav aria-label="Breadcrumb" class="inline-flex items-center bg-white border border-gray-200 rounded-lg shadow-sm p-2">
    <template v-for="(item, index) in breadcrumbs" :key="index">
      <a v-if="item.href && index !== breadcrumbs.length - 1" 
         :href="item.href" 
         class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md transition-colors group">
        <svg v-if="item.icon" class="w-4 h-4 mr-2 text-gray-400 group-hover:text-violet" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon"></path>
        </svg>
        {{ item.label }}
      </a>
      <span v-else class="px-3 py-2 text-sm font-semibold text-violet bg-violet/10 rounded-md">
        {{ item.label }}
      </span>
      <svg v-if="index < breadcrumbs.length - 1" class="w-4 h-4 text-gray-300 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </template>
  </nav>
</template>

<script setup>
const props = defineProps({
  breadcrumbs: {
    type: Array,
    default: () => [
      { label: 'Home', href: '/', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5v14l11-7z' },
      { label: 'Documentation', href: '/docs' },
      { label: 'Components', href: '/docs/components' },
      { label: 'Breadcrumb' }
    ]
  }
})
</script>
import React from 'react'

const CardStyleBreadcrumb = ({ breadcrumbs = [
  { label: 'Home', href: '/', icon: true },
  { label: 'Documentation', href: '/docs' },
  { label: 'Components', href: '/docs/components' },
  { label: 'Breadcrumb' }
] }) => {
  return (
    <nav aria-label="Breadcrumb" className="inline-flex items-center bg-white border border-gray-200 rounded-lg shadow-sm p-2">
      {breadcrumbs.map((item, index) => (
        <React.Fragment key={index}>
          {item.href && index !== breadcrumbs.length - 1 ? (
            <a href={item.href} className="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md transition-colors group">
              {item.icon && (
                <svg className="w-4 h-4 mr-2 text-gray-400 group-hover:text-violet" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 5v14l11-7z" />
                </svg>
              )}
              {item.label}
            </a>
          ) : (
            <span className="px-3 py-2 text-sm font-semibold text-violet bg-violet/10 rounded-md">
              {item.label}
            </span>
          )}
          {index < breadcrumbs.length - 1 && (
            <svg className="w-4 h-4 text-gray-300 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
            </svg>
          )}
        </React.Fragment>
      ))}
    </nav>
  )
}

export default CardStyleBreadcrumb

6. Gradient Breadcrumb

Eye-catching gradient design with smooth color transitions and modern styling.

<nav aria-label="Breadcrumb">
  <ol class="flex items-center space-x-1">
    <li>
      <a href="#" class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-gradient-to-r from-violet to-purple-600 text-white hover:from-violet/90 hover:to-purple-600/90 transition-all duration-200 shadow-lg hover:shadow-xl">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5v14l11-7z"></path>
        </svg>
        Home
      </a>
    </li>
    <li>
      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </li>
    <li>
      <a href="#" class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:from-blue-500/90 hover:to-cyan-500/90 transition-all duration-200 shadow-lg hover:shadow-xl">
        Learning
      </a>
    </li>
    <li>
      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </li>
    <li>
      <a href="#" class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-gradient-to-r from-emerald-500 to-teal-500 text-white hover:from-emerald-500/90 hover:to-teal-500/90 transition-all duration-200 shadow-lg hover:shadow-xl">
        Courses
      </a>
    </li>
    <li>
      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </li>
    <li>
      <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-bold bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg">
        JavaScript Basics
      </span>
    </li>
  </ol>
</nav>
<template>
  <nav aria-label="Breadcrumb">
    <ol class="flex items-center space-x-1">
      <template v-for="(item, index) in breadcrumbs" :key="index">
        <li>
          <a v-if="item.href && index !== breadcrumbs.length - 1" 
             :href="item.href" 
             :class="`inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium ${item.gradient} text-white hover:${item.hoverGradient} transition-all duration-200 shadow-lg hover:shadow-xl`">
            <svg v-if="item.icon" class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon"></path>
            </svg>
            {{ item.label }}
          </a>
          <span v-else 
                :class="`inline-flex items-center px-4 py-2 rounded-lg text-sm font-bold ${item.gradient} text-white shadow-lg`">
            {{ item.label }}
          </span>
        </li>
        <li v-if="index < breadcrumbs.length - 1">
          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </li>
      </template>
    </ol>
  </nav>
</template>

<script setup>
const props = defineProps({
  breadcrumbs: {
    type: Array,
    default: () => [
      { 
        label: 'Home', 
        href: '/', 
        gradient: 'bg-gradient-to-r from-violet to-purple-600',
        hoverGradient: 'from-violet/90 hover:to-purple-600/90',
        icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5v14l11-7z'
      },
      { 
        label: 'Learning', 
        href: '/learning', 
        gradient: 'bg-gradient-to-r from-blue-500 to-cyan-500',
        hoverGradient: 'from-blue-500/90 hover:to-cyan-500/90'
      },
      { 
        label: 'Courses', 
        href: '/courses', 
        gradient: 'bg-gradient-to-r from-emerald-500 to-teal-500',
        hoverGradient: 'from-emerald-500/90 hover:to-teal-500/90'
      },
      { 
        label: 'JavaScript Basics',
        gradient: 'bg-gradient-to-r from-orange-500 to-red-500'
      }
    ]
  }
})
</script>
import React from 'react'

const GradientBreadcrumb = ({ breadcrumbs = [
  { 
    label: 'Home', 
    href: '/', 
    gradient: 'bg-gradient-to-r from-violet to-purple-600',
    hoverGradient: 'hover:from-violet/90 hover:to-purple-600/90',
    icon: true
  },
  { 
    label: 'Learning', 
    href: '/learning', 
    gradient: 'bg-gradient-to-r from-blue-500 to-cyan-500',
    hoverGradient: 'hover:from-blue-500/90 hover:to-cyan-500/90'
  },
  { 
    label: 'Courses', 
    href: '/courses', 
    gradient: 'bg-gradient-to-r from-emerald-500 to-teal-500',
    hoverGradient: 'hover:from-emerald-500/90 hover:to-teal-500/90'
  },
  { 
    label: 'JavaScript Basics',
    gradient: 'bg-gradient-to-r from-orange-500 to-red-500'
  }
] }) => {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center space-x-1">
        {breadcrumbs.map((item, index) => (
          <React.Fragment key={index}>
            <li>
              {item.href && index !== breadcrumbs.length - 1 ? (
                <a href={item.href} 
                   className={`inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium ${item.gradient} text-white ${item.hoverGradient} transition-all duration-200 shadow-lg hover:shadow-xl`}>
                  {item.icon && (
                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 5v14l11-7z" />
                    </svg>
                  )}
                  {item.label}
                </a>
              ) : (
                <span className={`inline-flex items-center px-4 py-2 rounded-lg text-sm font-bold ${item.gradient} text-white shadow-lg`}>
                  {item.label}
                </span>
              )}
            </li>
            {index < breadcrumbs.length - 1 && (
              <li>
                <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                </svg>
              </li>
            )}
          </React.Fragment>
        ))}
      </ol>
    </nav>
  )
}

export default GradientBreadcrumb

7. Dropdown Breadcrumb

Smart breadcrumb with dropdown menus for long paths, perfect for deep navigation structures.

<nav aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 text-sm">
    <li>
      <a href="#" class="text-gray-600 hover:text-violet transition-colors font-medium">Home</a>
    </li>
    <li class="text-gray-400">/</li>
    <li class="relative">
      <button class="flex items-center text-gray-600 hover:text-violet transition-colors font-medium">
        ...
        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </button>
      <div class="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg py-2 min-w-[160px] z-10 hidden">
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-violet">Products</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-violet">Categories</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-violet">Electronics</a>
      </div>
    </li>
    <li class="text-gray-400">/</li>
    <li>
      <a href="#" class="text-gray-600 hover:text-violet transition-colors font-medium">Laptops</a>
    </li>
    <li class="text-gray-400">/</li>
    <li>
      <span class="text-violet font-semibold">MacBook Pro</span>
    </li>
  </ol>
</nav>
<template>
  <nav aria-label="Breadcrumb">
    <ol class="flex items-center space-x-2 text-sm">
      <template v-for="(item, index) in visibleBreadcrumbs" :key="index">
        <li>
          <a v-if="item.href && index !== visibleBreadcrumbs.length - 1" 
             :href="item.href" 
             class="text-gray-600 hover:text-violet transition-colors font-medium">
            {{ item.label }}
          </a>
          <div v-else-if="item.type === 'dropdown'" class="relative">
            <button @click="item.open = !item.open" 
                    class="flex items-center text-gray-600 hover:text-violet transition-colors font-medium">
              ...
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </button>
            <div v-show="item.open" 
                 @click.away="item.open = false"
                 class="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg py-2 min-w-[160px] z-10">
              <a v-for="hiddenItem in hiddenBreadcrumbs" 
                 :key="hiddenItem.label"
                 :href="hiddenItem.href" 
                 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-violet">
                {{ hiddenItem.label }}
              </a>
            </div>
          </div>
          <span v-else class="text-violet font-semibold">
            {{ item.label }}
          </span>
        </li>
        <li v-if="index < visibleBreadcrumbs.length - 1" class="text-gray-400">/</li>
      </template>
    </ol>
  </nav>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  breadcrumbs: {
    type: Array,
    default: () => [
      { label: 'Home', href: '/' },
      { label: 'Products', href: '/products' },
      { label: 'Categories', href: '/categories' },
      { label: 'Electronics', href: '/electronics' },
      { label: 'Laptops', href: '/laptops' },
      { label: 'MacBook Pro' }
    ]
  },
  maxVisible: {
    type: Number,
    default: 4
  }
})

const visibleBreadcrumbs = computed(() => {
  if (props.breadcrumbs.length <= props.maxVisible) {
    return props.breadcrumbs
  }
  
  const result = [props.breadcrumbs[0]]
  result.push({ type: 'dropdown', open: false })
  result.push(...props.breadcrumbs.slice(-2))
  return result
})

const hiddenBreadcrumbs = computed(() => {
  if (props.breadcrumbs.length <= props.maxVisible) return []
  return props.breadcrumbs.slice(1, -2)
})
</script>
import React, { useState, useMemo } from 'react'

const DropdownBreadcrumb = ({ 
  breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Categories', href: '/categories' },
    { label: 'Electronics', href: '/electronics' },
    { label: 'Laptops', href: '/laptops' },
    { label: 'MacBook Pro' }
  ],
  maxVisible = 4
}) => {
  const [dropdownOpen, setDropdownOpen] = useState(false)

  const { visibleBreadcrumbs, hiddenBreadcrumbs } = useMemo(() => {
    if (breadcrumbs.length <= maxVisible) {
      return { visibleBreadcrumbs: breadcrumbs, hiddenBreadcrumbs: [] }
    }
    
    const visible = [breadcrumbs[0]]
    visible.push({ type: 'dropdown' })
    visible.push(...breadcrumbs.slice(-2))
    
    const hidden = breadcrumbs.slice(1, -2)
    
    return { visibleBreadcrumbs: visible, hiddenBreadcrumbs: hidden }
  }, [breadcrumbs, maxVisible])

  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center space-x-2 text-sm">
        {visibleBreadcrumbs.map((item, index) => (
          <React.Fragment key={index}>
            <li>
              {item.type === 'dropdown' ? (
                <div className="relative">
                  <button 
                    onClick={() => setDropdownOpen(!dropdownOpen)}
                    className="flex items-center text-gray-600 hover:text-violet transition-colors font-medium">
                    ...
                    <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                    </svg>
                  </button>
                  {dropdownOpen && (
                    <div className="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg py-2 min-w-[160px] z-10">
                      {hiddenBreadcrumbs.map((hiddenItem, hiddenIndex) => (
                        <a key={hiddenIndex} 
                           href={hiddenItem.href} 
                           className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-violet">
                          {hiddenItem.label}
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              ) : item.href && index !== visibleBreadcrumbs.length - 1 ? (
                <a href={item.href} className="text-gray-600 hover:text-violet transition-colors font-medium">
                  {item.label}
                </a>
              ) : (
                <span className="text-violet font-semibold">
                  {item.label}
                </span>
              )}
            </li>
            {index < visibleBreadcrumbs.length - 1 && (
              <li className="text-gray-400">/</li>
            )}
          </React.Fragment>
        ))}
      </ol>
    </nav>
  )
}

export default DropdownBreadcrumb

🚀 How to Use These Components

✅ Installation

  • • Copy the HTML/Vue/JSX code
  • • Ensure TailwindCSS is installed
  • • Import Heroicons (for Vue/JSX)
  • • Customize colors and spacing

🎨 Customization

  • • Change colors with TailwindCSS classes
  • • Modify spacing and padding
  • • Add icons or remove separators
  • • Adjust hover effects and transitions

Pro Tip: Breadcrumbs improve navigation and SEO. Use structured data markup for better search engine understanding.

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More