I need to insert the search module as a menu item (default menu module).

I need this output :

    <li>menu item</li>
    <li>menu item</li>
    <li>SEARCH MODULE</li>
    <li>menu item</li>

My first thoughts would be to duplicate the default menu module twice :

  1. One to display menu items before the search module without the closing </ul> tag
  2. An other to display menu items after the search module without the opening <ul> tag

And insert the search module in between them. This doesn't seem to be the easiest and most maintainable way to achieve my aim as it requires :

  • 3 module positions for the menu
  • 2 diferent menus in the menu manager

I know I could use some of the mega menu modules to do this but I would like to avoid third party extensions and use custom code that I can control.

How can I add a module as a menu item in default menu?

  • You can use two different menus + one search with some CSS tricks but if you want exactly the above structure, you may consider jQuery functions like append() or prepend() which won't work on javascript-disabled browsers.
    – Farahmand
    Sep 20, 2014 at 10:46
  • I would rather not use jQuery to move elements around and use the technique I described in the question if there is no better way...
    – web-tiki
    Sep 20, 2014 at 10:52
  • 1
    I suspect you're either going to have to use a mega menu extension, or a snippet type system that will load a module into the drop down by pulling it in with a snippet code. Nonumber Snippets combined with nonumber Modules Anywhere would probably work. The stock menu system just isn't built for this. I mean, I guess it's possible to just override the menu output, but the drawback is then that you have a fully custom menu instead of just using some off the shelf upgradable plugins.
    – Brian Peat
    Sep 20, 2014 at 14:39
  • Pretty sure Brian's right. You either need to override the menu and rewrite it's functions, or you've got to utilize a third party. NoNumber would be your least bloated third party option.
    – Faye
    Sep 22, 2014 at 16:31
  • How are you generating a link to the module right now? Do you have a working link to the menu? Sep 23, 2014 at 3:59

2 Answers 2


Here's one alternative to load the search module in your menu. It requires a couple of simple steps:

1. Override your mod_menu module

  • Create an override in your templates folder \templates\YOURTEMPLATE\html\mod_menu\default_url.php.
  • Copy the following contents to the file:


 * @package     Joomla.Site
 * @subpackage  mod_menu
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights   reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';

if ($item->menu_image)
        $item->params->get('menu_text', 1) ?
        $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '"   /><span class="image-title">' . $item->title . '</span> ' :
        $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '"  />';
    $linktype = $item->title;
 $flink = $item->flink;
$flink = JFilterOutput::ampReplace(htmlspecialchars($flink));
if ($linktype == "CustomSearchBox"){
    $document   = &JFactory::getDocument();
    $renderer   = $document->loadRenderer('modules');
    $options    = array('style' => 'xhtml');
    $position   = 'CustomSearchBox';
    echo $renderer->render($position, $options, null);
else {

switch ($item->browserNav) :
    case 0:
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
    case 1:
        // _blank
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
    case 2:
        // window.open
        $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,'.$params->get('window_open');
            ?><a <?php echo $class; ?>href="<?php echo $flink; ?>" onclick="window.open(this.href,'targetWindow','<?php echo $options;?>');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a><?php

I have added an if-else statement starting at line #29, that checks if the menu item title is "CustomSearchBox". If that's the case, the module position "CustomSearchBox" is loaded. If not, the normal menu item is returned. You can change "CustomSearchBox" to anything you like, but if you do remember to use the same value in the following steps.

2. Create a new search module

Create the search module and set the parameters as needed (I suggest to hide module title).

Publish the module to the custom position "CustomSearchBox"

3. Create a new menu item

The menu item can be any type, I suggest "External URL", and the name MUST be "CustomSearchBox".

Save your menu item, and the entire menu item will be replaced with the search box!

Let me know if something is unclear.

  • Thx for the answer. I tried using your technique with a module position I already had in my template (LOGO) but it didn't seem to work. Should I try creating a "CustomSearchBox" position in my template and use that one?
    – web-tiki
    Sep 23, 2014 at 9:40
  • Yes you should create custom position "CustomSearchBox" and use it. Or you can change it in the above code here: $linktype == "CustomSearchBox" and here $position = 'CustomSearchBox'; Sep 23, 2014 at 12:06
  • You don't actually have to create the position (in your index.php or template.xml files). Simply write CustomSearchBox in the module position field and press enter.
    – johanpw
    Sep 23, 2014 at 12:30
  • Ok, I finaly had time to get through this, I had to tweak your code to make it work. 1/ For some reason it wasn't wotking because I was using and image in the menu item. 2/ I changed line 30 of your code to $document = JFactory::getDocument();. Now it works but I will have to find a way to add my image back again.
    – web-tiki
    Oct 28, 2014 at 18:03
  • Tweaked some more : I based the if statement on the CSS menu item class rather than on the menu item title and added the $linktype in the echo function. The code is visible here : phpad.org/1645824385. Thanks for pointing me in the right direction this is something I was wanting to achieve for some time now it's awesome! :)
    – web-tiki
    Oct 28, 2014 at 18:19

Although you say you don't want to use third party extensions, I have a solution that uses RokCandy from RocketTheme. It's a small snippet component that makes it very easy to add the search field in the menu. Simply install the plugin, and create a new macro like this:




<form action="index.php" method="post" class="form-inline" _lpchecked="1">
 <input name="searchword" id="mod-search-searchword" maxlength="20" class="inputbox search-query" type="text" size="20" value="Search..." onblur="if (this.value=='') this.value='Search...';" onfocus="if (this.value=='Search...') this.value='';">       
 <input type="hidden" name="task" value="search">
 <input type="hidden" name="option" value="com_search">
 <input type="hidden" name="Itemid" value="101">

Save and close.

Now create a menu item for the search box (I suggest External URL as type, but any menu item type will do), and in the Title field, add [searchfield][/searchfield]:

Searchfield in menu

RokCandy will replace the title with the code in the macro, and you'll get a search field in the menu:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.