Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần Breadcrumb

Cập nhật lần cuối:

Điều hướng đường dẫn CSS Tailwind chỉ có CSS ​​với các dấu phân cách tùy chỉnh và đánh dấu mốc có thể truy cập. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.

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ả
breadcrumbCăn cứNavigation container for breadcrumb trail
breadcrumb-listCông cụ sửa đổiOrdered list of breadcrumb items
breadcrumb-itemCông cụ sửa đổiIndividual list item in the breadcrumb
breadcrumb-linkCông cụ sửa đổiAnchor element styled as a breadcrumb link
breadcrumb-separatorCông cụ sửa đổiSeparator element between items
breadcrumb-currentCông cụ sửa đổiMarks 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav className="breadcrumb" aria-label="Breadcrumb">
  <ol className="breadcrumb-list">
    <li className="breadcrumb-item">
      <a href="/" className="breadcrumb-link">Home</a>
    </li>
    <li className="breadcrumb-item">
      <span className="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

Breadcrumb Separators

Breadcrumb with Text Separator

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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).

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp vụn bánh mì chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP