# @coveops/taxonomy-breadcrumb

> Generates all permutations of breadcrumbs for specified field values, useful when needing to specify a hierarchy between those values.

Latest version **1.0.1** (published 2021-08-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @coveops/taxonomy-breadcrumb
pnpm add @coveops/taxonomy-breadcrumb
yarn add @coveops/taxonomy-breadcrumb
bun add @coveops/taxonomy-breadcrumb
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-08-26 |
| First published | 2020-08-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 42.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | coveoit, gfoumbi, rvundavalli, jwolfe-coveo, sfecteau, mthusscoveo, jfleurent, eqcoveo, jmdro, davebouffard, jfallaire, achouan, hsinghcoveo, wnijmeijer, lgcarrierbedard, elafleur_coveo, plavigueur, eaubin, lpblais-coveo, jpdery26, cricha |

## Links

- npm: https://www.npmjs.com/package/@coveops/taxonomy-breadcrumb
- npm.io page: https://npm.io/package/@coveops/taxonomy-breadcrumb

## Dependencies (2)

- [coveo-search-ui](https://npm.io/package/coveo-search-ui.md) ^2.10089.0
- [@coveops/turbo-core](https://npm.io/package/@coveops/turbo-core.md) ^1.2.1

## Recent versions

- 1.0.1 (latest) — 2021-08-26
- 1.0.0 — 2020-08-11

## README

# TaxonomyBreadcrumb

Generates the appropriate permutation of breadcrumbs based on the specified field values, useful when needing to specify a hierarchy between those values.

This component is a result template component (see [Result Templates](https://docs.coveo.com/en/413/)).

This component handles both single and multi-value fields.

For example, using the following fields
- @level1 = ['a', 'b']
- @level2 = ['c', 'd']

along with the default separator will generate the following breadcrumbs based on the values of the specified fields:
- a>c
- a>d
- b>c
- b>d

Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.

## Getting Started

### Testing the Component

For quick testing, you can add the script from unpkg:

```html
<script src="https://unpkg.com/@coveops/taxonomy-breadcrumb@latest/dist/index.min.js"></script>
```

> Disclaimer: Unpkg should be used for testing but not for production.

### Using the Component

1. Install the component into your project.

    ```
    npm i @coveops/taxonomy-breadcrumb
    ```

2. Use the Component or extend it:

    Typescript

    ```javascript
    import { TaxonomyBreadcrumb, ITaxonomyBreadcrumbOptions } from '@coveops/taxonomy-breadcrumb';
    ```

    Javascript

    ```javascript
    const TaxonomyBreadcrumb = require('@coveops/taxonomy-breadcrumb').TaxonomyBreadcrumb;
    ```

3. You can also expose the component alongside other components being built in your project.

    ```javascript
    export * from '@coveops/taxonomy-breadcrumb'
    ```

4. Include the component in your template as follows:

    Place the component in your markup:

    ```html
    <div class="CoveoTaxonomyBreadcrumb" data-fields="@field1,@field2"></div>
    ```
## Options

The following options can be configured:

| Option | Required | Type | Default | Notes |
| --- | --- | --- | --- | --- |
| `fields` | Yes | IFieldOption[ ] | | The field(s) used to create the breadcrumb |
| `separator` | No | string | `>` | The separator inserted between field values in the breadcrumb |
| `label` | No | string | empty string | This label is inserted in front of the breadcrumb. Can be styled using the `.taxonomy-breadcrumb-label` CSS class. |

## Extending

Extending the component can be done as follows:

```javascript
import { TaxonomyBreadcrumb, ITaxonomyBreadcrumbOptions } from "@coveops/taxonomy-breadcrumb";

export interface IExtendedTaxonomyBreadcrumbOptions extends ITaxonomyBreadcrumbOptions {}

export class ExtendedTaxonomyBreadcrumb extends TaxonomyBreadcrumb {}
```

## Contribute

1. Clone the project
2. Copy `.env.dist` to `.env` and update the COVEO_ORG_ID and COVEO_TOKEN fields in the `.env` file to use your Coveo credentials and SERVER_PORT to configure the port of the sandbox - it will use 8080 by default.
3. Build the code base: `npm run build`
4. Serve the sandbox for live development `npm run serve`

---
_Source: https://npm.io/package/@coveops/taxonomy-breadcrumb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._