Breadcrumb — Tailwind Component

What it does

Capabilities

Standard separator style
Icon-enhanced variant
Collapsed variant
Aria-current page indicator
SEO-friendly structure

Preview

Live component

Interactive preview

Open preview

9:41 100%

devsnips.site/library/tailwind/components/navigation/breadcrumb/

fluid · no fixed width 100%

No dependencies Production-ready

Install

Add to your project

terminal

npx devsnips add Tailwind/Components/Navigation/breadcrumb

registry path: Tailwind/Components/Navigation/breadcrumb

Source

Implementation

code.html

<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>

# 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`

17 lines UTF-8 · LF · Spaces: 2

DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/navigation/breadcrumb

Prompt instruction

I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/navigation/breadcrumb/

Install: npx devsnips add
Tailwind/Components/Navigation/breadcrumb

This is the Breadcrumb — Hierarchical path navigation showing user's location. Multiple styles with separators, icons, and collapsed variants.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI