브레드크럼

브레드크럼 (Breadcrumb)

Bulma 브레드크럼은 breadcrumb 컨테이너와 ul 목록만 있으면 되는 간단한 내비게이션 컴포넌트입니다. 구분 기호(divider)는 li 태그의 ::before 가상 요소의 콘텐츠로 자동 생성돼요.

출처: 문서

본문

li 태그에 is-active 수식어를 추가하면 현재 페이지를 표시할 수 있고, 내부 링크의 내비게이션이 비활성화됩니다.

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Bulma</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Components</a></li>
    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
  </ul>
</nav>

정렬 (Alignment)

다른 정렬이 필요하다면 breadcrumb 컨테이너에 is-centered 또는 is-right 수식어를 사용하세요.

<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Bulma</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Components</a></li>
    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
  </ul>
</nav>

아이콘 (Icons)

Font Awesome 아이콘을 자유롭게 사용할 수 있어요.

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-home" aria-hidden="true"></i>
        </span>
        <span>Bulma</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        <span>Documentation</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
        </span>
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-thumbs-up" aria-hidden="true"></i>
        </span>
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>

대체 구분 기호 (Alternative separators)

4가지 추가 구분 기호를 선택할 수 있어요: has-arrow-separator, has-bullet-separator, has-dot-separator, has-succeeds-separator.

<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Bulma</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Components</a></li>
    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
  </ul>
</nav>

크기 (Sizes)

is-small, is-medium, is-large 등 3가지 추가 크기 중에서 선택할 수 있어요.

<nav class="breadcrumb is-large" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Bulma</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Components</a></li>
    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
  </ul>
</nav>

Sass 및 CSS 변수 (Sass and CSS variables)

더 알아보기 (Learn more)

• Menu 컴포넌트
• Tabs 컴포넌트