Breadcrumb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-2 text-sm overflow-x-auto max-w-full -mx-1 px-1 pb-2">
    <li>
      <a href="#" class="text-gray-500 hover:text-gray-700 shrink-0 whitespace-nowrap transition-colors">Home</a>
    </li>
    <li class="text-gray-400 shrink-0">/</li>
    <li>
      <a href="#" class="text-gray-500 hover:text-gray-700 shrink-0 whitespace-nowrap transition-colors">Products</a>
    </li>
    <li class="text-gray-400 shrink-0">/</li>
    <li>
      <a href="#" class="text-gray-500 hover:text-gray-700 shrink-0 whitespace-nowrap transition-colors">Electronics</a>
    </li>
    <li class="text-gray-400 shrink-0">/</li>
    <li class="text-gray-900 font-medium shrink-0 whitespace-nowrap" aria-current="page">Smartphones</li>
  </ol>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12

# Breadcrumb

Breadcrumb navigation trail.

## Usage
```bash
npx devsnips add Tailwind/Components/Navigation/breadcrumb
```
Copy from `code.html`. Prefer `nav` + list semantics.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`