Jump To:

  1. Demos
    1. Standard Breadcrumb
    2. Truncated Breadcrumb
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Breadcrumb trail list layout

Demos

Standard Breadcrumb

A typical breadcrumb trail for navigation.

HTML 
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a href="#" class="breadcrumb__link">Home</a>
      <span class="breadcrumb__separator" aria-hidden="true">/</span>
    </li>
    <li class="breadcrumb__item">
      <a href="#" class="breadcrumb__link">Products</a>
      <span class="breadcrumb__separator" aria-hidden="true">/</span>
    </li>
    <li class="breadcrumb__item" aria-current="page">
      <span class="breadcrumb__current">Electronic Gadgets</span>
    </li>
  </ol>
</nav>

Truncated Breadcrumb

Items automatically truncate with an ellipsis if they exceed the `item-max-width`.

HTML 
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a href="#" class="breadcrumb__link">Home</a>
      <span class="breadcrumb__separator" aria-hidden="true">/</span>
    </li>
    <li class="breadcrumb__item">
      <a href="#" class="breadcrumb__link">This is an extremely long page title that will be truncated by the breadcrumb component</a>
      <span class="breadcrumb__separator" aria-hidden="true">/</span>
    </li>
    <li class="breadcrumb__item" aria-current="page">
      <span class="breadcrumb__current">Current Page</span>
    </li>
  </ol>
</nav>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "row-gap":              0.5em,
  "margin" :              (0 0 1.25em 0),
  "color":                 "type-tertiary",
  "color-hover":           "link-hover",
  "line-height":           true,
  "item-max-width":        15em,
  "separator-margin":      (0 0.5em),
  "separator-color":       null,
  "separator-opacity":     0.7,
);
File Information
  • File: _breadcrumb.scss
  • Group: breadcrumb
  • Type: variable
  • Lines (comments): 24-34
  • Lines (code): 36-46

Map Properties

Name Type Default Description
margin List (0 0 1.25em 0) Margin for component
row-gap CssUnit 0.35em Gap when breadcrumbs wrap
color Color "type-tertiary" Base color (links inherit this)
color-hover Color "link-hover" Color for link hover
line-height CssUnit true Line height, defaults to typography line-height-densest
item-max-width CssUnit 15em Max length of item text
separator-color Color null Optional color to apply to separator
separator-opacity Number 0.7 Optional opacity for separator
separator-margin List (0 0.5em) Separator margin

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _breadcrumb.scss
  • Group: breadcrumb
  • Type: mixin
  • Lines (comments): 48-51
  • Lines (code): 53-55

Examples

@include ulu.component-breadcrumb-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _breadcrumb.scss
  • Group: breadcrumb
  • Type: mixin
  • Lines (comments): 67-70
  • Lines (code): 72-110

Demo

View

Examples

@include ulu.component-breadcrumb-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _breadcrumb.scss
  • Group: breadcrumb
  • Type: function
  • Lines (comments): 57-60
  • Lines (code): 62-65

Examples

@include ulu.component-breadcrumb-get("property");

Parameters

Name Type Description
$name Map Name of property

Require