3.0.20 • Published 10 months ago

@vrembem/breadcrumb v3.0.20

Weekly downloads
20
License
MIT
Repository
github
Last release
10 months ago

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

VariableDefaultDescription
$prefix-blocknullString 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.
$colorcore.$color-subtleSets the color property.
$delimiter"/"Sets the delimiter character used after each breadcrumb__item element.
$delimiter-colorcore.$border-color-darkSets the color property for the delimiter character.
$delimiter-padding0 0.5emSets the padding property for the delimiter character.
$delimiter-lastfalseWhether or not to render the delimiter at the end of the breadcrumb.
$link-colorbase.$link-colorSets the color property on the breadcrumb__link element.
$link-color-hoverbase.$link-color-hoverSets the color property on the breadcrumb__link element for its :hover state.
$link-bordercore.$borderSets the border property on the breadcrumb__link element.
$link-border-hover1px solid base.$link-color-hoverSets the border property on the breadcrumb__link element for its :hover state.
$invert-colorcore.$color-invert-subtleSets the color property on the breadcrumb_invert modifier.
$invert-delimiter-colorcore.$border-color-invert-darkSets the color property for the delimiter character on the breadcrumb_invert modifier.
$invert-link-colorbase.$link-invert-colorSets the color property on the breadcrumb__link element on the breadcrumb_invert modifier.
$invert-link-color-hoverbase.$link-invert-color-hoverSets the color property on the breadcrumb__link element on the breadcrumb_invert modifier for its :hover state.
$invert-link-bordercore.$border-invertSets the border property on the breadcrumb__link element on the breadcrumb_invert modifier.
$invert-link-border-hover1px solid core.$whiteSets the border property on the breadcrumb__link element on the breadcrumb_invert modifier for its :hover state.
3.0.20

10 months ago

3.0.19

1 year ago

3.0.18

1 year ago

3.0.13

2 years ago

3.0.16

2 years ago

3.0.17

2 years ago

3.0.14

2 years ago

3.0.11

3 years ago

3.0.10

3 years ago

3.0.9

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.8

3 years ago

3.0.7

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

3.0.0

3 years ago

2.0.0

3 years ago

1.39.0

3 years ago

1.40.2

3 years ago

1.40.1

3 years ago

1.41.0

3 years ago

1.38.0

3 years ago

1.37.0

4 years ago

1.36.1

4 years ago

1.34.0

4 years ago

1.33.2

4 years ago

1.32.2

4 years ago

1.32.0

4 years ago

1.29.0

4 years ago

1.30.0

4 years ago

1.28.0

4 years ago

1.25.2

4 years ago

1.22.3

5 years ago

1.22.2

5 years ago

1.22.1

5 years ago

1.21.0

5 years ago

1.19.0

5 years ago

1.18.1

5 years ago

1.18.2

5 years ago

1.18.0

5 years ago

1.17.0

5 years ago

1.15.4

5 years ago

1.15.5

5 years ago

1.15.3

5 years ago

1.15.2

5 years ago

1.15.1

5 years ago

1.15.0

5 years ago

1.14.8

5 years ago

1.14.5

5 years ago

1.14.4

5 years ago

1.14.2

5 years ago

1.12.0

5 years ago

1.11.0

5 years ago

1.10.0

5 years ago

1.8.3

5 years ago

1.8.0

5 years ago

1.7.3

5 years ago

1.7.2

5 years ago

1.7.1

5 years ago

1.7.0

5 years ago

1.5.4

5 years ago

1.5.3

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.1

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.2.1

5 years ago

1.1.0

5 years ago

1.0.2

6 years ago