@vrembem/breadcrumb

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

Usage no npm install needed!

<script type="module">
  import vrembemBreadcrumb from 'https://cdn.skypack.dev/@vrembem/breadcrumb';
</script>

README

Breadcrumb

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

npm version

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.