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.

    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.

    Topic Tabs module

    When using the global default configuration, if there are no search results for a tab, then the tab is grayed out.

    Topic Tabs module

    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 topics attribute in the <cloud-tabs> element, for example, <cloud-tabs topics="marketing=Marketing,finance=Finance"></cloud-tabs>. For more information, see Configure tabs.

    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 language URL parameter in the loader.js URL in the embed snippet that you copy to the <head> element.
    To configure a Topic Tabs module

    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 (1)

    All tabs are present.

    The All tab is first. Other tabs are in the order in which data sources were created. Tabs with no results are absent.

    Topic display names are used.

    Configure the Topic Tabs module (2)

    Overrides (1)

    Specified tabs and the All tab are present.

    The All tab is first. Other tabs are in the order specified. Tabs with no results are grayed out.

    Display names specified in the module configuration are used. For omitted names, the topic display names are used.

    Modify snippets for embedded modules (3)

    Overrides (2) and (1)

    Specified tabs and the All tab are present.

    The All tab is first. Other tabs are in the order specified. Tabs with no results are grayed out.

    Display names specified in the embedded module snippet are used. For omitted names, the topic display names are used.

    Configure the Topic Tabs module

    To configure the Topic Tabs module

    1. In the Page Builder, hover over the Topic Tabs module, and then click Edit module.

    2. 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,...

    3. Click Apply.

    Modify embedded snippets

    To modify embedded snippets for a Topic Tabs module:

    1. Copy the snippets for the Topic Tabs module to a web page.

    2. 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.