빵 부스러기
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
. 로컬 CSS 사용자 정의 속성을 수정 --bs-breadcrumb-divider
하거나 $breadcrumb-divider
Sass 변수 를 통해 변경할 수 있으며 $breadcrumb-divider-flipped
필요한 경우 해당 RTL에 대해서도 변경할 수 있습니다. 기본적으로 사용자 정의 속성에 대한 대체로 설정된 Sass 변수를 사용합니다. 이렇게 하면 언제든지 CSS를 다시 컴파일하지 않고도 재정의할 수 있는 전역 구분선을 얻을 수 있습니다.
<nav style="--bs-breadcrumb-divider: '>';" 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>
Sass를 통해 수정할 때 문자열 주위에 따옴표를 생성하려면 인용 기능이 필요합니다. 예를 들어 >
구분선으로 사용하면 다음을 사용할 수 있습니다.
$breadcrumb-divider: quote(">");
포함된 SVG 아이콘 을 사용할 수도 있습니다 . CSS 사용자 정의 속성을 통해 적용하거나 Sass 변수를 사용하십시오.
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" 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>
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
구분선 설정 --bs-breadcrumb-divider: '';
(CSS 사용자 정의 속성의 빈 문자열은 값으로 계산)을 제거하거나 Sass 변수를 로 설정할 수도 $breadcrumb-divider: none;
있습니다.
<nav style="--bs-breadcrumb-divider: '';" 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>
$breadcrumb-divider: none;
접근성
이동 경로는 탐색을 제공하므로 요소 aria-label="breadcrumb"
에서 제공되는 탐색 유형을 설명하는 것과 같은 의미 있는 레이블을 추가 하고 현재 페이지를 나타내는 집합의 마지막 항목에 적용하는 것이 좋습니다.<nav>
aria-current="page"
자세한 내용 은 이동 경로 패턴에 대한 WAI-ARIA 작성 방법을 참조하십시오 .
사스
변수
$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote("/");
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;