---
title: "Updating your integration from the Sidebar Menu API to the Top Bar API"
slug: "api-fe-ivion-12-0-0"
description: "NavVis IVION 12.0.0 replaces the Sidebar Menu API with the Top Bar API: ui.sidebarMenuService becomes ui.topBarService, mostly a rename. SidebarMenuItemInterface becomes TopBarItemInterface; isPreviewIconVisible removed."
updated: 2026-08-18T13:54:34Z
published: 2026-08-18T13:54:34Z
canonical: "knowledge.navvis.com/api-fe-ivion-12-0-0"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.navvis.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Updating your integration from the Sidebar Menu API to the Top Bar API

Use this guide when you have an existing NavVis IVION Frontend API integration that customizes the sidebar menu, and you need to adapt it to NavVis IVION 12.0.0.

NavVis IVION 12.0.0 introduces a redesigned interface. The left sidebar menu is replaced by a top bar, and the Sidebar Menu API is replaced by the Top Bar API, which serves a similar purpose but is adapted to the new top bar structure. Tools such as **Mark & Measure** and **Crop & Download** move to a toolbar in the main view; view controls relocate to a group above the view. The draft retains a sidebar for site setup. Features are relocated, not removed, and the REST API remains unchanged

- **Frontend API docs:** [ivion-api.docs.navvis.com](https://ivion-api.docs.navvis.com/)
- **Updated Sample Application:** [Sample applications](https://knowledge.navvis.com/docs/sample-applications-1)

For a complete map of changes, see [What's New in the NavVis IVION Interface](https://knowledge.navvis.com/docs/what-is-new-in-navvis-ivion). The rest of this guide explains how these changes affect your integration.

## Summary of changes: from the sidebar menu API to the top bar API

The left sidebar menu is replaced by a new top bar. An equivalent Top Bar API replaces the public API that you use to customize the sidebar menu.

For integrations that add or modify their own top bar items, this change is mostly a rename: the methods, fields and behavior stay almost the same. The one exception is isPreviewIconVisible, which is removed with no replacement.

The following table lists what changes at a glance.

| **Change** | **Update needed** | **Effort** |
| --- | --- | --- |
| Service access path renamed: `ui.sidebarMenuService` to `ui.topBarService` | Update the reference | LOW |
| Item type renamed: `SidebarMenuItemInterface` to `TopBarItemInterface` | Update the type name | LOW |
| `isFullscreen` is now optional (default `false`) | No action needed | NONE |
| `isPreviewIconVisible` removed, with no replacement (the top bar is always visible) | Remove it from your items | LOW |
| `openMenu` and `closeMenu` now open and close the active item's dropdown, not the whole sidebar | Re-test your integration if you call these methods | LOW |
| `legacyApi.getMenuItems()` marked deprecated (it still works, and the return type is unchanged) | Plan to move off it over time | LOW |

## **The customizable zone**

Your custom items now appear in a single designated zone of the top bar, as shown below:

![NavVis interface displaying site options, edit, and publish features for user management.](https://cdn.document360.io/bf174766-fa1a-4fe1-a4d7-b1db1e7cb996/Images/Documentation/image-20260806-100722.png)

## **Detailed changes**

### Service interface: SidebarMenuServiceInterface becomes TopBarServiceInterface

The access path changes from `ui.sidebarMenuService` to `ui.topBarService`.

| Old | New | What Changes |
| --- | --- | --- |
| sidebarMenuService.items | topBarService.items | Rename only. Now typed as `TopBarItemInterface[]` |
| sidebarMenuService.goToItem(item) | topBarService.goToItem(item) | Rename only. The signature is unchanged |
| sidebarMenuService.getActiveItem() | topBarService.getActiveItem() | Rename only. Now typed as `TopBarItemInterface` |
| sidebarMenuService.openMenu() | topBarService.openMenu() | Shows the active item's dropdown. Before 12.0.0, it expanded the sidebar |
| sidebarMenuService.closeMenu() | topBarService.closeMenu() | Hides the active item's dropdown. Before 12.0.0, it collapsed the sidebar |
| sidebarMenuService.goToRoot() | topBarService.goToRoot() | Resets a menu navigation to the root |

### Item interface: SidebarMenuItemInterface becomes TopBarItemInterface

| Old | New | What changes |
| --- | --- | --- |
| `SidebarMenuItemInterface.items` | `TopBarItemInterface.items` | Rename only. Nesting is still supported, so an entry can open a submenu |
| `SidebarMenuItemInterface.title` | `TopBarItemInterface.title` | Rename only |
| `SidebarMenuItemInterface.icon` | `TopBarItemInterface.icon` | Rename only |
| `SidebarMenuItemInterface.isVisible` | `TopBarItemInterface.isVisible` | Rename only |
| `SidebarMenuItemInterface.order` | `TopBarItemInterface.order` | Rename only. Note that the layout direction changed. In the old vertical sidebar, a lower value placed an item closer to the top. In the new horizontal top bar, a lower value places an item closer to the left |
| `SidebarMenuItemInterface.getClass` | `TopBarItemInterface.getClass` | Rename only |
| `SidebarMenuItemInterface.onExit` | `TopBarItemInterface.onExit` | Rename only |
| `SidebarMenuItemInterface.onClick` | `TopBarItemInterface.onClick` | Rename only |
| `SidebarMenuItemInterface.template` | `TopBarItemInterface.template` | Rename only. When `isFullscreen` is `false`, your template renders inside the top bar dropdown instead of the sidebar panel, so check its layout again |
| `SidebarMenuItemInterface.isFullscreen` | `TopBarItemInterface.isFullscreen` | Now optional, with the default `false`. Before 12.0.0, it was required. It affects only items that use `template`: `false` renders the template inside the item's dropdown, and `true` takes over the full viewport |
| `SidebarMenuItemInterface.isPreviewIconVisible` | REMOVED | No replacement. The top bar is always visible, so no show or hide behavior is available to map |

|  |
| --- |

### Legacy API

`legacyApi.getMenuItems()` is marked deprecated. It keeps working and its return type does not change. The plan is to migrate off it over time.

## What the top bar API does not cover

Four areas of the new interface are outside its scope. If your integration adds, hides, reorders or replaces entries in these areas, that customization does not carry over to NavVis IVION 12.0.0.

| Area | Elements | Screen reference | Not supported in the Frontend API after 12.0.0 |
| --- | --- | --- | --- |
| Toolbar in the published site | All toolbar tools, such as Mark & Measure, POIs and Crop & Download | ![Interior view of NavVis office showing entrance, stairs, and navigation tools on the side.](https://cdn.document360.io/bf174766-fa1a-4fe1-a4d7-b1db1e7cb996/Images/Documentation/1(1).png) | The initial release of NavVis IVION 12.0.0 does not provide an API for the toolbar. You cannot hide, reorder or extend these tools through the Frontend API. Users can still access all of them from the toolbar. |
| Sidebar in the draft | Dataset management, dataset alignment, site model, point cloud cleanup, navigation graph, vector map | ![NavVis Office interface displaying dataset management and navigation options for users.](https://cdn.document360.io/bf174766-fa1a-4fe1-a4d7-b1db1e7cb996/Images/Documentation/2(1).png) | The draft sidebar is a new component built for site setup. No Frontend API is available to customize it in 12.0.0. |
| View in the draft and the published site | The sidebar's View entry. Its functions are now in the view settings group at the top of the main view: 3D/2D toggle, point cloud settings, layers, scene settings | ![A modern office space featuring a spiral staircase and seating area for collaboration.](https://cdn.document360.io/bf174766-fa1a-4fe1-a4d7-b1db1e7cb996/Images/Documentation/3(3).png) | Customizing View is not supported. Its controls moved into the main view rather than into the top bar, so they are not part of the top bar item list. |
| Fixed top bar elements | All built-in top bar elements, in a site and on the dashboard; such as the logo, search, the site title and selector, share and user profile. | ![Interior view of NavVis office showcasing open space and stairway design.](https://cdn.document360.io/bf174766-fa1a-4fe1-a4d7-b1db1e7cb996/Images/Documentation/4(2).png) | These elements are fixed. They cannot be removed, reordered or repositioned through the Frontend API. |