Skip to content

Breadcrumb Module ​

The Breadcrumb module provides navigation breadcrumbs with customizable colors.

Signature:

scss
@mixin use-breadcrumb($colors: ());

Example:

scss
@include termeh.use-breadcrumb(("primary", "danger"));

Module:

This module is registered as breadcrumb in the presented modules.

Dependencies

Breadcrumb module uses the following Termeh global var():

ComponentTypeUsageDefault
base → separatorColorDivider colornull
gap → microNumberHorizontal spacing around divider8px
control → heightNumberBreadcrumb height2.2em
control → weightNumberBreadcrumb font weightnull
control → strongNumberActive item font weightnull

Breadcrumb module uses the following Termeh color() and variant():

Color / VariantUsageDefault
primary → readableDefault active item colornull

Modifiers ​

  • .is-<color> → applies a registered color as accent color

Child Elements ​

  • .divider → separator element
  • .active → active item