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

• separator: The character or string that separate each item
• items: object array, where each item define the 'href' and the 'text' if you are using the items array, then the markup of the component with <dile-breadcrumbs-item> is ignored.

dile-breadcrumbs-item

• href: Optional href for the links
• name: Optional name for the item. When the name property is used, the item dispays as a link, then, instead of navigate to the href location, the element dispatchs the custom event dile-breadcrumbs-click.

Events

• dile-breadcrumbs-click: Custom event dispatched when the user click on a breadcrumb item that has a defined name property. You would use this event when you want to handle the click event on the breadcrumb item to do a custom navigation procedure, diferent to a regular link item.

CSS Custom Properties

You can customize it using CSS Custom Properties.

Breadcrumbs demo

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>

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.

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