---
title: "Breadcrumb"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Breadcrumb using semantic HTML for accessible, SEO-friendly navigation trails. Supports custom separators, icons, and responsive layouts."
url: https://frutjam.com/vi/components/breadcrumb
---

# Breadcrumb Component

 Breadcrumb components show navigation hierarchy and help users understand their location within a website. Built with semantic HTML nav elements and ARIA landmarks for accessibility, breadcrumbs improve usability by allowing users to quickly navigate to parent sections. The Frutjam breadcrumb system automatically renders separators and supports custom separators for flexible styling.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học              | Kiểu            | Sự miêu tả                                 |
| -------------------- | --------------- | ------------------------------------------ |
| breadcrumb           | Căn cứ          | Navigation container for breadcrumb trail  |
| breadcrumb-list      | Công cụ sửa đổi | Ordered list of breadcrumb items           |
| breadcrumb-item      | Công cụ sửa đổi | Individual list item in the breadcrumb     |
| breadcrumb-link      | Công cụ sửa đổi | Anchor element styled as a breadcrumb link |
| breadcrumb-separator | Công cụ sửa đổi | Separator element between items            |
| breadcrumb-current   | Công cụ sửa đổi | Marks the current (active) page item       |

## Cách sử dụng cơ bản

If no separator is provided, an arrow is shown between breadcrumb items automatically.

## Breadcrumb Separators

### Breadcrumb with Text Separator

```html
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current" aria-current="page">Badge</span>
    </li>
  </ol>
</nav>
```

### Breadcrumb with Icon Separator

```html
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <span class="breadcrumb-current" aria-current="page">Button</span>
    </li>
  </ol>
</nav>
```

## Breadcrumb Accessibility

To ensure breadcrumbs are accessible to screen readers:

- Wrap the structure in a `<nav>` element with an `aria-label="Breadcrumb"`.
- The last item (current page) should use `aria-current="page"` and preferably be a `<span>` rather than a link.
- Separators should be ignored by screen readers (often handled via CSS or `aria-hidden="true"` if using a physical element).