|
Important
| The classic (V1) experience and V2 experience modes will be deprecated in an upcoming release in 2026. Therefore, ThoughtSpot recommends upgrading the UI experience of your full application embedding to the V3 experience. |
Customize navigation panels
You can customize the navigation experience and the visibility of navigation menu elements using the Visual Embed SDK.
Navigation experience🔗
The navigation structure in ThoughtSpot UI varies based on the UI experience mode set in your embed view.
| UI experience | Navigation options |
|---|---|
Classic (V1) experience | A standard top navigation bar with the following components:
|
V2 experience |
|
V3 experience |
|
Customize the top navigation bar🔗
The following customization settings are available for the top navigation bar.
| SDK property | Classic (V1) experience | V2 experience | V3 experience |
|---|---|---|---|
| ✓ Supported | ✓ Supported | ✓ Supported |
| x Not supported | ✓ Supported | ✓ Supported |
| ✓ Supported | ✓ Supported | ✓ Supported |
| ✓ Supported | ✓ Supported | ✓ Supported |
| x Not supported | x Not supported | ✓ Supported |
| Not applicable | ✓ Supported | ✓ Supported |
| Not applicable | Not applicable | ✓ Supported |
Example🔗
The following example hides the icons in the top navigation and the application selection menu:
const embed = new AppEmbed("#embed", {
//... V3 experience attributes
// Show navigation bar
showPrimaryNavbar: true,
hideApplicationSwitcher: true,
// Hide Help and User Profile icons in top navigation
disableProfileAndHelp: true,
// Hide object search bar in top navigation
hideObjectSearch: true,
// Hide the alert icon in top navigation
hideNotification: true,
//... other attributes
});
Customize the left navigation panel on the home page🔗
In the V2 and V3 experience modes, the left navigation panel on the Insights > Home page includes menu items such as Answers, Liveboards, SpotIQ Analysis, Monitor Subscriptions, and more. You can hide this navigation panel by setting the hideHomepageLeftNav property to true in the SDK. Note that this attribute hides the left navigation only on the home page.
If you want to include the left navigation, but hide only a specific section in the Insights panel, use the hiddenHomeLeftNavItems property and specify the menu items to hide. The allowed values for hiddenHomeLeftNavItems are listed in the following table:
| Allowed values | Classic (V1) experience | V2 experience | V3 experience |
|---|---|---|---|
| Not applicable | Not applicable | ✓ Supported |
| Not applicable | ✓ Supported | ✓ Supported |
| Not applicable | Not applicable | ✓ Supported |
| Not applicable | ✓ Supported | ✓ Supported |
| Not applicable | ✓ Supported | ✓ Supported |
| Not applicable | ✓ Supported | ✓ Supported |
| Not applicable | ✓ Supported | ✓ Supported |
| Not applicable | ✓ Supported | ✓ Supported |
| Not applicable | ✓ Supported | ✓ Supported |
| Not applicable | Not applicable | ✓ Supported |
Examples🔗
The following sections show code samples for customizing the default left navigation panel in the Insights section and the home page.
V3 experience🔗
import {
AppEmbed, // Main class to embed the full ThoughtSpot app
HomePage, // Enum for home page experience setting
PrimaryNavbarVersion, // Enum for navigation bar version
HomeLeftNavItem, // Enum for left navigation items
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
discoveryExperience: {
primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enable V3 navigation
homePage: HomePage.ModularWithStylingChanges, // Enable V3 modular home page
},
// Show navigation bar
showPrimaryNavbar: true,
// Show left navigation on home page
hideHomepageLeftNav: false,
// Hide SpotIQ analysis and Favorites menu options
hiddenHomeLeftNavItems: [
HomeLeftNavItem.Favorites,
HomeLeftNavItem.SpotIQAnalysis
],
//... other embed view configuration attributes
});
V2 experience🔗
import {
AppEmbed, // Main class to embed the full ThoughtSpot app
HomeLeftNavItem, // Enum for left navigation items
} from '@thoughtspot/visual-embed-sdk';
const embed = new AppEmbed("#embed", {
// Enable the V2 navigation experience
modularHomeExperience: true,
// Show left navigation panel
hideHomepageLeftNav: false,
// Hide SpotIQ analysis and Monitor subscriptions menu options
hiddenHomeLeftNavItems: [
HomeLeftNavItem.MonitorSubscription,
HomeLeftNavItem.SpotIQAnalysis
],
//... other embed view configuration attributes
});
Customize the Help menu🔗
If you want to include the help menu and add custom links to it, ensure that the top navigation bar is visible and disableProfileAndHelp is set to false.
By default, the help menu in the embedded view shows the legacy information center controlled using Pendo. To enable the new information center and add custom links, set enablePendoHelp to false.
To add custom links to the help menu, use the customization settings available on the Admin settings > Help customization page. For more information, refer to the ThoughtSpot Product Documentation.
const embed = new AppEmbed("#embed", {
// Display the top navigation bar
showPrimaryNavbar: true,
// Show the profile and help icons in the top navigation bar.
disableProfileAndHelp: false,
// Use the new ThoughtSpot information center for help and support.
enablePendoHelp: false,
//... other embed view configuration attributes
});