/
Tabs Component

Tabs Component

Owned by Jordan Kasper (Deactivated), created
Last updated: Sep 01, 2022
1 min read

Overview

The Tabs component is used to segment search results by item type, often products and content.

Selector

The selector for this component is <hawksearch-tabs>.

Data Model

The Facet data model is exposed to the Handlebars template. For more information, see Search Models.

Event Binding Attributes

Attribute Name

Attribute Value

Attribute Name

Attribute Value

hawksearch-tab-value

string

When an element with this attribute is clicked, the specified tab facet value will be selected and the search results will update.

Default Template

<ul class="tabs{{attribute ' tabs--list' (gt values.length 4)}}"> {{#each values}} <li class="tabs__item{{attribute ' tabs__item--selected' selected}}" hawksearch-tab-value="{{value}}">{{title}} ({{count}})</li> {{/each}} </ul>

Related content

Search Results Component
Search Results Component
Hawksearch Handlebars UI
More like this
Search Results List Component
Search Results List Component
Hawksearch Handlebars UI
More like this
Search Results Item Component
Search Results Item Component
Hawksearch Handlebars UI
More like this
Related Searches Facet Component
Related Searches Facet Component
Hawksearch Handlebars UI
More like this
Recent Searches Facet Component
Recent Searches Facet Component
Hawksearch Handlebars UI
More like this
Search Within Facet Component
Search Within Facet Component
Hawksearch Handlebars UI
More like this