How to Create, Customize, and Reorder Menus in Your HighLevel Dashboard: A Step-by-Step Guide

If you’re looking to enhance your agency dashboard with custom menus, personalized icons, reordered items, or even renamed menu options, you’re in the right place. This guide will walk you through each step, ensuring you can tailor your dashboard to fit your needs perfectly. Let’s dive in!

1. Creating Custom Menus

Adding custom menus allows you to improve the navigation and usability of your dashboard. Here’s how you can create one:

1. Access Custom Menu Links:
   • Navigate to your agency dashboard.
   • Locate the “Custom Menu Links” section.
2. Add a New Custom Menu:
   • Click on “Create New Custom Menu.”
   • Add the following details:
     • Icon: While the built-in icons are limited, you can update these later.
     • Menu Name: Name your menu item appropriately.
     • Link: Add the URL (e.g., a funnel link or any page you want to embed).
   • Set it as an embedded page if necessary.
3. Save and Preview:
   • Once saved, your new menu will appear at the bottom of your dashboard’s menu items.

2. Reordering Menu Items

To organize your dashboard, you can reorder custom or existing menu items. Follow these steps:

1. Navigate to the White Label Settings:
   • Go to the Company section under your agency dashboard and select White Label.
2. Access Custom CSS:
   • In the custom CSS section, you’ll add specific code to reorder menu items.
3. Steps to Reorder:
   • Right-click on the menu item you want to move and select Inspect.
   • Copy the relevant meta attribute (in the anchor tag) of the menu item.
   • Paste the meta attribute into the custom CSS code provided.
   • Assign an order value (e.g., -5 for the topmost position).
   • Save your changes and reload the dashboard page, The updated menu order will reflect, with items like “Membership” or custom menu items appearing in the desired order.

Code Example:

/* Set Menu display property to Flex*/
.hl_nav-header > nav {
  display: flex;
  flex-flow: row wrap;
}

/* For Default Menu*/
#sidebar-v2 .hl_nav-header > nav > a[meta="memberships"] {
  order: -5;
}

/* For Custom Menu*/
#sidebar-v2 .hl_nav-header > nav > a[meta="the meta id of custom menu"] {
  order: -4;
}

• Example: If you want to place a menu item in the middle, above other items:
  • In this case, you’ll need to manually reorder several menu items. To do this, assign negative values such as -9 to the menu item you want at the top, -8 for the second item, -7 for the third item, and so on. If the menu items are already ordered correctly, you can assign the same negative value to maintain their current order.
    
    For example, if you want to place the Membership menu item between Contacts and Opportunities, follow this process:

Code Example:

/* Set Menu display property to Flex*/
.hl_nav-header > nav {
  display: flex;
  flex-flow: row wrap;
}

/*  They are already in desired order */
#sidebar-v2 .hl_nav-header > nav > a#sb_launchpad,
#sidebar-v2 .hl_nav-header > nav > a#sb_dashboard,
#sidebar-v2 .hl_nav-header > nav > a#sb_conversations,
#sidebar-v2 .hl_nav-header > nav > a#sb_calendars,
#sidebar-v2 .hl_nav-header > nav > a#sb_contacts
{
  order: -9;
}

/* Move membership to top from the other menu items */
#sidebar-v2 .hl_nav-header > nav > a#sb_memberships
{
  order: -8;
}

3. Renaming Existing Menu Items

Sometimes, the default menu names don’t align with your business terminology. Here’s how to rename them:

1. Example: Renaming “Conversations” to “Communications”:
   • Move the existing text out of view using custom CSS.
   • Add a pseudo-element with the new text.
   • Update the line height and indentation for alignment.

Code Example:

/* Set it to Display: block */
#sb_conversations span {
    display: block;
}

/* Hide the existing text */
#sb_conversations span {
    text-indent: -99999999px;
    line-height:0;
}

/* Add Your own text */
#sb_conversations span::after {
    content: "Communications";
    line-height: initial;
    display: block;
    text-indent:0;
}

Here is another option, Someone needs to change the menu item names to a specific subaccount only, in that case, you need to add the subaccount id as a parent class to the CSS selectors, please follow the example:

/* Set it to Display: block */
/**** Replace the H6TG2qzJZCn3kk82kAHK with your own subaccount id ****/
.H6TG2qzJZCn3kk82kAHK #sb_conversations span {
    display: block;
}

/* Hide the existing text */
.H6TG2qzJZCn3kk82kAHK #sb_conversations span { /*Replace the subaccount id*/
    text-indent: -99999999px;
    line-height:0;
}

/* Add Your own text */
.H6TG2qzJZCn3kk82kAHK #sb_conversations span::after { /*Replace the subaccount id */
    content: "Communications";
    line-height: initial;
    display: block;
    text-indent:0;
}

4. Updating Custom Icons

Custom icons can elevate the appearance of your dashboard. Here’s how to update them:

1. Icon Dimensions:
   • Ensure your icons are 20×20 pixels for optimal display.
2. Adding an Icon:
   • Include the icon link in your custom CSS code.
   • Save and reload the page to see your new icon.
3. Using Your Own Image:
   • Replace the default icon with a custom image by updating the CSS code with the image’s URL.

Code Example:

/* Change the icon */

#sidebar-v2 .hl_nav-header > nav > a[meta="you custom menu meta value"]{
    display: inline-block;
}

#sidebar-v2 .hl_nav-header > nav > a[meta="you custom menu meta value"] span .fa-wine-glass:before{ /* This may different for you: .fa-wine-glass */
    content: "" !important;
    background-image: url(your icon url);
    width: 20px;
    height: 20px;
    display: inline-block;
}

Final Thoughts

With these simple steps, you can:

• Create new menus with custom functionality.
• Reorder menu items to prioritize the most important sections.
• Rename menu items to reflect your business needs.
• Update icons to match your branding.

This flexibility makes it easier to tailor your dashboard for better usability and branding.

Ready to explore more customization tips? Stay tuned for the next episode! 👋