브레드크럼 네비게이션

사용자의 현재 위치를 표시하고 상위 페이지로 쉽게 이동할 수 있게 하는 네비게이션 패턴입니다.

1. 기본 (Chevron 구분자)

2. Slash 구분자

3. Arrow 구분자

4. 긴 경로 축약 (드롭다운)

긴 경로에서는 중간 항목을 숨기고 "..." 버튼을 클릭하면 전체 경로를 확인할 수 있습니다.

5. 모바일 뷰

모바일에서는 전체 경로 대신 간단한 "뒤로 가기" 링크로 표시됩니다.

SEO 최적화: 위의 첫 번째 예제는 Schema.org BreadcrumbList 구조화된 데이터를 포함하고 있습니다. 이를 통해 검색 엔진이 페이지 계층 구조를 이해하고 검색 결과에 브레드크럼을 표시할 수 있습니다.

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="...">
      <span itemprop="name">Home</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  ...
</ol>
                

접근성 특징

aria-label="Breadcrumb"로 네비게이션 목적 명시
aria-current="page"로 현재 페이지 표시
의미 있는 HTML 구조 (<nav>, <ol>)
키보드 네비게이션 지원 (Tab, Enter)
포커스 표시 (focus-visible)