@meveo-org/mv-breadcrumbs

mv-breadcrumbs

MvBreadcrumbs is a Meveo component (based on lit-element) that renders breadcrumb links.

Features

• Allows custom elements to be used in breadcrumb labels
• Written in vanilla javascript

Quick Start

To experiment with the MvBreadcrumbs component.

• Clone this repo.
• Serve the project from the root directory with some http server (best served with meveo itself)
• Sample breadcrumbs usage is included in the demo.js

The links to be displayed are passed into the component in an items object with the following structure:

{
  label,        -> the label of the current node/page, REQUIRED, e.g. "Accounts"
  url,          -> the url of the current node/page, OPTIONAL, e.g. "https://github.com/meveo-org/mv-breadcrumbs"
  icon,         -> the icon of the current node/page, OPTIONAL, e.g. html`<mv-fa icon="heart"></mv-fa>`
  separator,    -> the separator to be used between items, OPTIONAL, e.g. html`<mv-fa icon="angle-right"></mv-fa>` or "&rsaquo;" or ">"
  links: [      -> array of links for each node/page in the breadcrumb history, fields are same as above, OPTIONAL
    {
      label,
      url,
      icon
    }
  ]
}

Sample usage

const items = {
  label: "mv-breadcrumbs",
  icon: html`<mv-fa icon="bread-slice"></mv-fa>`,
  url: "https://github.com/meveo-org/mv-breadcrumbs",
  links: [
    {
      label: "github.com",
      icon: html`<mv-fa icon="github-alt"></mv-fa>`,
      url: "https://github.com"
    },
    {
      label: "mv-frontend",
      icon: html`<mv-fa icon="door-open"></mv-fa>`,
      url: "https://github.com/meveo-org/mv-frontend"
    }
  ]
};

<mv-breadcrumbs .items="${items}"></mv-breadcrumbs>

You can also check this demo