Overview

The Facets List component displays a list of available facets with a toggle to expand/collapse on mobile devices.

Selector

The selector for this component is <hawksearch-facets-list>.

Data Model

The following data model is exposed to the Handlebars template:

{
  facets: Array<Facet>;
  expanded: boolean;
}

For more information, see Search Models.

Event Binding Attributes

Attribute Name	Attribute Value

Attribute Name	Attribute Value
hawksearch-mobile-toggle

When an element with this attribute is clicked, the expanded value will be reversed. This is intended to show/hide the list of facets on mobile devices.

Default Template

<div class="facets{{attribute ' facets--expanded' expanded}}">
    <div hawksearch-mobile-toggle class="facets__heading">
        Narrow Results
        <hawksearch-icon name="{{if-else expanded 'chevron-down' 'chevron-right'}}" size="1.5rem" class="facets__heading__mobile-toggle"></hawksearch-icon>
    </div>
    <div class="facets__content">
        {{#each facets}}
            <hawksearch-facet-wrapper hawksearch-facet-id="{{id}}"></hawksearch-facet-wrapper>
        {{/each}}
    </div>
</div>

Hawksearch Handlebars UI

Facets List Component

Analytics

Overview

Selector

Data Model

Event Binding Attributes

Default Template

Related content