I have a dropdown menu as main navigation of my website and I want to create an offcanvas menu that displaying the same menu items as the dropdown menu items, for responsive design purpose.

Since dropdown menu items have different css classes then I created a template overriding for mod_menu called 'offcanvas'.

My question is, is it possible to force the 'offcanvas' override to the module so when the module call in the offcanvas possition it will use my 'offcanvas' override.

I'm looking for something like this

<jdoc:include type="modules" name="menuposition" layout="offcanvas"/>


3 Answers 3


More info about layout override : https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

If you want to change how the mod_menu Module is displayed, then you should copy :


and modify the file in your template

You can also use the Template Manage to create overrides https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager/en#Creating_Overrides

You don't have to modifiy the style in your jdoc:include

<jdoc:include type="modules" name="menuposition" style="xhtml" />

More info about a style https://docs.joomla.org/Customising_the_way_modules_are_displayed

To define a custom output like "offcanvas", you have to modify this file in your template PATH_TO_JOOMLA/templates/TEMPLATE_NAME/html/modules.php.

Here an example of custom output. Important, the function name should be modChrome_offcanvas

function modChrome_offcanvas($module, &$params, &$attribs)
    if ($module->content)
        echo "<div class=\"module mod" . $module->id . " " . htmlspecialchars($params->get('moduleclass_sfx')) . "\">";
        if ($module->showtitle)
            echo "<h3 class=\"module-header\">" . $module->title . "</h3>";
        echo $module->content;    
        echo "</div>";

It define which is inserted before, after, or around the output of a module.

  • Hi, thanks for your answer, but I think you misunderstood my question. I know how to work with modChrome but what I want to achieve is to render specific module in the template and force specific override layout for that.
    – webchun
    Jun 26, 2015 at 8:00

This is untested but I think something like this would do it:

// Find modules by position name
$offcanvasModules  = JModuleHelper::getModules('menuposition');

// Pass module render options
$moduleOptions = array('layout' => 'offcanvas');

<?php foreach ($offcanvasModules as $module) :
    echo JModuleHelper::renderModule($module, $moduleOptions);
endforeach; ?>

Though personally I think I would simply set the layout in the module settings, it would be faster :)

  • The problem is the module is loaded twice in the template while you can define the alternative layout (from the module backend) once only. Thanks for your answer, I've managed to find the solution and will post it as an answer. Thanks
    – webchun
    Jun 26, 2015 at 9:37
  • You can just assign the same module in two different positions though, which is quick, easy and effective. Jun 26, 2015 at 12:03

I've managed to find the solution, here's the code :

      jimport( 'joomla.application.module.helper' );
      $module = JModuleHelper::getModule( 'mod_menu' );
      $attribs = array('style' => 'raw');
      $module->params = "menutype=mainmenu\nlayout=offcanvas\nshowAllChildren=1";
      echo JModuleHelper::renderModule($module, $attribs);
  • Once you do this you may as well just hardcode the menu as you aren't taking any of the module options set in Module Manager. Moreover, you can do exactly what you want just from within the module manager. You also can't have a 2nd menu using this method. Jul 2, 2015 at 7:21
  • Actually I can have 2nd menu using by using this method but indeed this code creates additional problems than solution. Later I found that the next mod_menu (the 3rd one) module published on the same page will automatically follow the hardcoded layout no matter what layout you choose from the backend. So, for now, indeed to setup two menu modules from the backend is the most effective solution right now. Thanks for the suggestion.
    – webchun
    Jul 2, 2015 at 13:26

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.