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
For more information on Sigma's product release strategy, see Sigma product releases
If something doesn't work as expected, here's how to contact Sigma support
Target Audience
Developers who want to use Sigma's REST API to programmatically control Sigma in an embedded context.
Prerequisites
- Any modern browser will work.
- Access to your Sigma environment.
- Some familiarity with Sigma is assumed. Not all steps are shown, as the basics are assumed understood.
- Microsoft VSCode or other suitable development tool.
Start the Express server in terminal from the embedding_qs_series_2_api_use_cases folder and enable debugging:
DEBUG=true npm start
The server is ready when it displays: Server listening at http://localhost:3000.
Browse to the landing page:
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 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:
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:
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
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
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:
<div class="page-grid">
<div class="page-card" data-page-id="123">
<div class="thumbnail">📊</div>
<h3>Sales Dashboard</h3>
<p>Monthly sales performance metrics</p>
</div>
</div>
With 4–8 pages, a tabbed interface works well:
<div class="page-tabs">
<button class="tab active">Overview</button>
<button class="tab">Sales</button>
<button class="tab">Analytics</button>
</div>
For 8–20 pages, a sidebar navigation pattern adds clarity:
<div class="page-sidebar">
<div class="category">Financial Reports</div>
<ul class="page-list">
<li class="page-item">Revenue Dashboard</li>
<li class="page-item">Cost Analysis</li>
</ul>
</div>
With 20+ pages, a searchable dropdown is typically most scalable:
<div class="page-selector">
<input type="text" placeholder="Search pages...">
<div class="filtered-results">
<!-- Dynamic results -->
</div>
</div>
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.
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.
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
Community
Help Center
QuickStarts
Be sure to check out all the latest developments at Sigma's First Friday Feature page!
