CSS only

Breadcrumb

A navigation trail. SCSS-only: a ng-breadcrumb nav of ng-breadcrumb-item links, the last one is-active.

Mark the current page with is-active. Modifiers change the separator, size and look.

Separators

arrow, chevron, dot or pipe.

breadcrumb.html

<nav class="ng-breadcrumb arrow" aria-label="Breadcrumb">
    <a href="#" class="ng-breadcrumb-item">Home</a>
    <a href="#" class="ng-breadcrumb-item">Docs</a>
    <span class="ng-breadcrumb-item is-active">Breadcrumb</span>
</nav>
<nav class="ng-breadcrumb chevron" aria-label="Breadcrumb">
    <a href="#" class="ng-breadcrumb-item">Home</a>
    <a href="#" class="ng-breadcrumb-item">Docs</a>
    <span class="ng-breadcrumb-item is-active">Breadcrumb</span>
</nav>
<nav class="ng-breadcrumb dot" aria-label="Breadcrumb">
    <a href="#" class="ng-breadcrumb-item">Home</a>
    <a href="#" class="ng-breadcrumb-item">Docs</a>
    <span class="ng-breadcrumb-item is-active">Breadcrumb</span>
</nav>
<nav class="ng-breadcrumb pipe" aria-label="Breadcrumb">
    <a href="#" class="ng-breadcrumb-item">Home</a>
    <a href="#" class="ng-breadcrumb-item">Docs</a>
    <span class="ng-breadcrumb-item is-active">Breadcrumb</span>
</nav>

Sizes

breadcrumb.html

<nav class="ng-breadcrumb sm" aria-label="Breadcrumb">
    <a href="#" class="ng-breadcrumb-item">Home</a>
    <a href="#" class="ng-breadcrumb-item">Docs</a>
    <span class="ng-breadcrumb-item is-active">Breadcrumb</span>
</nav>
<nav class="ng-breadcrumb " aria-label="Breadcrumb">
    <a href="#" class="ng-breadcrumb-item">Home</a>
    <a href="#" class="ng-breadcrumb-item">Docs</a>
    <span class="ng-breadcrumb-item is-active">Breadcrumb</span>
</nav>
<nav class="ng-breadcrumb lg" aria-label="Breadcrumb">
    <a href="#" class="ng-breadcrumb-item">Home</a>
    <a href="#" class="ng-breadcrumb-item">Docs</a>
    <span class="ng-breadcrumb-item is-active">Breadcrumb</span>
</nav>

Boxed

Add boxed for a filled container.

breadcrumb.html

<nav class="ng-breadcrumb boxed" aria-label="Breadcrumb">
    <a href="#" class="ng-breadcrumb-item">Home</a>
    <a href="#" class="ng-breadcrumb-item">Docs</a>
    <span class="ng-breadcrumb-item is-active">Breadcrumb</span>
</nav>

Anatomy

ng-breadcrumb ng-breadcrumb-item is-active

Modifiers

arrow chevron dot pipe sm lg boxed interactive truncate muted center

Reference

Generated from the component source (_ng_breadcrumb.scss).

Component info

Name	`Breadcrumb`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_breadcrumb.scss`

Classes

.ng-breadcrumb .ng-breadcrumb-item

Tokens

--ng-bc-font-size --ng-bc-gap --ng-bc-icon-gap --ng-bc-padding-x --ng-bc-padding-y --ng-bc-sep