@jool-software/breadcrumbs v1.0.1

Breadcrumbs Web Component

About

For displaying user location inside application in breadcrumbs style

Interface

Breadcrumbs has two public properties 1. breadcrumbs: (string | [string, string])[] 2. divider: string (optional)

The breadcrumbs property is an array of strings and string tuples. For given strings a crumb will be displayed with the string content, for each string tuple the crumb will be a hyperlink, with the left item being the title and the right item the url.

strings and string tuples can be mixed.

Styling

Breadcrumbs has two non-inherited properties it accepts 1. --color for styling the color of the crumbs 2. --text-decoration for styling the hyperlinks

Example:

jool-breadcrumbs {
  --color: #FFF;
  --text-decoration: underline;
  font-size: 3rem;
}

Usage

1. npm i @jool-software/breadcrumbs
2. place <jool-breadcrumbs></jool-breadcrumbs> in template
3. pass breadcrumbs input property e.g. <jool-breadcrumbs breadcrumbs=["alfa", "beta"]>
4. (optional) pass divider input property e.g. <jool-breadcrumbs breadcrumbs=["alfa", "beta"] divider="🤯">
5. (optional) pass tuple to have hyperlink breadcrumb e.h. <jool-breadcrumbs breadcrumbs=[["google", "http://www.google.nl"], "beta"]>

Example:

<jool-breadcrumbs breadcrumbs=[["google", "http://www.google.nl"], "beta"] divider="🤯"></jool-breadcrumbs>

Development

run yarn start to start development