Tabs Component

Owned by Jordan Kasper (Deactivated), created

Last updated: Sep 01, 2022

1 min read

1 Overview
2 Selector
3 Data Model
4 Event Binding Attributes
5 Default Template

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>