View source for Client Area Navigation Menus Cheatsheet

The following guide is designed to provide some copy & paste ready code samples for common customisations performed to the dynamic client area navigation menus.  For more detailed documentation, please refer to [[Editing Client Area Menus]]

This guide assumes you are already familiar with [[Hooks|creating and using Hook files in WHMCS]].

==Finding a Menu Item Name==

Every menu item has a unique name that is used to reference it.  You will need this name in order to manipulate it.  To make it easier, we have made the name of each menu item available in the HTML source of the page, which means it can be retrieved using the Inspect Element option available in most modern browsers.  An example of this is shown below.

[[File:Menu-inspect-element.png]]

Once you have the menu item name that you wish to manipulate, which in the example above is "Announcements" you can manipulate it in the following ways.

<div class="docs-alert-info">The client area's navigation menu is defined in a tree structure. Each menu item has one parent item and can have many child items. So when you're looking to manipulate a menu item within a dropdown, you will need to first retrieve the parent menu item, which in the case above is "Support", followed by the "Announcements" menu item which is a child within that.</div>

==Changing the Text Label of a Menu Item==

All menu items that are supplied by default use display names controlled by language file.  Simply search in your active language file for the text you see in the menu item label, and you can adjust/change it there as required.

Alternatively, you can manipulate the display text via a hook as follows:

<source lang="php">
<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    $navItem = $primaryNavbar->getChild('Support');
    if (is_null($navItem)) {
        return;
    }

    $navItem = $navItem->getChild('Announcements');
    if (is_null($navItem)) {
        return;
    }

    $navItem->setLabel('Custom Title Here');

});

</source>

Notice how in the above we first retrieve the Support menu item, followed by the Announcements menu item which is a child within that.  The same logic should be applied to all dropdown menu items.

==Changing where a Menu Item Points To==

You can change where a menu item points to using the setUri method.  For example if we are using an external system to control our announcements, we could do something like the following:

<source lang="php">
<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    $navItem = $primaryNavbar->getChild('Support');
    if (is_null($navItem)) {
        return;
    }

    $navItem = $navItem->getChild('Announcements');
    if (is_null($navItem)) {
        return;
    }

    $navItem->setUri('https://www.example.com/3rdpartyblogsystem');

});


</source>

==Re-arranging Menu Items==

You can change the display order of menu items as follows:

<source lang="php">
<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    $navItem = $primaryNavbar->getChild('Support');
    if (is_null($navItem)) {
        return;
    }

    $navItem = $navItem->getChild('Announcements');
    if (is_null($navItem)) {
        return;
    }

    $navItem->setOrder(1);

});

</source>

The following helpers are also available:

<source lang="php">
// Moves a menu item up one position
$primaryNavbar->getChild('Support')->getChild('Announcements')->moveUp();
// Moves a menu item down one position
$primaryNavbar->getChild('Support')->getChild('Announcements')->moveDown();
// Moves a menu item to the first position
$primaryNavbar->getChild('Support')->getChild('Announcements')->moveToFront();
// Moves a menu item to the last position
$primaryNavbar->getChild('Support')->getChild('Announcements')->moveToBack();
</source>

==Adding an Additional Child Menu Item==

You can add additional menu items as follows:

<source lang="php">
<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    $navItem = $primaryNavbar->getChild('Support');
    if (is_null($navItem)) {
        return;
    }

    $navItem->addChild('Emergency Contacts', array(
        'label' => 'Emergency Contacts',
        'uri' => 'emergency.php',
        'order' => '100',
    ));
});

</source>

To have your menu item use a language file text string for the display label, you can use the Lang::trans method as demonstrated below:

<source lang="php">
<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    $navItem = $primaryNavbar->getChild('Support');
    if (is_null($navItem)) {
        return;
    }

    $navItem->addChild('Emergency Contacts', array(
        'label' => Lang::trans('emergencyContacts'),
        'uri' => 'emergency.php',
        'order' => '100',
    ));
});

</source>

==Hiding/Removing a Menu Item==

You can remove a menu item as follows:

<source lang="php">
<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    if (!is_null($primaryNavbar->getChild('Support')) {
        $primaryNavbar->getChild('Support')->removeChild('Announcements');
    }
});

</source>
No results found.