---
title: "탐색경로"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-19
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "접근 가능하고 SEO 친화적인 탐색 트레일을 위해 의미론적 HTML을 사용하는 Tailwind CSS Breadcrumb입니다. 사용자 정의 구분 기호, 아이콘 및 반응형 레이아웃을 지원합니다."
url: https://frutjam.com/ko/components/breadcrumb
---

# 탐색경로 구성요소

 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.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class                | 타입       | Description                                |
| -------------------- | -------- | ------------------------------------------ |
| breadcrumb           | Base     | Navigation container for breadcrumb trail  |
| breadcrumb-list      | Modifier | Ordered list of breadcrumb items           |
| breadcrumb-item      | Modifier | Individual list item in the breadcrumb     |
| breadcrumb-link      | Modifier | Anchor element styled as a breadcrumb link |
| breadcrumb-separator | Modifier | Separator element between items            |
| breadcrumb-current   | Modifier | Marks the current (active) page item       |

## Basic Usage

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