Analytics & Reports
Analytics

Breadcrumbs

The container for breadcrumbs.

Provided Aliases: $breadcrumbs

Structure

html
<gb-breadcrumbs>
  <gb-query-crumb>
    <gb-original-query>
      <span if="{ $breadcrumbs.showLabels && $breadcrumbs.originalQuery }">{ $breadcrumbs.labels[$breadcrumbs.correctedQuery ? 'noResults' : 'results'] }</span>
      <span>{ $breadcrumbs.originalQuery }</span>
    </gb-original-query>
    <gb-corrected-query>
      <span if="{ $breadcrumbs.showLabels && $breadcrumbs.correctedQuery }">{ $breadcrumbs.labels.corrected }</span>
      <span>{ $breadcrumbs.correctedQuery }</span>
    </gb-corrected-query>
    <gb-clear-query if="{ $breadcrumbs.originalQuery }">
      <gb-link on-click="{ $clearQuery.onClick }">&times;</gb-link>
    </gb-clear-query>
  </gb-query-crumb>
  <gb-list items="{ $breadcrumbs.fields }">
    <gb-refinement-crumbs field="{ $item }">
      <h4>{ $refinementCrumbs.label }</h4>
      <gb-list items="{ $refinementCrumbs.refinements }" item-alias="refinement">
        <gb-refinement-crumb>
          <span>{ $refinement.range ? $refinement.low + ' - ' + $refinement.high : $refinement.value }</span>
        </gb-refinement-crumb>
        <gb-clear-refinement field="{ $refinement.field }" index="{ $refinement.index }"></gb-clear-refinement>
      </gb-list>
    </gb-refinement-crumbs>
  </gb-list>
</gb-breadcrumbs>

Example Implementation

// index.js
const labels = {
    results: 'Results:',
    noResults: 'No Results:',
    corrected: 'Corrected:'
};
<!-- index.html -->
<gb-breadcrumbs showLabels="{ true }" labels="{ labels }"></gb-breadcrumbs>

Properties

All of these are optional.

Property Type Default Notes
showLabels boolean true A boolean value indicating if labels are displayed.
labels.results string 'Results:' The label for when there are results.
labels.noResults string 'No Results:' The label for when there are no results.
labels.corrected string 'Corrected:' The label for when the search term was auto-corrected.
Corrected

The corrected string will appear after the word that wasn’t found, and before the autocorrect. For example, with the above code you’d see olya was not found, we corrected to olay.

These are configurable via tags: read more under configuration.

State

Property Type Default Notes
fields string[] [] (Deprecated: use selectedNavigations state property instead) An array of refinement names.
originalQuery string null The most recent query made. (Based off the originalQuery in the search API.)
correctedQuery string The most recent query made, as corrected by the search engine. Please see more under Search API Response to see when this is triggered.
selectedNavigations Store.Navigation[] [] An array of selected navigation objects.

Events

Event Affected State Properties
'original_query_updated' originalQuery
'corrected_query_updated' correctedQuery
'navigations_updated' fields

Child Components: Query Crumb

The container for query breadcrumbs.

  • This component does not have any properties.
  • This component does not have any properties in state.
  • This component does not listen for any events.

Example

<gb-query-crumb></gb-query-crumb>

Child Components: Query Crumb - Original Query

The display container for the original query.

  • This component does not have any properties.
  • This component does not have any properties in state.
  • This component does not listen for any events.

Example

<gb-original-query></gb-original-query>

Child Components: Query Crumb - Corrected Query

The display container for the corrected query.

  • This component does not have any properties.
  • This component does not have any properties in state.
  • This component does not listen for any events.

Example

<gb-corrected-query></gb-corrected-query>

Child Components: Query Crumb - Clear Query

The component to clear the query.

  • This component does not have any properties.
  • This component does not have any properties in state.

Example

<gb-clear-query></gb-clear-query>

Child Components: Refinement Crumbs

The container for refinements breadcrumbs.

Example

<gb-refinement-crumbs field="{ 'Size' }"></gb-refinement-crumbs>

Properties

Property Type Default Required Notes
field string Yes (Deprecated: use selectedNavigation property instead) The name of the refinement.
selectedNavigation Store.Navigation The associated navigation object.

State

Property Type Default Notes
label string None The displayed label for the refinement.
refinements Store.Refinement[] None The selected refinements.

Events

Event Affected State Properties
'selected_refinements_updated' refinements

Child Components: Refinement Crumbs - Refinement Crumb

The container to display the refinement breadcrumb.

  • This component does not have any properties.
  • This component does not have any properties in state.

Example

<gb-refinement-crumb></gb-refinement-crumb>

Child Components: Refinement Crumbs - Clear Refinement

The component to clear the refinement.

  • This component does not listen for any events.

Example

<gb-clear-refinement field="{ $refinement.field }" index="{ $refinement.index }"></gb-clear-refinement>

Properties

Property Type Default Required Note
field string Yes The name of the refinement to be cleared.
index number Yes The index of the refinement to be cleared.

State

Property Type Default Note
onClick() function De-selects the specified refinement.