개념

• 사용자가 현재 페이지의 위치를 계층 구조로 보여주는 보조 내비게이션 패턴이다.
• 주 내비게이션을 보완해 정보 구조를 이해하고 상위로 빠르게 이동하게 돕는다.

특징

• 인지 부하 감소 (지금 어디인지/어디로 갈 수 있는지 즉시 파악)
• 탐색 효율 향상 (이탈률 감소)

주의사항

• 메인 내비게이션을 대체하지 않는다.
• 보조로 사용한다.
• 마지막 항목인 현재 페이지는 링크를 금지한다.

예시

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/products">제품</a></li>
    <li><a href="/products/laptop">노트북</a></li>
    <li aria-current="page">울트라북 13"</li>
  </ol>
</nav>