logo polydile dile-components

dile-breadcrumbs

Web Component to create a customizable breadcrumbs interface.

Installation

npm i @dile/ui

Usage

Import the component.

import "@dile/ui/components/breadcrumbs/breadcrumbs.js";

You can use the component in two ways:

1) Use breadcrumbs providing a items array

<dile-breadcrumbs items='[{"text": "Home", "href": "index.html"},{"text": "News", "href": "news.html"}]'></dile-breadcrumbs>

2) Use breadcrumbs providing a simple HTML markdown

<dile-breadcrumbs>
  <dile-breadcrumbs-item href="/">Home</dile-breadcrumbs-item>
  <dile-breadcrumbs-item href="/news">News</dile-breadcrumbs-item>
  <dile-breadcrumbs-item>Lit course launched</dile-breadcrumbs-item>
</dile-breadcrumbs>

Properties

dile-breadcrumbs

dile-breadcrumbs-item

Events

CSS Custom Properties

You can customize it using CSS Custom Properties.

Custom property Description Default
--dile-breadcrumbs-separator-width Space between the separator and the text 0.5rem
--dile-breadcrumbs-text-decoration Text decoration for the links none
--dile-breadcrumbs-text-color Text color for the separator and items that hasn't got links #303030
--dile-breadcrumbs-font-size Checked color for check control 1rem
--dile-breadcrumbs-link-color Color for the links #39c

Breadcrumbs demo

Regular breadcrumbs created with markdown

Home Components dile-breadcrumbs
<dile-breadcrumbs>
  <dile-breadcrumbs-item href="/">Home</dile-breadcrumbs-item>
  <dile-breadcrumbs-item href="/components/">Components</dile-breadcrumbs-item>
  <dile-breadcrumbs-item>dile-breadcrumbs</dile-breadcrumbs-item>
</dile-breadcrumbs>

Regular breadcrumbs created with JSON

<dile-breadcrumbs items='[{"text": "Home", "href": "/"},{"text": "How to use", "href": "/how-to-use"}]'></dile-breadcrumbs>

Styled breadcrumbs and custom separator

<style>
  .styled {
    --dile-breadcrumbs-separator-width: 1rem; 
    --dile-breadcrumbs-text-decoration: underline;
    --dile-breadcrumbs-link-color:  #cc5099;
    --dile-breadcrumbs-font-size: 1.3rem;
  }
</style>
<dile-breadcrumbs
  items='[
    {"text": "Home EscuelaIT", "href": "https://escuela.it"},
    {"text": "Courses", "href": "https://escuela.it/cursos"},
    {"text": "Lit Course"}
  ]'
  separator="»"
  class="styled"
></dile-breadcrumbs>

Breadcrumbs without href created with JSON

Is also posible to create breadcrumbs without href attribute. In this case you can name the breadcrumbs sections you want and listen to dile-breadcrumbs-click events to receibe the name of the item clicked.

<script type="module">
import { LitElement, html } from 'lit';

class MyComponent extends LitElement {
  render() {
    return html`
      <dile-breadcrumbs id="named" items='[{"text": "Home", "name": "home"},{"text": "Articles", "name": "articles"},{"text": "Not named"}]'></dile-breadcrumbs>
      <p style="margin-bottom: 0">
        Click on any breadcrumb section
      </p>
    `;
  }
  firstUpdated() {
    this.shadowRoot.getElementById('named').addEventListener(
      'dile-breadcrumbs-click', 
      (e) => this.shadowRoot.querySelector('p').innerText = 'You have clicked on ' + e.detail.name
    )
  }
}
customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>