open-index/open-npm huggingface dataset:
npm package: @jool-software/breadcrumbs
Description: For displaying user location inside application in breadcrumbs style
Latest version: 1.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