---
title: "Creating Menu Items"
slug: "creating-menu-items-1"
description: "Create custom menu items in the NavVis IVION Sidebar Menu API"
tags: ["Callback Function", "Menu Item", "Sub-Menu"]
updated: 2024-01-26T14:02:39Z
published: 2024-01-26T14:02:39Z
---

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

# Creating Menu Items

Follow these steps to create three [menu items](https://ivion-api.docs.navvis.com/latest/reference/interfaces/sidebarmenuiteminterface.html).

- The first menu item uses a callback to trigger custom logic.
- The second menu item uses a template as its content.
- The final menu item uses the other menu items as sub-menu items.

## Procedure

1. To create a sub-menu item that triggers a callback function, run:

```plaintext
// SidebarMenuModifier.ts
export class SidebarMenuModifier {
  // ...
  /*** Menu Items ***/

  private callbackMenuItem: SidebarMenuItemInterface = {
    title: "Callback Function",
    icon: this.materialIcon,
    isVisible: () => true,
    template: "",
    items: [],
    onClick: () => { myCallbackFunction(); },
    isFullscreen: false
  };
  // ...

  private myCallbackFunction(): void {
    window.alert("My Callback Function");
  }
}
```
2. To create a sub-menu item that uses a template, run:

```plaintext
// SidebarMenuModifier.ts
export class SidebarMenuModifier {
  // ...
  private formattedIpseDixit: SidebarMenuItemInterface = {
    title: "Ipse Dixit Formatted",
    icon: this.dataUriIcon,
    isVisible: () => true,
    template: "./lorem-ipsum-formatted.html",
    items: [],
    isFullscreen: true
  };
  // ...
}
```
3. To create a menu item that has sub-menu items, run:

```plaintext
// SidebarMenuModifier.ts
export class SidebarMenuModifier {
  // ...
  private rootMenuItem: SidebarMenuItemInterface = {
    title: "Ipse Dixit",
    icon: this.statueFaceIcon,
    isPreviewIconVisible: () => true,
    isVisible: () => true,
    template: "",
    items: [this.callbackMenuItem, this.formattedIpseDixit], // Sub-Menu Items
    isFullscreen: false
  };
  // ...
}
```