> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ws-search-result-tabs

> ws-search-result-tabs creates a tab navigation for search results from different sources (products, categories, content) with configurable selection behavior.

The `<ws-search-result-tabs>` component provides a tab navigation for search results from different sources (for example products, categories, content). The tabs are generated automatically from the embedded `<ws-search-result>` instances. The selection and display behavior for empty results can be controlled via attributes.

## Prerequisite

* The `<ws-search-result>` instances must be child elements within `<ws-search-result-tabs>`.
* JavaScript bundle `ws-search-component-<version>.js` from version **1.9.1** onwards

## Component

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-result-tabs
  container-class="btn-group w-100"
  btn-class="btn btn-primary"
  content-class="tab-content mt-4"
  pane-class="tab-pane fade"
  default-tab="product,content"
  on-empty="skip"
  empty-tab="disabled">

  <template slot="tab-product">
    <div slot="label">
      <ws-search-info data-template="Products ({% result.product.sub_total %})"></ws-search-info>
    </div>
    <div slot="content">
      <!-- Filter/Sort buttons only for the product tab -->
      <div class="row mb-3">...</div>
    </div>
  </template>

  <template slot="tab-category">
    <div slot="label">
      <ws-search-info data-template="Categories ({% result.category.sub_total %})"></ws-search-info>
    </div>
  </template>

  <!-- Bundle content_static and content_blog into a shared "content" tab -->
  <template slot="tab-content">
    <div slot="label">
      <ws-search-info source="content" data-template="Content ({% result.total %})"></ws-search-info>
    </div>
  </template>

  <ws-search-result source="product" class="row"></ws-search-result>
  <ws-search-result source="category" class="row"></ws-search-result>
  <ws-search-result source="content_static" tab="content" class="row"></ws-search-result>
  <ws-search-result source="content_blog"   tab="content" class="row"></ws-search-result>

</ws-search-result-tabs>
```

* **Attributes**
  * `container-class`: CSS classes for the tab-button container.
  * `btn-class`: CSS classes for the tab buttons.
  * `content-class`: CSS classes for the tab-content container.
  * `pane-class`: CSS classes for the individual tab panes.
  * `default-tab`: Determines which tab is opened after a search:
    * `sticky`: The tab last opened. (Default)
    * `first`: Always the first tab.
    * `<source>`: A source or a comma-separated list of sources, for example `default-tab="product"` or `default-tab="product,content"`. With multiple sources, the first tab with results is selected.
  * `on-empty`: Controls the selection behavior when the tab selected via `default-tab` is empty:
    * `skip`: Jumps to the first tab with results. (Default)
    * `show`: The selected tab remains active even if it is empty.
  * `empty-tab`: Determines what happens with empty tabs:
    * `disabled`: Tabs remain visible but can no longer be selected (inactive). (Default)
    * `enabled`: Tabs remain visible and can still be selected.
    * `hidden`: Tabs are hidden.

### `tab` attribute on `ws-search-result`

Without any further specification, each instance of `<ws-search-result>` forms its own tab. The tab name corresponds to the source (`source`). Using the `tab` attribute on `<ws-search-result>`, several instances can be bundled into a shared tab. In the example above, `content_static` and `content_blog` are combined into the `content` tab.

## Tab templates

For each tab, a `<template slot="tab-<tabname>">` can be defined:

* `<div slot="label">`: **Required.** Content of the tab button. For dynamic hit counts in the label, [ws-search-info](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-info) can be used.
* `<div slot="content">`: Optional. Additional content within the tab, for example filter or sort elements that should only be displayed in this tab.

## Behavior

* The tabs are generated automatically from the `<ws-search-result>` child elements.
* In the tab labels, `ws-search-info` can be used for dynamic hit counts; the display updates automatically when new search results are available.

<Info>
  `ws-search-result-tabs` is available from `ws-search-component-1.9.1.js` onwards and replaces custom-built tab navigations (for example via buttons with `hide-with` or `visibility` and `total-container` labels).
</Info>