---
title: Manage components on a per-tab basis
slug: '2833'
canonical_url: https://docs.coveo.com/en/2833/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Manage components on a per-tab basis
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.


[.version.c4sc.c4sc-new.5-0-239-2.February-26&-2019]
[Coveo for Sitecore 5.0.239.2](https://docs.coveo.com/en/2764#release-notes)


When adding tabs to your search interface, you most likely want to manage your components on a per-tab basis.
The Coveo JavaScript Search Framework `data-tab` and `data-tab-not` attributes may be used to show components only when a user selects one or several specific tabs (see [Use Components Only on Specific Tabs](https://docs.coveo.com/en/508/)).

In the February 2019 version of Coveo for Sitecore, a new data source option called `Additional Data Attributes` was added on many Coveo Hive components to leverage Coveo JavaScript Search Framework options not directly available in the data source itself (see [Pass non-fronted JavaScript Framework properties to Hive components](https://docs.coveo.com/en/2776/)).
The `Additional Data Attributes` option is therefore the mechanism you should use to define component visibility on a per-tab basis.

> **Note**
>
> Facets are already not displayed when no search result item contains the associated field.
> Leveraging the `data-tab` and `data-tab-not` attributes with the `Additional Data Attributes` option on facets should therefore not be used when the filtering specified on the **Coveo Tab** component data source already eliminates the possibility of having result items which contain the facet field.

**Example**

You have added several tabs in your Coveo for Sitecore search interface.
On the `All Content` tab, your users can search for any item in your web database.
On the `Staff` tab, you've configured a filtering rule so that only items based off of a `staff` template.
You already have numerous facets displayed when the `All Content` tab is selected and you feel that it's only relevant to display the `Department` facet when a user selects the `Staff` tab.

To display the `Department` facet only when a user selects the `Staff` tab

. Add the `Department` facet to your search interface (see [Coveo Facet](https://docs.coveo.com/en/3027/?c4scV5HiveType=tab-hive)).

. In the Sitecore **Experience Editor**, select the `Department` facet.

. In the floating toolbar, select the **Edit the rendering's data source** option.
It should be the leftmost option in the toolbar.

. Scroll all the way down to the **Attributes** section.

. Under `Additional Data Attributes`, in the key field, type `tab`.

. In the value field, paste the `DOM Unique Id` value of the `Staff` **Coveo Tab** component.

![Screenshot of the data source Additional Data Attributes with a Tab key and its value set to a DOM unique id | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/facet-tab-in-additional-data-attributes.png)

. Click **OK**.
The changes are applied immediately in the **Experience Editor**.

. Publish your changes.

> **Notes**
>
> * Use camel case notation for multi-word Coveo JavaScript Search Framework attributes (see [Coveo JavaScript Search Framework](https://coveo.github.io/search-ui/globals.html)).
> For example, type `tabNot` in the `Additional Data Attributes` key field to reference the `data-tab-not` Coveo JavaScript Search Framework attribute.
>  
> ![Screenshot of a data source with a tab not key and its value set to a DOM unique Id value | Coveo](:https://docs.coveo.com/en/assets/images/c4sc-v5/additional-data-attributes-multi-word-attributes.png)
> 
> * To specify many tabs in the `Additional Data Attributes` value field, use a comma to separate your `DOM Unique Id` values.
>  
> ![Screenshot of a data source with a Tab key and its value set to two DOM unique ids separated by a comma | Coveo](:https://docs.coveo.com/en/assets/images/c4sc-v5/additional-data-attributes-multi-values.png)