logo polydile dile-components

dile-breadcrumbs

Web Component to create a customized breadcrumbs interface.

Installation

npm i @dile/dile-breadcrumbs

Usage

Import the component.

<script type="module">
  import '@dile/dile-breadcrumbs/dile-breadcrumbs.js';
</script>

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 propertyDescriptionDefault
--dile-breadcrumbs-separator-widthSpace between the separator and the text0.5rem
--dile-breadcrumbs-text-decorationText decoration for the linksnone
--dile-breadcrumbs-text-colorText color for the separator and items that hasn't got links#303030
--dile-breadcrumbs-font-sizeChecked color for check control1rem
--dile-breadcrumbs-link-colorColor for the links#39c

Regular breadcrumbs created with markdown

<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>

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.

import { LitElement } 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);
export const JsStory = () => html`<my-component></my-component>`;