@carbon/charts
Version:
Carbon charting components
41 lines (33 loc) • 2.03 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>
```