Breadcrumb

A navigation component that shows the hierarchical path to a users current location.

Documentation

Installation

npm install @vrembem/breadcrumb

Styles

@use "@vrembem/breadcrumb";

Markup

The breadcrumb component is composed of three parts: breadcrumb, breadcrumb__item and breadcrumb__link.

<ol class="breadcrumb">
  <li class="breadcrumb__item">
    <a href="/" class="breadcrumb__link">Home</a>
  </li>
  ...
  <li class="breadcrumb__item">
    Current Page
  </li>
</ol>

Modifiers

breadcrumb_invert

Inverts the colors of the breadcrumb component to be used on dark backgrounds when more contrast is needed.

<ol class="breadcrumb breadcrumb_invert">
  ...
</ol>

Customization

Sass Variables

| Variable | Default | Description | | --------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | $prefix-block | null | String to prefix blocks with. | | $prefix-element | "__" | String to prefix elements with. | | $prefix-modifier | "_" | String to prefix modifiers with. | | $prefix-modifier-value | "_" | String to prefix modifier values with. | | $color | core.$color-subtle | Sets the color property. | | $delimiter | "/" | Sets the delimiter character used after each breadcrumb__item element. | | $delimiter-color | core.$border-color-dark | Sets the color property for the delimiter character. | | $delimiter-padding | 0 0.5em | Sets the padding property for the delimiter character. | | $delimiter-last | false | Whether or not to render the delimiter at the end of the breadcrumb. | | $link-color | base.$link-color | Sets the color property on the breadcrumb__link element. | | $link-color-hover | base.$link-color-hover | Sets the color property on the breadcrumb__link element for its :hover state. | | $link-border | core.$border | Sets the border property on the breadcrumb__link element. | | $link-border-hover | 1px solid base.$link-color-hover | Sets the border property on the breadcrumb__link element for its :hover state. | | $invert-color | core.$color-invert-subtle | Sets the color property on the breadcrumb_invert modifier. | | $invert-delimiter-color | core.$border-color-invert-dark | Sets the color property for the delimiter character on the breadcrumb_invert modifier. | | $invert-link-color | base.$link-invert-color | Sets the color property on the breadcrumb__link element on the breadcrumb_invert modifier. | | $invert-link-color-hover | base.$link-invert-color-hover | Sets the color property on the breadcrumb__link element on the breadcrumb_invert modifier for its :hover state. | | $invert-link-border | core.$border-invert | Sets the border property on the breadcrumb__link element on the breadcrumb_invert modifier. | | $invert-link-border-hover | 1px solid core.$white | Sets the border property on the breadcrumb__link element on the breadcrumb_invert modifier for its :hover state. |