verticalPages Initialization | Yext Hitchhikers Platform

Configuration

verticalPages is included in the initialization, and is used in various components that require information about the vertical search pages, including Navigation , Universal Results and No Results in Vertical Results . It takes an array of objects, each representing a vertical search page.

ANSWERS.init({
  apiKey: "3517add824e992916861b76e456724d9",
  experienceKey: "answers-js-docs",
  businessId: "3215760",
  experienceVersion: "PRODUCTION",
  verticalPages: [
  {
    label: "Home",
    url: "index.html",
    icon: "star",
    isFirst: true,
    isActive: true,
    hideInNavigation: false
  },
  {
    label: "Locations",
    url: "/locations.html",
    verticalKey: "locations",
    icon: "pin",
    isFirst: false,
    isActive: false,
    hideInNavigation: false
  },
  // Other pages here
],
  onReady: function() {
    // ADD COMPONENTS HERE
  },
});

Where Is It Used?

Option	No Results	`UniversalResults`	`Navigation`
`label`	Used in alernative verticals.	Not used	Used as tab label
`url`	Used in alernative verticals	Used in “View More” link if not specified	Used as tab URL
`icon`	Used in alernative verticals.	Not used	Not used
`isFirst`	Not used	Not used	Used to determine which tab is pinned to the first slot
`isActive`	Not used	Not used	Used to determine which tab gets active state
`hideInNavigation`	Not used	Not used	Used to determine which tabs are hidden

Recommended Configuration

`isFirst` and `isActive`

The navigation component should ideally always display universal search as the first tab (isFirst), and the current page as active (isActive). It’s therefore recommended that your universal tab is always set to isFirst: true on each page, and the current page is set to isActive: true.

`hideInNavigation`

In the case that you have a vertical that you would like to remove from the navigation, but still maintain a page for, you can toggle the hideInNavigation boolean as needed. All other configuration will still be passed to the Navigation, No Results, and UniversalResults.

Example

verticalPages Initialization API

Property	Type	Description
label	string	REQUIRED The label for this page, used in both the `Navigation` and no results
url	string	REQUIRED The link to this page, used in `Navigation`, no results and `UniversalResults`
verticalKey	string	The verticalKey, required for vertical search pages, must be omitted for universal search
icon	string	The icon associated with this vertical, used in no results
iconUrl	string	the url of the icon associated with this vertical, used in no results. Takes precedence over `icon`.
isFirst	boolean	If true, will show this page first in `Navigation`
isActive	boolean	If true, will add active styling to this page in `Navigation`
hideInNavigation	boolean	If true, hide this tab in the `Navigation`

Back

< Search Initialization

Versions >

<% elem.innerText %>