브레드크럼

CSS로 구분자를 자동으로 추가하는 내비게이션 계층에서 현재 페이지의 위치를 나타냅니다.

출처: 문서

본문

예제 (Example)

링크가 달린 목록 아이템을 가진 순서 있는/순서 없는 목록을 사용해 최소한의 스타일을 가진 브레드크럼을 만드세요. 원하는 대로 추가 스타일을 입히려면 유틸리티를 사용하면 됩니다.

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

구분자 (Dividers)

구분자는 ::before와 content를 통해 CSS에서 자동으로 추가됩니다. 로컬 CSS 커스텀 프로퍼티 --bs-breadcrumb-divider를 수정하거나, $breadcrumb-divider Sass 변수(그리고 RTL 대응이 필요하면 $breadcrumb-divider-flipped)를 통해 변경할 수 있습니다. 저희는 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로 수정할 때 문자열 주위에 따옴표를 생성하려면 quote() 함수가 필요합니다. 예를 들어 >를 구분자로 사용한다면 다음과 같이 쓸 수 있습니다.

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

임베디드 SVG 아이콘을 사용하는 것도 가능합니다. CSS 커스텀 프로퍼티로 적용하거나 Sass 변수를 사용하면 됩니다.

인라인 SVG는 제대로 이스케이프된 문자가 필요합니다. <, > , # 같은 일부 예약 문자는 URL-인코딩되거나 이스케이프되어야 합니다. 저희는 escape-svg() Sass 함수를 사용해 $breadcrumb-divider 변수로 이 작업을 처리합니다. CSS 변수를 커스터마이징할 때는 직접 처리해야 하니 유의하세요. 자세한 내용은 Kevin Weber의 CodePen 설명을 읽어보세요.

<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;으로 설정해 구분자를 제거할 수도 있습니다.

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

접근성 (Accessibility)

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

자세한 내용은 ARIA Authoring Practices Guide의 breadcrumb 패턴을 참고하세요.

CSS

변수 (Variables) — 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 변수 (Sass variables)

$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:          var(--#{$prefix}secondary-color);
$breadcrumb-active-color:           var(--#{$prefix}secondary-color);
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;

더 알아보기 (Learn more)

Bootstrap 문서

브레드크럼