BreadcrumbManager (Search Engine)

This is for:

Developer
Note

This component was introduced in version 1.41.7.

Example implementation

breadcrumb-manager.fn.tsx

import {BreadcrumbManager as HeadlessBreadcrumbManager} from '@coveo/headless';
import {useEffect, useState, FunctionComponent} from 'react';
 
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} />;
 * ```
 */

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

Methods

deselectAll

Deselects all facet values.

deselectBreadcrumb

Deselects a breadcrumb value.

Parameters

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state of the BreadcrumbManager controller.

Properties

  • automaticFacetBreadcrumbs: AutomaticFacetBreadcrumb[]

    The list of automatic facet breadcrumbs.

  • 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

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

  • numericFacetBreadcrumbs: Breadcrumb<NumericFacetValue>

    The list of numeric facet breadcrumbs.

  • staticFilterBreadcrumbs: StaticFilterBreadcrumb[]

    The list of static filter breadcrumbs.

Initialize

buildBreadcrumbManager

Creates a BreadcrumbManager controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

Returns BreadcrumbManager

AutomaticFacetBreadcrumb

Properties

  • label: string

    The label of the underlying facet.

  • facetId: string

    The ID of the underlying facet.

  • field: string

    The field on which the underlying facet is configured.

  • values: BreadcrumbValue<T>[]

    The list of facet values currently selected.

Properties

  • value: T

    The underlying value linked to this breadcrumb.

  • deselect: function

    A function that when called dispatches actions to deselect a breadcrumb value.

CategoryFacetBreadcrumb

Properties

  • facetId: string

    The ID of the underlying facet.

  • field: string

    The field on which the underlying facet is configured.

  • path: CategoryFacetValue[]

    The complete path to the underlying facet value.

  • deselect: function

    A function that when called dispatches actions to deselect a breadcrumb value.

CategoryFacetValue

Properties

  • children: CategoryFacetValue[]

    The children of this facet value.

  • isLeafValue: boolean

    When the hierarchical value has no children, this property is true.

  • moreValuesAvailable: boolean

    Whether more facet values are available.

  • numberOfResults: number

    The number of results that match the facet value.

  • path: string[]

    The hierarchical path to the facet value.

  • state: 'idle' | 'selected' | 'excluded'

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

  • value: string

    The facet value.

DeselectableValue

Properties

  • deselect: function

    A function that when called dispatches actions to deselect a breadcrumb value.

StaticFilterBreadcrumb

Properties

  • id: string

    The ID of the underlying static filter.

  • values: StaticFilterBreadcrumbValue[]

    The list of static filter values currently selected.

Unsubscribe

Call signatures

  • (): void;