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:

  1. Create new dropdown menus that match the existing menu system
  2. Insert them at any position in your menu bar
  3. Maintain consistent behavior between original and new menus
  4. 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:

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

Related Articles