Topic Tabs
Topic Tabs modules display a tabbed navigation element based on topics. Topics are meaningful characterizations of the data from data sources, including the source of the data. A topic can be applied to one or more data sources, and a data source can have one or more topics.
Examples
The pointer in this screenshot points to a Topic Tabs module.
Here, a different tab is selected. Notice that the search results change, as do the facets and counts for facets. The search results probably change. In this case, they didn’t because the search language is English and the English results are boosted above the French results.
When using the global default configuration, if there are no search results for a tab, then the tab is grayed out.
Configuration
Location | Option | Description |
---|---|---|
Edit Module |
Tabs |
Specify the tabs present, their order, and optionally the tab names. |
Embed Module |
Tabs |
Override the default tabs for a Topic Tabs module. In the snippet for the Topic Tabs module, include a |
Embed Module |
UI language |
UI language for the Search Box. To specify a different UI language for an embedded module (or to explicitly specify English), add a |
See Configure modules.
Configure tabs
You can configure the tabs present, the order of tabs, and the names displayed on tabs:
-
Single customization – To make a single customization of the presence, order, and display names of tabs, configure the Topic Tabs module in the Admin UI.
-
Multiple customizations – To make multiple customizations of the presence, order, and display names of tabs, modify the separate embedded snippets for the Topic Tabs modules.
You can configure tab names to provide language-specific tab names.
This table describes configuration in detail:
Override hierarchy | Presence | Order | Naming |
---|---|---|---|
Global default |
All tabs are present. |
The |
Topic display names are used. |
Configure the Topic Tabs module Overrides |
Specified tabs and the |
The |
Display names specified in the module configuration are used. For omitted names, the topic display names are used. |
Modify snippets for embedded modules Overrides |
Specified tabs and the |
The |
Display names specified in the embedded module snippet are used. For omitted names, the topic display names are used. |
Configure the Topic Tabs module
-
In the Page Builder, hover over the Topic Tabs module, and then click
.
-
Under Tabs, specify the tabs present and their order. Optionally, specify display names for tabs. For any tabs for which you don’t specify names, Site Search uses the display names for the topics.
The format to just specify tabs present (refer to them by topic names) and their order is:
topic1name,topic2name,...
The format to specify the tabs present, order, and tab names is:
topic1name=tab1name,topic2name=tab2name,...
For each tab, you can specify a tab name or not, for example:
topic1name=tab1name,topic2name,topic3name=tab3name,...
-
Click Apply.
Modify embedded snippets
-
Copy the snippets for the Topic Tabs module to a web page.
-
Edit the second snippet (the
<cloud-tabs>
one) to include a topics parameter.
Syntax of the topics parameter:
The syntax to just specify tabs present (refer to them by topic names) and their order is:
<cloud-tabs topics="topic1name,topic2name,..."></cloud-tabs>
The syntax to specify the tabs present, order, and tab names is:
<cloud-tabs topics="topic1name=tab1name,topic2name=tab2name,..."></cloud-tabs>
For each tab, you can specify a tab name or not, for example:
<cloud-tabs topics="topic1name=tab1name,topic2name,topic3name=tab3name,..."></cloud-tabs>
Style Topic Tabs modules with CSS
You can use cascading style sheets (CSS) to style Topic Tabs modules.