The breadcrumb is a standard navigation element that helps the user identify their site location.

Technical Details

  • It is an ordered list <ol> element.
  • It uses aria-current="page" to mark the current position.

Dependencies

As you see, it uses custom color values from the $colors map.

We included it as a demonstration in this file, but you usually want to add it to your basic config file, which you load the very first.

scss
$colors: (
breadcrumb: (
separator: hsl(0 0% 80%)
)
)

Resources