SCSS API

To keep the CSS file size as small as possible, many of the existing variables act as opt-ins for the CSS rule(s) behind them.

In addition, a few variables set the initial value for the associated CSS variables. This way they don’t have to be overwritten in the project.

$bem-root

Default: 'c-breadcrumbs'

Type: string

Defines the basic BEM class.

Caution

The class name must be the same as mainBemClass.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $bem-root: "c-breadcrumbs"
);

$overflow-behavior

Default: 'wrap'

Type: 'wrap' | 'ellipsis'

Opt-in CSS Rule(s): Yes

Throws: @error if the value is not 'wrap' or 'ellipsis'

Select the behavior when the breadcrumbs become larger than the display area.

Wrap lets elements that are too large for the area move to the next line.

Ellipsis displays all breadcrumbs in a single line, no matter how wide the component gets. As the name implies, text-overflow: ellipsis; is used here.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $overflow-behavior: "wrap"
);

$overflow-wrap-horizontal-spacing

Default: 1rem

Depends on the value of $overflow-behavior. If $overflow-behavior is set to 'wrap', this variable sets the horizontal spacing between the breadcrumbs.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $overflow-wrap-horizontal-spacing: 10px
);

$color-link

Default: inherit

Initial value for --color-link-breadcrumbs.

Defines the color rule for c-breadcrumbs__link.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $color-link: red
);

$color-hover-link

Default: null

Opt-in CSS Rule(s): Yes

Sets the link color hover styles. If not set $transition-link-breadcrumbs has no effect.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $color-hover-link: blue
);

$color-separator

Default: null

Opt-in CSS Rule(s): Yes

Sets the color of the separator.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $color-separator: green
);

$color-is-current

Default: null

Opt-in CSS Rule(s): Yes

Sets the color of the current breadcrumb.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $color-is-current: green
);

$color-is-index

Default: null

Opt-in CSS Rule(s): Yes

Sets the color of the index breadcrumb.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $color-is-index: green
);

$size-font

Default: 1rem

Initial value for --size-font-breadcrumbs.

Sets the font size of the breadcrumbs.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $size-font: 12px
);

$spacing-vertical-separator

Default: 6px

Initial value for --spacing-vertical-separator-breadcrumbs.

Controls the vertical spacing of the separator.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $spacing-vertical-separator: 3px
);

$icons-not-bigger-than-font-size

Default: true

Opt-in CSS Rule(s): Yes

Will set the max size of the icons to the same size as the font.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $icons-not-bigger-than-font-size: false
);

$transition-link-breadcrumbs

Default: color 0.2s ease-in-out

Sets the transition for the link color. If $color-hover-link is not set, this variable has no effect.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $transition-link-breadcrumbs: all 0.3s ease
);

$truncated

Default: false

If true, truncated styles will be applied to the breadcrumbs.

Caution

Make sure to also set truncated property to true in the configuration.

Usage:

@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $truncated: true
);