Active Menu Highlighting for External Link Type in Joomla

Standard

While working on a Joomla website, I realized that if you have an external URL type menu item in your Joomla site then most likely active menu highlighting won’t work for it. Active menu highlighting basically means that the current menu selection is highlighted as a visual clue to show the website user which menu is currently selected. In the example below, currently menu item 2 is shown as selected.

Joomla allows you to create various type of menu items for it’s core features (e.g. articles, category, weblinks, users etc) and third party components. It also allows you to link to external web pages and internal pages by providing the direct URL (shown below). Though the type is external URL, you can actually use it to create menu links to internal pages of your Joomla site as well.

joom-ext-linktype

Once you create an external URL type menu and publish it, it starts showing up in selected menu. However the problem which I faced was that it wasn’t getting highlighted when I selected/clicked on this menu item. Active menu highlighting usually works out of the box with default and third party templates. Tried a few things and even considered hard-coding the CSS but finally decided not to do that.

After exploring other menu types under system links, I came across menu item alias type. As the name suggests, you can create a link to another menu item using it. I created an alias to the menu item for which active menu highlighting wasn’t working and bingo … it started working miraculously!! But then a new problem came up. Now there were two menu items pointing to same page. Disabling the original menu is not a solution since that would make the menu alias stale.

Workaround of this problem is to create a new menu (not new menu item but a new menu). I created a new menu and named it Hidden (you can name it anything you like). Under this menu, I added external URL type menu which I needed. Now in my original menu, I added a menu alias for the external URL menu item I just created under Hidden menu. Make sure both menu items are published. That’s all and everything started working perfectly.

If you have more than one such menu then add them under the same Hidden menu and create menu alias for each one of them in the menu which is being used.

8 thoughts on “Active Menu Highlighting for External Link Type in Joomla

  1. That is great tutorial, i have done everything as described, but when I clicked on menu item of original menu, I got 404 Component not found. 🙁
    When I click on item of hidden menu, that is external url, that is works.
    I am using Joomla 3.3.1 and default Beez3 template.

      • Fixed the issue. Problem was with the URL of hidden menu item. You had /index.php?.. instead of index.php?.. (an extra slash before index.php).

        Removed your site login credentials from the comment as comments are public.

        • Yes it works, thanks.
          The External URL menu item link from menu HIDDEN does not work without slash, as you see.
          That is why I did not find the solution, because I meant that it will not work in Main menu, too.
          That is strange, isn’t it? 😮
          However, I don’t care about it, because menu HIDDEN will not be visible, anyway (I will unpublish the MENU HIDDEN module).
          I was looking for solution, and now I can say that I finally found it.
          Thanks again, @YETANOTHERSE, this article is really useful.

  2. Andrew

    Thank you for your great tutorial. I tried to follow your steps, but in my case it does not work at all.

    Just to get clear that I dont miss anything that a alias link will be getting "active" (highlighted) if I click on it:

    1. I need to set an alias to the menu item instead of external / internal link at Joomla menu link manager

    2. Now the alias link will also be active at a menu module like it is in the original menu module

    For me this dont work at all! The original link will be shown as active (as it always does) but in the second menu the alias link is still not active.

    Question: For what do I need the hidden menu with the external / internal link then?

    Do I miss something?

    • Hi Andrew,

      Not sure if I understood your question correctly. But let me try to explain things as per my understanding.

      For a normal menu link, active menu highlighting works out of the box so no issues there. But if you ever have to create an internal link within the site (hard coded URL) then active menu highlighting does not work for it. In that case you first need to create a new menu and inside that menu create the external link type menu. Now in your main menu (visible on the website), create a menu alias to external link type menu you created. If you’ll directly include external menu type in your website menu then active menu highlighting won’t work.

      I hope it clarifies your doubt to some extent, if not completely.

      Regards,
      Shishir

Leave a Reply