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 }">×</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. |