CSS Styles

If you choose to use the CSS files of Astro Breadcrumbs, you can use the following CSS variables to customize the look and feel of the component.

The CSS File is the compiled version of the SCSS file, using there SCSS default variables.

—color-link-breadcrumbs

Default: $color-link default value @see

Defines the color rule for c-breadcrumbs__link.

Default: $size-font default value @see

Sets the font size of the breadcrumbs.

Default: $spacing-vertical-separator default value @see

Controls the vertical spacing of the separator.

Default: none

Controls .c-breadcrumbs__crumb that contains the truncated-button with the ellipsis.

Default: hidden

Controls visibility of all truncated crumbs.

Default: absolute

Controls position of all truncated crumbs.

Default: --color-link-breadcrumbs

Controls the truncated-button color.

---
import "astro-breadcrumbs/breadcrumbs.css";
---