---
title: QuanticTabBar
slug: latest-search-tab-bar
canonical_url: https://docs.coveo.com/en/quantic/latest/reference/search-components/search-tab-bar/
collection: quantic
source_format: adoc
---
# QuanticTabBar

> **Note**
>
> This component was introduced in version `1.22.2`.

The `QuanticTabBar` component presents a set of tabs in a responsive, adaptable layout.
When the width of the container is insufficient to display all tabs, the excess tabs are moved into a "More" dropdown menu,
ensuring accessibility across different screen sizes.

## Example

```html
<c-quantic-tab-bar light-theme>
  <c-quantic-tab engine-id={engineId} label="Tab 1" expression={expressionOne} is-active></c-quantic-tab>
  <c-quantic-tab engine-id={engineId} label="Tab 2" expression={expressionTwo}></c-quantic-tab>
  <c-quantic-tab engine-id={engineId} label="Tab 3" expression={expressionThree}></c-quantic-tab>
</c-quantic-tab-bar>
```

## Properties

--
|===
| Property | Attribute | Description | Type | Default

| `lightTheme` _(required)_
| `light-theme`
a| Whether to apply the light theme styles on this component. This property has an impact only in a Salesforce console.
| `boolean`
|

|===
--

## XML configuration file elements

The following XML configuration file elements apply (see [XML Configuration File Elements](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_configuration_tags)).

--
|===
| Metadata | Value

| `apiVersion` | `54.0`
| `isExposed` | `false`
|===
--

## Associated use cases

This component is also relevant in the following use case:

* [Insight Panel](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-tab-bar)