Breadcrumbs

a glass trail of the path to the current page; the last item is the current page.

Example

<nav class="lucent-breadcrumbs" aria-label="Breadcrumb">
  <ol class="lucent-breadcrumbs__list">
    <li class="lucent-breadcrumbs__crumb">
      <a class="lucent-breadcrumbs__item" href="#">Home</a>
      <span class="lucent-breadcrumbs__sep" aria-hidden="true">/</span>
    </li>
    <li class="lucent-breadcrumbs__crumb">
      <a class="lucent-breadcrumbs__item" href="#">Settings</a>
      <span class="lucent-breadcrumbs__sep" aria-hidden="true">/</span>
    </li>
    <li class="lucent-breadcrumbs__crumb">
      <span class="lucent-breadcrumbs__item is-last" aria-current="page">Profile</span>
    </li>
  </ol>
</nav>

Using it

Angular lucent-breadcrumbs
import { LucentBreadcrumbs } from '@design-foundry/lucent-angular';
Stylesheet .lucent-breadcrumbs
@design-foundry/lucent-styles/core.css

API

NameKindTypeDefaultDescription
items input BreadcrumbItem[] [] { label, path? } trail; crumbs with a path render as links.
itemClick output BreadcrumbItem emits a crumb without a path when clicked.

Theming

Color (7)
Size & spacing (4)
Border & radius (1)
Shadow (1)
Type (3)