THIS IS ARCHIVED DOCUMENTATION

(Deprecated) BreadcrumbManager

The BreadcrumbManager headless controller manages a summary of the currently active facet filters.

Methods

deselectAll

Deselects all facet values.

deselectBreadcrumb

Deselects a facet breadcrumb value or category facet breadcrumb.

Parameters

  • value: BreadcrumbValue<BaseFacetValue> | CategoryFacetBreadcrumb

    The facet breadcrumb value or a category facet breadcrumb to deselect.

subscribe

Adds a callback that will be called on state change.

Parameters

  • listener: () ⇒ void

    A callback to be invoked on state change.

Returns Unsubscribe: An unsubscribe function to remove the listener.

Attributes

state

The state of the BreadcrumbManager controller.

Properties

  • categoryFacetBreadcrumbs: CategoryFacetBreadcrumb[]

    The list of category facet breadcrumbs.

  • dateFacetBreadcrumbs: Breadcrumb<DateFacetValue>

    The list of date facet breadcrumbs.

  • facetBreadcrumbs: Breadcrumb<FacetValue>

    The list of specific facet breadcrumbs.

  • hasBreadcrumbs: boolean

    true if there are any available breadcrumbs (that is, if there are any active facet values), and false otherwise.

  • numericFacetBreadcrumbs: Breadcrumb<NumericFacetValue>

    The list of numeric facet breadcrumbs.

Initialize

buildBreadcrumbManager

Creates a BreadcrumbManager controller instance.

Parameters

  • engine: Engine<object>

    The headless engine.

Returns BreadcrumbManager

CategoryFacetBreadcrumb

Properties

  • deselect: () ⇒ void

    Deselects the corresponding facet value.

  • facetId: string

    The id for the underlying facet.

  • field: string

    The field on which the underlying facet is configured.

  • path: CategoryFacetValue[]

    The complete path of the underlying category facet value.

CategoryFacetValue

Properties

  • children: CategoryFacetValue[]

    The children of this facet value.

  • moreValuesAvailable: boolean

    Whether more values are available.

  • numberOfResults: number

    The number of results having the facet value.

  • path: string[]

    The hierarchical path to the facet value.

  • state: 'idle' | 'selected'

    Whether a facet value is filtering results (selected) or not (idle).

  • value: string

    The facet value.

Unsubscribe

Call signatures

  • (): void

Example Implementation

breadcrumb-manager.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {BreadcrumbManager as HeadlessBreadcrumbManager} from '@coveo/headless';
 
interface BreadcrumbManagerProps {
  controller: HeadlessBreadcrumbManager;
}
 
export const BreadcrumbManager: FunctionComponent<BreadcrumbManagerProps> = (
  props
) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  if (!state?.hasBreadcrumbs) {
    return null;
  }
 
  return (
    <ul>
      {state.facetBreadcrumbs.map((facet) => (
        <li key={facet.facetId}>
          {facet.field}:{' '}
          {facet.values.map((breadcrumb) => (
            <button
              key={breadcrumb.value.value}
              onClick={() => breadcrumb.deselect()}
            >
              {breadcrumb.value.value}
            </button>
          ))}
        </li>
      ))}
    </ul>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildBreadcrumbManager(engine);
 *
 * <BreadcrumbManager controller={controller} />;
 * ```
 */