Show or hide the object search bar in the top navigation bar.
|
Note
| The object search bar in the embed mode does not support the keyboard commands, such as kbd:[Cmd+K] on macOS or kbd:[Ctrl+K] on Windows, in embedded view. |
Customize navigation panels
Table of Contents
You can customize the navigation experience and the visibility of navigation menu elements using the Visual Embed SDK.
Navigation experience🔗
The navigation experience in a full application embed includes the following elements:
-
Top navigation bar with a modern look and feel. Includes the following components:
-
A hamburger icon for the sliding navigation overlay
-
Object search bar
-
Help and profile icons
-
Org switcher
-
-
Left navigation
-
A sliding left navigation panel controlled via the hamburger icon
-
Persona-based app selection icons in the panel header
-
Left navigation menu that adjusts its contents according to the application context
-
Customize the top navigation bar🔗
The following customization settings are available for the top navigation bar.
| SDK property | Description |
|---|---|
| Show or hide the navigation panels. |
| Show or hide the application switcher on the left navigation panel. |
| Show or hide the help and user profile icons in the top navigation bar. |
| Show or hide the Org switcher. |
| Show or hide the notification (bell) icon. |
| |
| Show or hide the hamburger icon in the top navigation bar. |
Example🔗
The following example hides the icons in the top navigation and the application selection menu:
const embed = new AppEmbed("#embed", {
//... modular home page experience attributes
showPrimaryNavbar: true,
hideApplicationSwitcher: true,
disableProfileAndHelp: true,
hideObjectSearch: true,
hideNotification: true,
//... other attributes
});Customize the left navigation panel on the home page🔗
In the modular and focused experience modes, the left navigation panel on the Insights > Home page includes menu items such as Spotter, 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:
| Enum | Description |
|---|---|
| Show or hide the |
| Show or hide the Home menu in the Insights panel. |
| Show or hide the Spotter menu item in the Insights panel. |
| Show or hide the Search Data in the Insights panel. |
| Show or hide the Liveboards menu in the Insights panel. |
| Show or hide the Answers menu in the Insights panel. |
| Show or hide the Monitor > Subscriptions menu in the Insights panel. |
| Show or hide the SpotIQ Analysis menu in the Insights panel. |
| Show or hide the Scheduled Liveboards section in the Insights panel. |
| Show or hide the Favorites menu in the Insights panel. |
| Show or hide the Collections menu item in the Insights left navigation panel. |
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", {
// 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
});