Source

빵 부스러기

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>

구분 기호 변경

::before구분 기호는 및 를 통해 CSS에 자동으로 추가됩니다 content. 변경하여 변경할 수 있습니다 $breadcrumb-divider. 인용 부호 는 문자열 주위에 인용 부호를 생성하는 데 필요하므로 >분리자로 사용하려면 다음을 사용할 수 있습니다.

$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 작성 방법을 참조하십시오 .