carbon-components
Version:
Carbon Components is a component library for IBM Cloud
36 lines (28 loc) • 2.02 kB
Markdown
| 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 |
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.
```scss
/* 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.
```html
/* 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>
```