diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_01.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_01.png new file mode 100644 index 00000000..e082ff79 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_01.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_02.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_02.png new file mode 100644 index 00000000..bf4a1719 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_02.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_03.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_03.png new file mode 100644 index 00000000..cb5400df Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_03.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_04.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_04.png new file mode 100644 index 00000000..35198f5f Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_04.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_05.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_05.png new file mode 100644 index 00000000..14d1c66c Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_05.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_06.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_06.png new file mode 100644 index 00000000..dcf67f0f Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_06.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_07.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_07.png new file mode 100644 index 00000000..5ee14ac4 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_07.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_08.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_08.png new file mode 100644 index 00000000..15fdb708 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_export_08.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_01.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_01.png new file mode 100644 index 00000000..de5e74c9 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_01.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_02.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_02.png new file mode 100644 index 00000000..e8e249b4 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_02.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_03.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_03.png new file mode 100644 index 00000000..baf8faf1 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_03.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_05.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_05.png new file mode 100644 index 00000000..1e2c6858 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/api_hidemenu_05.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/caret.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/caret.png new file mode 100644 index 00000000..13a132ab Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/caret.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/closeview.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/closeview.png new file mode 100644 index 00000000..d0fbb0e4 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/closeview.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/crane.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/crane.png new file mode 100644 index 00000000..225ecf3f Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/crane.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/facebook.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/facebook.png new file mode 100644 index 00000000..fa3f0e02 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/facebook.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/greencheckbox.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/greencheckbox.png new file mode 100644 index 00000000..69cb876e Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/greencheckbox.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/heart_icon.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/heart_icon.png new file mode 100644 index 00000000..bff9ea90 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/heart_icon.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/horizonalline.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/horizonalline.png new file mode 100644 index 00000000..7c49d872 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/horizonalline.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/linkedin.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/linkedin.png new file mode 100644 index 00000000..d1a0636d Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/linkedin.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/sigma_footer.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/sigma_footer.png new file mode 100644 index 00000000..df51d771 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/sigma_footer.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/twitter.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/twitter.png new file mode 100644 index 00000000..5a827d72 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/twitter.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/workflow.png b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/workflow.png new file mode 100644 index 00000000..30d13f15 Binary files /dev/null and b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/assets/workflow.png differ diff --git a/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/embedding_rest_api_useage_09_hide_menu_page_nav.md b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/embedding_rest_api_useage_09_hide_menu_page_nav.md new file mode 100644 index 00000000..1dcdb2db --- /dev/null +++ b/site/sigmaguides/src/embedding_rest_api_useage_09_hide_menu_page_nav/embedding_rest_api_useage_09_hide_menu_page_nav.md @@ -0,0 +1,228 @@ +author: pballai +id: embedding_rest_api_useage_09_hide_menus +summary: embedding_rest_api_useage_09_hide_menus +categories: embedding +environments: web +status: published +feedback link: https://github.com/sigmacomputing/sigmaquickstarts/issues +tags: default +lastUpdated: 2025-08-08 + +# REST API Usage 09: Hide Menus & Page Nav + +## Overview +Duration: 5 + +Some embed customers prefer to have the host application control page navigation and hide the default menu options included in a Sigma embed. + +This QuickStart demonstrates how to hide Sigma's built-in menus, and programmatically navigate between workbook pages using the Sigma Embedding API in an embedded application. + + + + + +[REST API Usage 01: Getting Started](https://quickstarts.sigmacomputing.com/guide/embedding_rest_api_usage_01_getting%20started_started/index.html?index=..%2F..index#0) + + + +For more information on Sigma's product release strategy, see [Sigma product releases](https://help.sigmacomputing.com/docs/sigma-product-releases) + +If something doesn’t work as expected, here's how to [contact Sigma support](https://help.sigmacomputing.com/docs/sigma-support) + +### Target Audience +Developers who want to use Sigma's REST API to programmatically control Sigma in an embedded context. + +### Prerequisites + + + + + +
+ + + + + +![Footer](assets/sigma_footer.png) + +## Start the Server +Duration: 5 + +Start the Express server in terminal from the `embedding_qs_series_2_api_use_cases` folder and enable debugging: +```code +DEBUG=true npm start +``` + +The server is ready when it displays: `Server listening at http://localhost:3000`. + +Browse to the landing page: +```code +http://localhost:3000 +``` + +Select the `Hide Sigma Menus / Page Nav` page and click `Go`. + +Select the `Build` user and the `Embed_API_QuickStart` workbook. + +Since we are using the workbook created during the `REST API Usage 01: Getting Started` QuickStart, we will already have two workbook pages. If not, review [section 3](https://quickstarts.sigmacomputing.com/guide/embedding_rest_api_usage_01_getting%20started_started/index.html?index=..%2F..index#2) of getting started to see how the workbook was created. + +When the workbook loads, the `Page` menu is set to show all pages and there is a button that allows the Sigma menus to be toggled on/off: + + + + + +![Footer](assets/sigma_footer.png) + + +## Hiding Menus +Duration: 5 + +Clicking the `Hide Sigma Menus` button sends optional user interface parameters to Sigma. These values are embedded in the JWT and can be viewed in the decoded token in the sidebar: + + + +The specific parameters we adjusted are: +```code +HIDE_FOLDER_NAVIGATION # Show folder navigation (default=false) +HIDE_MENU # Show main menu bar (default=false) +HIDE_PAGE_CONTROLS # Show page controls (default=false) +MENU_POSITION # Position menus at top (When no value is specified, defaults to none.) +``` + +These default values are set in the `.env` file, and the application updates them dynamically when the button is clicked. + + + +You can see how these parameters are set in your browser’s developer console—each button click is logged for easy inspection: + + + +For more information, see [Embed URL parameters](https://help.sigmacomputing.com/docs/embed-url-parameters) + +![Footer](assets/sigma_footer.png) + + +## Page Navigation +Duration: 5 + +With the Sigma menu hidden, we needed to provide a way to navigate between workbook pages from the host application. + +The `Page` list control displays all pages in the selected workbook and allows the user to choose one for display. + +The application uses several Sigma Embedding API endpoints to enable dynamic page navigation. These endpoints are fully described in the project’s `README`. + +Once a page is selected from the `Pages` control, the button to hide/show menus is hidden. This is because Sigma’s built-in menus are not shown when page-level embeds are used. + +For more information, see [What URL to use](https://help.sigmacomputing.com/docs/create-an-embed-api-with-json-web-tokens#what-url-to-use) + + + +### Page control alternatives +We chose to use a list control for simplicity, but there are many other options available to suit your host application’s UX requirements. + +The best approach often depends on how many workbook pages exist and how users are expected to navigate them. For example: +For example: + +**For just a few pages, a card-based grid can provide visual appeal:**
+```html +
+
+
📊
+

Sales Dashboard

+

Monthly sales performance metrics

+
+
+``` + +**With 4–8 pages, a tabbed interface works well:**
+```html +
+ + + +
+``` + +**For 8–20 pages, a sidebar navigation pattern adds clarity:**
+```html +
+
Financial Reports
+ +
+``` + +**With 20+ pages, a searchable dropdown is typically most scalable:**
+```html +
+ +
+ +
+
+``` + +Choose the pattern that best balances usability and scale for your users. Each approach can be wired to Sigma’s page navigation API just like the list control used in this QuickStart. + +## Advanced Use Cases +This design pattern can be extended to support more advanced embedding scenarios, including: +- **Role-based menu control** – Customize menu visibility based on user roles or permissions +- **Context-aware navigation** – Display dynamic page lists based on user access or workflow context +- **Branded navigation** – Build custom navigation overlays that wrap and control Sigma embeds +- **Multi-workbook experiences** – Enable seamless navigation across multiple embedded workbooks +- **Mobile-responsive embedding** – Adapt controls and layout for different device screen sizes + +Sigma’s embedding API gives you the flexibility to design tailored, high-quality user experiences that match your application’s needs. + +## What we've covered +Duration: 5 + +In this QuickStart, you learned how to customize Sigma embeds by hiding built-in menus and controlling workbook page navigation from a host application. We covered: +- Using .env parameters and JWT settings to control menu visibility in Sigma +- Navigating between workbook pages programmatically using Sigma’s Embedding API +- Designing host-side UI controls (like dropdowns or tabs) to drive embedded page changes +- Exploring alternative UX patterns for page navigation based on the number of pages +- Considering advanced use cases like role-based UI, multi-workbook navigation, and mobile responsiveness + +This approach gives developers full control over the embedded experience while preserving the flexibility of Sigma’s native features. + +**Additional Resource Links** + +[Blog](https://www.sigmacomputing.com/blog/)
+[Community](https://community.sigmacomputing.com/)
+[Help Center](https://help.sigmacomputing.com/hc/en-us)
+[QuickStarts](https://quickstarts.sigmacomputing.com/)
+ +Be sure to check out all the latest developments at [Sigma's First Friday Feature page!](https://quickstarts.sigmacomputing.com/firstfridayfeatures/) +
+ +[](https://twitter.com/sigmacomputing)  +[](https://www.linkedin.com/company/sigmacomputing)  +[](https://www.facebook.com/sigmacomputing) + +![Footer](assets/sigma_footer.png) + +