Tailwind CSS Breadcrumbs Components

## Overview
Breadcrumbs are navigation aids that help users understand their location within a website or application hierarchy. They provide a clear path back to previous pages and enhance overall navigation experience.

## Components

### Basic Breadcrumbs (`breadcrumbs-basic.html`)
A simple implementation with chevron separators that shows the navigation path. Ideal for most websites and applications.

### DaisyUI Style Breadcrumbs (`breadcrumbs-daisyui-style.html`)
Follows the DaisyUI component pattern with slash separators and minimal styling for a clean appearance.

### Breadcrumbs with Icons (`breadcrumbs-with-icons.html`)
Enhances the breadcrumbs with contextual icons for each level, improving visual differentiation between navigation items.

### Max-Width Breadcrumbs (`breadcrumbs-max-width.html`)
Implements a max-width container with horizontal scrolling for long navigation paths, useful for deep site structures.

### Responsive Breadcrumbs (`breadcrumbs-responsive.html`)
Adapts to different screen sizes by hiding less important navigation levels on smaller screens, ensuring good mobile experience.

### Breadcrumbs with Different Separators (`breadcrumbs-separators.html`)
Showcases different separator styles (slash, chevron, dot) to match your design preferences.

## Customization

- **Color scheme**: Modify text and hover colors using Tailwind's color utility classes
- **Spacing**: Adjust margins and padding to fit your layout needs
- **Typography**: Change text size, weight, and font family as needed
- **Separators**: Choose from slashes, chevrons, dots, or create custom separators
- **Responsiveness**: Configure which items appear on different screen sizes using Tailwind's responsive prefixes

Breadcrumbs With Icons

May 19, 2025, 4:17 p.m.

Breadcrumbs With Icons

                            <div class="p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
  <div class="breadcrumbs text-sm">
    <ul class="flex flex-wrap items-center">
      <li class="flex items-center">
        <a href="#" class="inline-flex items-center text-gray-600 hover:text-blue-600 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 stroke-current" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          Home
        </a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="flex items-center">
        <a href="#" class="inline-flex items-center text-gray-600 hover:text-blue-600 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 stroke-current" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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-2h-6l-2-2H5a2 2 0 00-2 2z" />
          </svg>
          Documents
        </a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="flex items-center text-gray-800 font-medium">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 stroke-current" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        Add Document
      </li>
    </ul>
  </div>
</div>

Breadcrumbs Style

May 19, 2025, 4:17 p.m.

Breadcrumbs Style

                            <div class="p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
  <div class="breadcrumbs text-sm">
    <ul class="flex flex-wrap items-center">
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Documents</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="text-gray-800 font-medium">Add Document</li>
    </ul>
  </div>
</div>

Breadcrumbs Separators

May 19, 2025, 8:20 a.m.

Breadcrumbs Separators

                            <div class="space-y-8 p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">

  <div>
    <h3 class="text-sm font-medium text-gray-700 mb-2">u659cu7ebfu5206u9694u7b26</h3>
    <div class="breadcrumbs text-sm">
      <ul class="flex flex-wrap items-center">
        <li class="flex items-center">
          <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
          <span class="mx-2 text-gray-400">/</span>
        </li>
        <li class="flex items-center">
          <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Documents</a>
          <span class="mx-2 text-gray-400">/</span>
        </li>
        <li class="text-gray-800 font-medium">Add Document</li>
      </ul>
    </div>
  </div>
  
  <div>
    <h3 class="text-sm font-medium text-gray-700 mb-2">Title</h3>
    <div class="breadcrumbs text-sm">
      <ul class="flex flex-wrap items-center">
        <li class="flex items-center">
          <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
          <svg class="w-4 h-4 mx-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <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"></path>
          </svg>
        </li>
        <li class="flex items-center">
          <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Documents</a>
          <svg class="w-4 h-4 mx-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <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"></path>
          </svg>
        </li>
        <li class="text-gray-800 font-medium">Add Document</li>
      </ul>
    </div>
  </div>
  
  <div>
    <h3 class="text-sm font-medium text-gray-700 mb-2">Title</h3>
    <div class="breadcrumbs text-sm">
      <ul class="flex flex-wrap items-center">
        <li class="flex items-center">
          <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
          <span class="inline-block w-1.5 h-1.5 bg-gray-400 rounded-full mx-2"></span>
        </li>
        <li class="flex items-center">
          <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Documents</a>
          <span class="inline-block w-1.5 h-1.5 bg-gray-400 rounded-full mx-2"></span>
        </li>
        <li class="text-gray-800 font-medium">Add Document</li>
      </ul>
    </div>
  </div>
</div>

Breadcrumbs Responsive

May 19, 2025, 4:17 p.m.

Breadcrumbs Responsive

                            <div class="p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
  <div class="breadcrumbs text-sm">
    <ul class="flex flex-wrap items-center">
      <!-- 移动设备只显示最后两级 -->
      <li class="hidden sm:flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
          <span class="hidden md:inline">Home</span>
          <span class="md:hidden">H</span>
        </a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="hidden sm:flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
          <span class="hidden md:inline">Documentation</span>
          <span class="md:hidden">Docs</span>
        </a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="hidden md:flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Components</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Navigation</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="text-gray-800 font-medium">Breadcrumbs</li>
    </ul>
  </div>
</div>

Breadcrumbs Max Width

May 19, 2025, 8:20 a.m.

Breadcrumbs Max Width

                            <div class="p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
  <div class="breadcrumbs max-w-xs overflow-x-auto text-sm">
    <ul class="flex items-center whitespace-nowrap">
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Documentation</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Components</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Navigation</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="text-gray-800 font-medium">Breadcrumbs</li>
    </ul>
  </div>
  <p class="text-xs text-gray-500 mt-2">Scroll to view content beyond the maximum width</p>
</div>

Breadcrumbs Basic

May 19, 2025, 4:17 p.m.

Breadcrumbs Basic

                            <div class="p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-1 text-sm text-gray-500">
      <li>
        <a href="#" class="hover:text-blue-600 transition-colors duration-200">
          Home
        </a>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
        <a href="#" class="hover:text-blue-600 transition-colors duration-200 ml-1">
          Documents
        </a>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
        <span class="ml-1 text-gray-700 font-medium">
          Add Document
        </span>
      </li>
    </ol>
  </nav>
</div>