How do I use the Menu Manager?

Notice: The Menu Manager functionality will only work on approved SwiftModders WHMCS Themes. It will not affect default WHMCS or other third-party WHMCS themes.

Since version 1.1.0 of the SwiftModders WHMCS Theme Installer, the WHMCS navigation menu can be directly edited for all SwiftModders WHMCS Themes via the Menu Manager. This powerful new feature will allow you to edit the menu for both non-logged-in and logged-in views. To take advantage of this functionality, please read through the following guide.

Enabling the Menu Manager

By default, the Menu Manager will be disabled so let’s log in to your WHMCS Admin installation. Once logged in, you’ll need to navigate to “Addons” > “SwiftModders WHMCS Theme Installer.” When the Theme Installer loads, select “Configuration” in the top menu. You will see quite a few options, but the option you’ll want to focus on is “Enable Menu Manager.” Toggle the option to “On,” and that will enable the Menu Manager!

Understanding the User Interface & Options

When you initially load up the Menu Manager, you will see a success notice saying the “guest” menu was successfully installed. This is because the Menu Manager will install the default WHMCS menu items when you first load it up. You will receive a similar message when loading up the “client” menu as well. This is a good starting point to break down the different types of menus available in the Menu Manager.

Guest vs. Client Menu

The Menu Manager has two types of menus, “Non-Logged In View” and “Logged In View.” I’ll refer to these two menu options as “guest” vs. “client” throughout this guide for simplicity. This setup allows you to easily make unique changes to either menu without impacting them both. The limitation here is that you will need to make menu changes to both types if you want to impact menu items that show up in both. However, you can easily switch between the menu items by clicking on the button group above the menu interface. Just be sure to save your menu order changes before navigating away!

Menu Manager Tasks

The Menu Manager comes equipped with a few tasks you can run at any time. Here is a quick breakdown of each task and what they can do for you:

Find New Items: Use this task to search for custom menu items that have been created by custom WHMCS addons or via the WHMCS Navigation Hooks. To search for menu items that are only available to guests, leave the “Client ID” blank. To search for menu items that are either available to a specific client or any logged-in client, input the “Client ID” before searching.
Import Icons: Both the SwiftModders WHMCS Client Theme and Allure WHMCS Theme come with pre-defined menu icons. If you have made changes to those icons, you can use this task to import the menu icons directly into the Menu Manager. The import tool will import icons for both menu types, so you only need to run them once. You can also re-run the import tool if you make a mistake and need to reset the menu icons.
Sync Language: The labels for your menu items are pulled directly from your Default Language set in your "Localisation" tab of General Settings. If you've changed your default language, the labels will not be synced correctly. To help with that, use this tool to run through all of your menu items and grab the correct label.
Reset Current Menu: Use this task if you wish to start over from the beginning. This task will ask you to confirm as it will delete all of your customizations and reset the current menu type with default WHMCS menu items. Always use this option with caution.

Menu Locations

Each menu type has pre-defined menu locations. These locations are placed explicitly within each SwiftModders WHMCS Theme and will be rendered differently.

The “Primary” menu location houses all of the primary menu items of the theme. These menu items are typically viewable in either the side-menu or top-menu style, depending on your theme configuration.
The “Secondary” menu location houses the login/account details menu items. You can add menu items to this area, but it will look different from the Primary Menu. Also, the “Secondary” menu is not meant to house many nav items, be careful. You may end up breaking the design on smaller devices.

Menu Item Options

Edit: The pencil icon will open the edit modal window for the menu item you select.
Delete: The trash can icon will delete the menu item you select. You cannot delete menu icons that are native to WHMCS or were imported by the finder task.
Open/Close: The arrow up/down icons indicate if the menu item is open or closed. In addition, top-level menu items will have the ability to add children menu items.

Adding a Menu Item

Adding a new menu item to the selected menu type is quite easy. Each menu location will have an “Add New” button at the top. This will create a top-level menu item for the given location. Also, all top-level menu items will have an “Add New” button inside of them. Clicking on the arrow-down icon will unveil any children menu items in addition to the “Add New” button.

Once you have selected the location for your new menu item, you can click on the “Add New” button. A modal window will appear that offers you several menu item fields. Let’s go through what each of these fields can do:

Identifier: This is the unique name for the menu item. No other menu item within this menu type should have the same name. If one exists, the form will return an error.
Label: This is the display text for the menu item. By default, this field will only edit the English translation of the menu item. If you wish to translate this menu item, you will need to add a new translation variable to the language you want. The name of the translation variable should be the “Identifier” you have set (ex. $_LANG[‘identifier’]). To learn more about translating items in WHMCS, please view the WHMCS Development documentation Translating section.
Icon: WHMCS has built-in support for FontAwesome and Glyphicon. This field comes with a FontAwesome finder but will only present the free icons. If you wish to use “Pro” icons, you can. Note that WHMCS has not added support for Duotone icons.
URL: This is the URL that you wish for this menu item to direct to. If this menu item will have children, it’s best to set this to “#.” By default, WHMCS will change it to “#,” but you must have a value here, or the menu item will not be saved.
Order: This will define the sort order for this menu item among its siblings. You can change the menu item sort order in this field directly or by dragging and dropping the menu item.
Hide Menu Item: If you wish to remove a particular menu item from view, you can enable this option. It will not be rendered in the menu and effectively works the same as deleting a menu item. The benefit is that the item is still available for you to use later.
Classes: If you need to add some custom styles to this menu item, you can add specific CSS class selectors. Always make sure your CSS selectors are not too broad, as they could be impacted by other design elements with the same name.
Target: If the URL for this menu item requires an opening in a new window/tab, you can set that. By default, all menu items will open in the same window/tab.

Once you have added all of the necessary menu item information to this form, click the “Add” button. The menu manager page will refresh, and the menu item will be added to your navigation. All custom menu items created via the Menu Manager will have a trashcan icon available if you wish to remove them altogether.

Editing a Menu Item

Editing any menu item is simple and can be initiated by clicking on the pencil icon. Once clicked, the edit modal window will open and present pre-filled fields you can modify. All of the options are similar to the above “Adding a Menu Item” section. The only difference is that the “Identifier” field will be grayed out and read-only. This is because specific menu items cannot have their identifier changed. If you must change the identifier of a custom menu item for some reason, you will need to delete the custom menu item and re-add it with the identifier you desire.

Once you have changed the menu item fields, click the “Edit” button, and your menu item will be updated.

Hiding/Deleting a Menu Item

The Menu Manager will present you with a few options for removing a menu item from public view. If the item is a default WHMCS menu item or has been added via the finder task, it will not have a trashcan (delete) icon available. If you wish to remove this type of menu item from view, you will have to edit the menu item and enable the “Hide Menu Item” option. This will effectively remove the menu item.

If the menu item you wish to remove were added via the Menu Manager, it would have a trashcan (delete) icon available. Clicking the icon will remove the menu item from the Menu Manager altogether. I would recommend only deleting a menu item if you are 100% sure you will not need it again. If you are unsure, you can enable the “Hide Menu Item” option to remove it from public view.

Hiding or deleting a menu item that is a parent will also impact the child menu items. For example, if you were to hide a menu item with children, the children will also be removed from the menu. If you were to delete a menu item with children, the children WOULD NOT be removed. Instead, they will have their assigned parent removed and added as top-level menu items. It is recommended that you delete the children first before deleting the parent if that is undesirable.

Reorder Menu Items

You can simply drag and drop the menu items around in the order you prefer from the Menu Manager interface. You can also move menu items in and out of various parent menu items. You can also edit the sort order for a specific menu item by editing the “Order” field directly. However, you will not be able to drag and drop menu items between the “Primary” and “Secondary” locations.

Once the sort order is to your liking, you will need to click “Save Menu Order” to register the changes. If you leave the page, your sort will be lost.

Available Variables

The following variables are available for use in menu items:

{firstName}: This variable will display the logged-in client’s first name. The only recommended usage is for the client menu type. (Available in 1.1.0)

As more variables become available, this list will be updated.