브래드크럼

CSS를 통해 구분 기호를 자동으로 추가하는 탐색 계층 내에서 현재 페이지의 배치를 지정합니다.

예시

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

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

분리 기호 변경

구분 기호는 ::beforecontent를 통해 CSS에 자동으로 추가됩니다. $breadcrumb-diver를 변경하여 변경할 수 있습니다. 문자열 주위에 따옴표를 생성하려면 quote 기능이 필요하므로 다음을 통해서 >를 구분 기호로 사용할 수 있습니다.

$breadcrumb-divider: quote(">");

base64로 임베드된 SVG 아이콘을 사용할 수도 있습니다.

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

이 분리 기호는 $breadcrumb-divider 설정을 none으로 변경하면 삭제할 수 있습니다.

$breadcrumb-divider: none;

접근성

브래드크럼은 내비게이션을 제공하므로, aria-label="breadcrumb"과 같은 의미 있는 라벨을 추가하여 <nav> 요소에 제공되는 내비게이션 유형을 설명하고, aria-current="page"를 세트 마지막 항목에 적용하여 현재 페이지를 나타내는 것이 좋습니다.

자세한 정보는브래드크럼에 대한 WAI-ARIA 작성 방법에서 확인하실 수 있습니다.