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

# Tabs tag

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

[localhost link]: http://localhost:3000/docs/4/app-studio/concepts/navigation/tabs-tag

[old doc.lw link]: https//doc.lucidworks.com/app-studio/4.2/3107

[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/concepts/navigation/tabs-tag

The Tabs tag displays user interface components for tab-based navigation or filtering. The tag can be used to either output path-based tabs or filter tabs.

With path-based tabs, the tag outputs a fixed set of tabs that link to different URLs in the search application. This can be used to direct the user’s search query between different views or collections, for example.

When displaying filter tabs, specific filters from a given facet are output even when the filter has no hits. This is often used for tab-based filtering, such as when the chosen facet partitions the search collections into different types of content. Be aware that when displaying filter tabs, this tag performs a second query to the search platform.

<Note>
  The Tabs tag subsumes the functionality of the older Filter Tabs tag.
</Note>

<LwTemplate />

## Usage for path-based tabs

This example shows how to display a fixed set of tabs, each linking to a different search URL. In this case, the tag outputs three tabs, labelled 'Content', 'People' and 'All content', which link to `<contextPath>/content`, `<contextPath>/people` and `<contextPath>`, respectively. When clicking on each of the three tabs, the current search query (the `query` object) is taken into account and appended to the URL that is generated.

```xml wrap  theme={"dark"}
<search:tabs query="query" tabs="content=Content,people=People" all="true" all-label="All content"></search:tabs>
```

## Usage for tab-based filtering

This example shows how to display filter tabs for a particular field. Filter based tabs are enabled by the addition of a `field-name="mediaType"` attribute, mediaType being the chosen field to filter on.

In this case both 'Videos' and 'Podcasts' filter will be grouped under the 'Multimedia' tab (using an OR query).

```xml wrap  theme={"dark"}
<search:tabs field-name="mediaType" tabs="Articles,Blogs,Videos|Podcasts=Multimedia"
    all-label="Everything" platform="platform" response="response"
    query="query" count-number="rounded"></search:tabs>
```

For a complete list of attributes, see the [`search:tabs`](/docs/4/app-studio/reference/tags/lightning.directive.searchTabs) tag doc.