Add Custom Menus and Menu Items

This documentation explains how to use the Menu Injection Library to add custom menus and menu items to your White Label CRM's menu.

Please note: Using this tool requires knowledge of Javascript and HTML.

Overview

The Menu Injection Library allows you to:

Create new dropdown menus that match the existing menu system
Insert them at any position in your menu bar
Maintain consistent behavior between original and new menus
Customize menu items, icons, and links

Sample Code

We recommend that you start with the sample code below. It is ready to copy and paste into your Admin panel and have a working example in your White Label.

Sample Implementation - Example code showing how to use the library

Setup Instructions

Step 1: Include the Library

Add the InjectMenu.js script tag to your Custom HTML (in Group Settings in White Label Admin):

<script src="/js/InjectMenu.js"></script>

Step 2: Create a Menu Configuration

Define a configuration object for your menu:

const menuConfig = {
  id: "Your_Menu_ID", // Unique ID for the menu
  title: "Your Menu Title", // Text displayed on the button
  targetMenuId: "ExistingID", // ID of menu to insert after
  items: [
    {
        title: "Item Title",            // Menu item title
        description: "Item description", // Optional description text
        url: "/ItemPage.aspx",          // Link destination
        icon: "far fa-file-alt"         // FontAwesome icon class
    },
    // Add more items as needed...
  ]
};

Step 3: Add the Menu to Your Page

Call the addMenu() function with your configuration:

$(document).ready(function() {
addMenu(menuConfig);
});

Menu Configuration Options

Main Menu Properties

Property	Type	Description	Required
id	string	Unique identifier for the menu	Yes
title	string	Text displayed on the menu button	Yes
targetMenuId	string	ID of existing menu to insert after	Yes
items	array	Array of menu item objects	Yes

Menu Item Properties

Property	Type	Description	Required
title	string	Text displayed for the menu item	Yes
description	string	Secondary text shown below the title	No
url	string	Link destination for the menu item	Yes
icon	string	FontAwesome icon class	No

Advanced Usage

Adding Items to Existing Menus

You can add individual menu items to existing menus using the addMenuItem() function:

// Configuration for the new menu item
const itemConfig = {
  title: "New Item",
  description: "Description for the new item",
  url: "/NewItem.aspx",
  icon: "far fa-file-alt"
};

// Add the item to an existing menu
addMenuItem(itemConfig, "ExistingMenuId");

Positioning Menu Items

You can specify where to add the item within the existing menu:

// Add as first item in the menu
addMenuItem(itemConfig, "ExistingMenuId", "first");

// Add as last item in the menu (default behavior)
addMenuItem(itemConfig, "ExistingMenuId", "last");

// Add after a specific item (using the item's title)
addMenuItem(itemConfig, "ExistingMenuId", "Existing Item Title");

Adding Multiple Menus

You can add multiple menus by creating additional configurations:

// Add first menu
addMenu(firstMenuConfig);

// Add second menu
addMenu(secondMenuConfig);

Custom Positioning

If you don't specify a targetMenuId , the menu will be inserted after the first menu item:

const menuConfig = {
  id: "Custom_Menu",
  title: "Custom Menu",
  // No targetMenuId specified - will be placed at the beginning
  items: [/* ... */]
};

Customizing Icons

You can use any FontAwesome icon by specifying its class:

{
  title: "Users",
  icon: "fas fa-users", // Solid users icon
  url: "/Users.aspx"
}

Troubleshooting

If menus don't appear or behave correctly:

Check browser console for JavaScript errors
Confirm that target menu IDs exist on the page