Use a Dynamic Template as Mega Menu Content

By default, the Total theme doesn’t offer a direct way to assign dynamic templates to individual menu items for use as a mega menu dropdown. It’s generally best to use a dedicated third-party mega menu plugin for building advanced menus. These plugins handle the many details involved and ensure smooth functionality.

That said, if you want to add a dynamic template to a dropdown menu item without relying on extra plugins, you can do so with a small amount of custom code.

In this guide, we’ll show you how to implement this approach, explain important considerations and provide tips to ensure your mega menus render correctly.

Sample Snippet

You can override the output of a specific dropdown menu item by targeting it with a custom class and applying a filter like this:

// Override the menu item with the 'megamenu-template' class with a dynamic template
add_filter( 'walker_nav_menu_start_el', function( $output, $item, $depth, $args ) {
    if ( isset( $item->classes ) && is_array( $item->classes ) && in_array( 'megamenu-template', $item->classes, true ) ) {
        return do_shortcode( '<div class="wpex-no-renaming">[wpex_template id="TEMPLATE_ID"]</div>' );
    }
    return $output;
}, 50, 4 );

Instructions

Here are the instructions for making the snippet work:

  1. Edit Your Menu to Create a mega Menu Dropdown
    First you need to create a mega menu using the theme’s built-in function. Make sure to select the 1 column layout because you will be creating the layout and design with your template.
  2. Add a Single Dropdown Menu Item to the Megamenu
    Next add a single menu item under the parent item created in the last step. Use a custom link with the # symbol for the url and any text.
  3. Assign a Unique Class to the Dropdown Menu Item
    Add a custom class (e.g. megamenu-template) to the previously created item. You can use any class name, just ensure it matches what’s referenced in the code snippet.
  4. Create a Dynamic Template
    Build your custom mega menu using a Dynamic Template Part. Make sure to update the code snippet so it makes use of your template ID.
  5. Optional: Prevent Class Renaming in the Mobile Menu
    The code example includes a wrapper with the wpex-no-renaming class to prevent the default “Sidebar” mobile menu from altering class names inside the template. If you’re not using the Sidebar mobile menu or if you’re building your header with the Header Builder, you can safely omit this wrapper.

Tips & Best Practices

Use the Header Builder
When using the Header Builder, you will be using the Horizontal Menu and Off-Canvas Menu elements to display your menu. These are more modern and optimized elements that allow for greater flexibility compared to the standard theme header.

Use a Separate Mobile Menu
For optimal performance, usability, and easier maintenance, we recommend using a simplified version of your menu on mobile devices without a mega menu. This is a common best practice because complex mega menus can be difficult to navigate on smaller screens and may cause layout issues.

If you are using the Header Builder, you can assign a different menu specifically for the element shown on small screens. If you are using the standard header layout, refer to the alternative mobile menu documentation for instructions on setting a separate mobile menu.

Consider a Plugin for Complex Mega Menus
If you’re building a very advanced mega menu, you may find it easier and more flexible to use a dedicated mega menu plugin. While the method above works well for many use cases, complex layouts may require additional CSS or fine-tuning.

Check out our list of recommended Mega Menu plugins.

  • Last updated on
Back To Top