# @coveops/dynamic-hierarchical-facet-breadcrumbs

> 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.

Latest version **1.0.0** (published 2022-05-18) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @coveops/dynamic-hierarchical-facet-breadcrumbs
pnpm add @coveops/dynamic-hierarchical-facet-breadcrumbs
yarn add @coveops/dynamic-hierarchical-facet-breadcrumbs
bun add @coveops/dynamic-hierarchical-facet-breadcrumbs
```

## 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.0 |
| Published | 2022-05-18 |
| First published | 2022-05-18 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 42.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | dsisodraker, watallah, 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/dynamic-hierarchical-facet-breadcrumbs
- Repository: https://github.com/Coveo-Turbo/dynamic-hierarchical-facet-breadcrumbs
- Homepage: https://github.com/Coveo-Turbo/dynamic-hierarchical-facet-breadcrumbs#readme
- Issues: https://github.com/Coveo-Turbo/dynamic-hierarchical-facet-breadcrumbs/issues
- npm.io page: https://npm.io/package/@coveops/dynamic-hierarchical-facet-breadcrumbs

## Dependencies (3)

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

## Recent versions

- 1.0.0 (latest) — 2022-05-18

## README

# DynamicHierarchicalFacetBreadcrumbs

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

1. Install the component into your project.

```
npm i @coveops/dynamic-hierarchical-facet-breadcrumbs
```

2. Use the Component or extend it

Typescript:

```javascript
import { DynamicHierarchicalFacetBreadcrumbs, IDynamicHierarchicalFacetBreadcrumbsOptions } from '@coveops/dynamic-hierarchical-facet-breadcrumbs';
```

Javascript

```javascript
const DynamicHierarchicalFacetBreadcrumbs = require('@coveops/dynamic-hierarchical-facet-breadcrumbs').DynamicHierarchicalFacetBreadcrumbs;
```

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

```javascript
export * from '@coveops/dynamic-hierarchical-facet-breadcrumbs'
```

4. Or for quick testing, you can add the script from unpkg

```html
<script src="https://unpkg.com/@coveops/dynamic-hierarchical-facet-breadcrumbs@latest/dist/index.min.js"></script>
```

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

5. Include the component in your template as follows:

Place the component in your markup:

```html
<div class="CoveoDynamicHierarchicalFacetBreadcrumbs" data-field="@atlgeographicalhierarchy"></div>
```

where `@atlgeographicalhierarchy` is the name of the field you want to display as breadcrumbs. See more information in the `Options` section of the documentation.

## Extending

Extending the component can be done as follows:

```javascript
import { DynamicHierarchicalFacetBreadcrumbs, IDynamicHierarchicalFacetBreadcrumbsOptions } from "@coveops/dynamic-hierarchical-facet-breadcrumbs";

export interface IExtendedDynamicHierarchicalFacetBreadcrumbsOptions extends IDynamicHierarchicalFacetBreadcrumbsOptions {}

export class ExtendedDynamicHierarchicalFacetBreadcrumbs extends DynamicHierarchicalFacetBreadcrumbs {}
```

## Options

The following options can be configured:

| Option | Required | Type | Default | Notes |
| --- | --- | --- | --- | --- |
| `breadcrumbParentName` | No | string | `All Categories` | Name of the parent category. |
| `field` | Yes | string |  | Specifies the multi-value field whose values will be displayed as separate levels in the resulting breadcrumb. This must match the field used in your interface's `CoveoDynamicHierarchicalFacet`. It is important to note that this can only work with **one** instance of `CoveoDynamicHierarchicalFacet`. The `field` attribute **must match** the value of the one used in `CoveoDynamicHierarchicalFacet`. |


## 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/dynamic-hierarchical-facet-breadcrumbs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._