Breadcrumb

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<nav class="bx--breadcrumb" aria-label="breadcrumb">
    <div class="bx--breadcrumb-item">
        <a href="#" class="bx--link">Breadcrumb 1</a>
    </div>
    <div class="bx--breadcrumb-item">
        <a href="#" class="bx--link">Breadcrumb 2</a>
    </div>
    <div class="bx--breadcrumb-item">
        <a href="#" class="bx--link">Breadcrumb 3</a>
    </div>
</nav>

Code:

<nav class="bx--breadcrumb bx--breadcrumb--no-trailing-slash" aria-label="breadcrumb">
    <div class="bx--breadcrumb-item">
        <a
          href="#"
          class="bx--link"
          
        >
            Breadcrumb 1
        </a>
    </div>
    <div class="bx--breadcrumb-item">
        <a
          href="#"
          class="bx--link"
          
        >
            Breadcrumb 2
        </a>
    </div>
    <div class="bx--breadcrumb-item">
        <a
          href="#"
          class="bx--link"
          aria-current="page"
        >
            Breadcrumb 3
        </a>
    </div>
</nav>

<nav class="bx--breadcrumb bx--breadcrumb--no-trailing-slash" aria-label="breadcrumb">
    <div class="bx--breadcrumb-item ">
        <a href="#" class="bx--link">
          Breadcrumb 1
        </a>
    </div>
    <div class="bx--breadcrumb-item ">
        <a href="#" class="bx--link">
          Breadcrumb 2
        </a>
    </div>
    <div class="bx--breadcrumb-item bx--breadcrumb-item--current">
        <a href="#" class="bx--link">
          Breadcrumb 3
        </a>
    </div>
</nav>

Documentation

SCSS

Selector	Description
`bx--breadcrumb`	Used on the containing `<nav>` or equivalent node
`bx--breadcrumb-item`	Used on each individual breadcrumb item
`bx--breadcrumb-item--current`	Used to specify which breadcrumb item is the current page
`bx--breadcrumb-item [aria-current='page']`	Alternative to `bx--breadcrumb-item--current`, automatically applied if a descending `<a>` tag uses `aria-current`
`bx--breadcrumb--no-trailing-slash`	Used to specify that no trailing slash should be added

FAQ

Use CSS to override breadcrumb styles to hide any unwanted slashes. Slashes are created using CSS pseudo elements (::after). Setting this to display: none will remove the associated slash.

/* Removes the slash from the last breadcrumb-item */
.bx--breadcrumb-item:last-child::after {
  display: none;
}

Or you can add .bx--breadcrumb--no-trailing-slash to .bx--breadcrumb to remove leading slashes.

/* Removes the slash from the last breadcrumb-item */
<div class="bx--breadcrumb bx--breadcrumb--no-trailing-slash">
  <div class="bx--breadcrumb-item">
    <a href="#" class="bx--link">Breadcrumb 1</a>
  </div>
  <div class="bx--breadcrumb-item">
    <a href="#" class="bx--link">Breadcrumb 2</a>
  </div>
  <div class="bx--breadcrumb-item"><span>Breadcrumb 3</span></div>
</div>

Edit this page on GitHub

Components: Accordion

Breadcrumb: Usage

Breadcrumb

Breadcrumb with current page

Documentation

SCSS

FAQ

How to remove a breadcrumb-item slash