---
title: "Adding Custom Menu Items"
slug: "adding-custom-menu-items-1"
description: "Add custom menu items to the Sidebar menu using the NavVis IVION frontend API"
updated: 2024-01-26T14:03:55Z
published: 2024-01-26T14:03:55Z
canonical: "knowledge.navvis.com/adding-custom-menu-items-1"
---

> ## 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.

# Adding Custom Menu Items

Follow these steps to remove standard menu items and add custom menu items/

## Procedure

1. Retrieve and remove the standard sidebar menu items except for the login menu, add a `rootMenuItem `and configure the sidebar menu to open automatically when the app loads by running:

```plaintext
// SidebarMenuModifier.ts
export class SidebarMenuModifier {
  // ...
  constructor(private ivApi: ApiInterface) {
    const menuItems = this.ivApi.sidebarMenu.service.items;
    // Remove all entries besides the login one, and include the new nested one
    menuItems.splice(1, menuItems.length, this.rootMenuItem);
    // Automatically open the menu once finished modifying it
    ivApi.sidebarMenu.service.openMenu();
  }
}
```
2. Instantiate the `SidebarMenuModifier` in the main application file `index.ts` by running:

```plaintext
// index.ts
// ...
import {SidebarMenuModifier} from "./SidebarMenuModifier";

class TestApp
{
  //..
    getApi("https://iviondemo.iv.navvis.com/")
      .then((iv: ApiInterface) => {
        this.ivApi = iv;
        new SidebarMenuModifier(iv);
      });
  }
}
// ..
```