@lit-element-bootstrap/breadcrumb v1.0.1

@lit-element-bootstrap/breadcrumb

An implementation of Bootstrap v4.3.1 breadcrumb components in LitElement.

Live demo

Go to live demo

Installation

Install via npm:

npm install @lit-element-bootstrap/breadcrumb

Install via yarn:

yarn add @lit-element-bootstrap/breadcrumb

Install via unpkg:

https://unpkg.com/@lit-element-bootstrap/breadcrumb@latest/unpkg/index.bundled.js

Import

import all modules:

import '@lit-element-bootstrap/breadcrumb';

import specific module (preferred):

import '@lit-element-bootstrap/breadcrumb/bs-breadcrumb.js';

import specific class:

// import specific class from all modules
import { BsBreadcrumb } from '@lit-element-bootstrap/breadcrumb';

// import specific class
import { BsBreadcrumb } from '@lit-element-bootstrap/breadcrumb/bs-breadcrumb.js';

Examples

Breadcrumb with default divider

<bs-breadcrumb>
    <bs-breadcrumb-item title="Home" href="/home" active></bs-breadcrumb-item>
</bs-breadcrumb>

<bs-breadcrumb>
    <bs-breadcrumb-item title="Home" href="/home"></bs-breadcrumb-item>
    <bs-breadcrumb-item title="Library" href="/library" active></bs-breadcrumb-item>
</bs-breadcrumb>

<bs-breadcrumb>
    <bs-breadcrumb-item title="Home" href="/home"></bs-breadcrumb-item>
    <bs-breadcrumb-item title="Library" href="/library"></bs-breadcrumb-item>
    <bs-breadcrumb-item title="Data" href="/data" active></bs-breadcrumb-item>
</bs-breadcrumb>

Breadcrumb with custom divider

.arrowSeparator {
    --breadcrumb-item-divider-content: ">";
}

.svgSeparator {
    --breadcrumb-item-divider-content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
}

<bs-breadcrumb class="arrowSeparator">
    <bs-breadcrumb-item title="Home" href="/home"></bs-breadcrumb-item>
    <bs-breadcrumb-item title="Library" href="/library" active></bs-breadcrumb-item>
</bs-breadcrumb>

<bs-breadcrumb class="svgSeparator">
    <bs-breadcrumb-item title="Home" href="/home"></bs-breadcrumb-item>
    <bs-breadcrumb-item title="Library" href="/library" active></bs-breadcrumb-item>
</bs-breadcrumb>

Components

Slots

bs-breadcrumb

Theming

bs-breadcrumb

bs-badge-item