경로 Breadcrumb

CSS를 통해 자동으로 추가된 구분기호로 현재 페이지의 위치를 나타냅니다.

개요

구분 기호는 ::beforecontent를 통해 CSS에 자동으로 추가됩니다.

<nav aria-label="breadcrumb" role="navigation">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page"></li>
  </ol>
</nav>

<nav aria-label="breadcrumb" role="navigation">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#"></a></li>
    <li class="breadcrumb-item active" aria-current="page">자료실</li>
  </ol>
</nav>

<nav aria-label="breadcrumb" role="navigation">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#"></a></li>
    <li class="breadcrumb-item"><a href="#">자료실</a></li>
    <li class="breadcrumb-item active" aria-current="page">데이터</li>
  </ol>
</nav>

접근성

경로는 탐색기능을 제공하기 때문에 <nav>> 요소에 네비게이션 유형을 설명하기 위해 aria-label="breadcrumb" 와 같은 레이블을 추가하는 것이 좋습니다. 현재 페이지를 나타내기 위해 aria-current="page"를 마지막 항목에 적용 할 수 있습니다.

자세한 내용은 경로 패턴에 대한 WAI-ARIA 제작방법을 참조하십시오.