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
Section titled “—color-link-breadcrumbs”Default: $color-link default value @see
Defines the color rule for c-breadcrumbs__link.
—size-font-breadcrumbs
Section titled “—size-font-breadcrumbs”Default: $size-font default value @see
Sets the font size of the breadcrumbs.
—spacing-vertical-separator-breadcrumbs
Section titled “—spacing-vertical-separator-breadcrumbs”Default: $spacing-vertical-separator default value @see
Controls the vertical spacing of the separator.
—display-ellipsis-breadcrumbs
Section titled “—display-ellipsis-breadcrumbs”Default: none
Controls .c-breadcrumbs__crumb that contains the truncated-button with the ellipsis.
—visibility-truncated-breadcrumbs
Section titled “—visibility-truncated-breadcrumbs”Default: hidden
Controls visibility of all truncated crumbs.
—position-truncated-breadcrumbs
Section titled “—position-truncated-breadcrumbs”Default: absolute
Controls position of all truncated crumbs.
—color-truncated-button
Section titled “—color-truncated-button”Default: --color-link-breadcrumbs
Controls the truncated-button color.
---import "astro-breadcrumbs/breadcrumbs.css";---