Navigation

Breadcrumb

Themed breadcrumb trail with a nav landmark, configurable separator, and overflow ellipsis.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjBreadcrumbComponent } from '@kouji-ui/components';
04

Playground

#playground
HomeLibraryData displayBreadcrumb
size
depth
max items
<kj-breadcrumb
  kjSize="md"
>
  <kj-breadcrumb-list>
    <kj-breadcrumb-item><kj-breadcrumb-link kjHref="/">Home</kj-breadcrumb-link></kj-breadcrumb-item>
    <kj-breadcrumb-item><kj-breadcrumb-link kjHref="/library">Library</kj-breadcrumb-link></kj-breadcrumb-item>
    <kj-breadcrumb-item><kj-breadcrumb-link kjHref="/library/data">Data display</kj-breadcrumb-link></kj-breadcrumb-item>
    <kj-breadcrumb-item><kj-breadcrumb-current>Breadcrumb</kj-breadcrumb-current></kj-breadcrumb-item>
  </kj-breadcrumb-list>
</kj-breadcrumb>