Sample Code for Custom Menus

Insert your code in the Group Setup under the Custom HTML option.

<!-- 
  Sample Implementation for the Menu Injection Library
  This shows how to add a custom menu to your page
-->

<!-- Include the Menu Injection Library -->
<script src="/js/InjectMenu.js"></script>

<!-- Script to create your custom menu -->
<script>
  $(document).ready(function() {
    // Sample menu configuration
    const sampleMenuConfig = {
      id: "Sample_Menu", // Unique ID for the menu
      title: "Sample Menu", // Text displayed in the menu
      targetMenuId: "ctl00_Nav2021_Reports", // ID of menu to insert after
      items: [
        {
          title: "Sample Item 1",
          description: "Description for sample item 1", 
          url: "/SampleItem1.aspx",
          icon: "far fa-file-alt" // FontAwesome icon class
        },
        {
          title: "Sample Item 2", 
          description: "Description for sample item 2",
          url: "/SampleItem2.aspx", 
          icon: "far fa-chart-bar"
        },
        {
          title: "Sample Item 3",
          description: "Description for sample item 3",
          url: "/SampleItem3.aspx",
          icon: "far fa-calendar-alt"
        },
        {
          title: "Sample Item 4",
          description: "Description for sample item 4", 
          url: "/SampleItem4.aspx",
          icon: "far fa-user-circle"
        }
      ]
    };
    
    // Add the menu to the page
    addMenu(sampleMenuConfig);
    
    // Example: Add a new menu item to an existing menu
    const contactItemConfig = {
      title: "Sample Contact Item 1",
      description: "A sample item added to the Contacts menu",
      url: "/SampleContactItem.aspx",
      icon: "far fa-address-card" // Address card icon for contacts
    };
    
    // Add the item to the Contacts menu (assumes menu has id "Contacts")
    // The item will be added at the end of the menu by default
    addMenuItem(contactItemConfig, "Contacts");
    
    // Add menus by creating more configurations and calling addMenu again
    /*
    const anotherMenuConfig = {
      id: "Another_Menu",
      title: "Another Menu",
      targetMenuId: "Sample_Menu", // This will place it after the Sample menu
      items: [
        // Item configurations...
      ]
    };
    
    addMenu(anotherMenuConfig);
    */
  });
</script>