빵 부스러기

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

이 페이지에서

예시

연결 목록 항목이 있는 순서 또는 순서 없는 목록을 사용하여 최소한의 스타일의 이동 경로를 만듭니다. 유틸리티를 사용하여 원하는 대로 스타일을 추가하십시오.

HTML

<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-dividerSass 변수 를 통해 변경할 수 있으며 $breadcrumb-divider-flipped필요한 경우 해당 RTL에 대해서도 변경할 수 있습니다. 기본적으로 사용자 정의 속성에 대한 대체로 설정된 Sass 변수를 사용합니다. 이렇게 하면 언제든지 CSS를 다시 컴파일하지 않고도 재정의할 수 있는 전역 구분선을 얻을 수 있습니다.

HTML

<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 변수를 사용하십시오.

포함된 SVG 사용

SVG를 데이터 URI로 인라인하려면 몇 개의 문자, 특히 <, >및 #. 이것이 $breadcrumb-divider변수가 escape-svg()Sass 함수 를 통해 전달되는 이유 입니다. CSS 사용자 정의 속성을 사용할 때 SVG를 직접 URL 이스케이프해야 합니다. 탈출할 대상에 대한 자세한 내용 은 CodePen에 대한 Kevin Weber의 설명 을 참조하십시오.

HTML

<nav style="--bs-breadcrumb-divider: url(&#34;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='%236c757d'/%3E%3C/svg%3E&#34;);" 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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

구분선 설정 --bs-breadcrumb-divider: '';(CSS 사용자 정의 속성의 빈 문자열은 값으로 계산)을 제거하거나 Sass 변수를 로 설정할 수도 $breadcrumb-divider: none;있습니다.

HTML

<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"

자세한 내용은 ARIA Authoring Practices Guide 이동 경로 패턴 을 참조하십시오 .

CSS

변수

v5.2.0에 추가됨

Bootstrap의 진화하는 CSS 변수 접근 방식의 일부로, 이동 경로는 이제 .breadcrumb향상된 실시간 사용자 정의를 위해 로컬 CSS 변수를 사용합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 사용자 정의도 계속 지원됩니다.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

Sass 변수

$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;