TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

Custom Tab


Name Type Description
expression string Query expression to be applied when button is toggled
label string Renders a title for the custom tab
tab-id string A unique identifier for the tab. The value will be used as the originLevel2 when the tab is active.
is-active boolean Defines whether the custom tab is active on render. There should only be one active tab on render, if there are multiple, the last rendered active tab will be active
excluded-facets string comma separated list of facetid or facet fields that should be excluded from the tab.

Shadow Parts

Part Description
"tab-anchor" part for the tab button styling
"tab-label" part for the label styling

This component provides a custom tab that allows isolating the search interface into multiple use cases. For example, in one tab you might want to show only youtube sources and in another tab you want to show all your sources and would like to easily switch between these two tabs, this component allows you to do that. This component can be placed anywhere but it is recommended that it is placed above the <atomic-search-layout> div so that it is on top of the page.

<div class="tab-container"> 
    <custom-tab expression="" label="All" tab-id="all" is-active="true"></custom-tab> 
    <custom-tab expression="@source==(YouTube)" label="Youtube Sources" tab-id="youtube" is-active="false" excluded-facets="source,filetype"></custom-tab> 

Built With Stencil

Package Sidebar


npm i custom-tab

Weekly Downloads






Unpacked Size

2.46 MB

Total Files


Last publish


  • jfallaire
  • jantoun_coveo