Breadcrumb Module
The Breadcrumb module provides navigation breadcrumbs with customizable colors.
Home/Library/Active Item
Home/Library/Active (Green)
Home/Library/Active (Maroon)
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():
| Component | Type | Usage | Default |
|---|---|---|---|
base → separator | Color | Divider color | null |
gap → micro | Number | Horizontal spacing around divider | 8px |
control → height | Number | Breadcrumb height | 2.2em |
control → weight | Number | Breadcrumb font weight | null |
control → strong | Number | Active item font weight | null |
Breadcrumb module uses the following Termeh color() and variant():
| Color / Variant | Usage | Default |
|---|---|---|
primary → readable | Default active item color | null |
Modifiers
.is-<color>→ applies a registered color as accent color
Child Elements
.divider→ separator element.active→ active item