Download The Child-Theme

JS only Mega Menu in Bricks Builder

Table of Contents

Video Walkthrough

Step-by-step guide

The Step-by-Step Instructions always assume that you have installed the child-theme. If not you will have to manually enqueue the script/styles.

Assign An ID to your Nav-Menu

First of all you have to place a Nav-Menu on your page/template. Assign that Nav-Menu an ID then like so:

Create Your Dropdowns

Creating a Dropdown for the Mega Menu is as easy as creating any other Content.

  • Put anything you would like to show up in a Container element.
  • Assign that Container-Element at least the attribute “wcd_mm_target” with a corresponding Value
    • To get the right Value you have to count from 0 to X. I.e. If you want to to assign the dropdown to the second Menu-Item you have to use a Value of “1”.
  • Optional: Give it a custom Position by using the attribute “wcd_mm_position”
  • Repeat that step for every Dropdown you want to create!

Enqueue The Files

Assuming that you are using the child-theme all you need to do is using wp_enqueue_script to load the necessary JS file. Then you just need to initialize the Mega Menu by passing the ID of the Nav-Element (Step 1) and also defining the options you want to use.

You can copy & paste the example below, which also includes all possible options, make sure to change the ID of the Mega-Menu.

Paste that following code inside a Code-Block. Doesn’t matter where on your page the code block is. If you use the provided Code all Javascript-Files will get loaded in the correct order & in the footer by default!



add_action('wp_footer', function() { 

const megaMenu = new WCD_megaMenu({
    menu : '#myMegaMenu',
    position : 'center',            // GLOBAL, CAN BE OVERWRITTEN BY EVERY DROPDOWN
    click : {
    hover: {
    breakpoint : window.matchMedia("(max-width: 766px)"),


}, 99);


Options & Parameter to adapt

As you maybe saw in the Code above, there are a few options you can adapt to change the behaviour of the Mega-Menu:
Option Name Type Default Value Note

ID of your Nav-Menu Element. Include the hash (#) sign!


Where to align the Mega-Menu (in relation to it's corresponding menu-item).

Possible options are: 'left', 'center', 'right' and 'screen-center'


Accepts two child-parameters: open & close which are both Boolean Values.


Whether the Mega-Menu should be opened on click or not!


Whether the Mega-Menu should be closed on click (outside) or not!


Accepts two child-parameters: open & close which are both Boolean Values.


Whether the Mega-Menu should be opened when hovering the menu-item.


Whether the Mega-Menu should be closed when hovering outside.

    • Defines at which breakpoint the mega-menu should switch to mobile-mode. Use the same Setting as in Bricks Builder for your mobile-nav.
    • use window.matchMedia with a certain breakpoint like so
window.matchMedia("(max-width: 766px)")
  • Learn more about it here!

Example of a completed Options Object:

const options = {
    menu: '#myMegaMenu',
    position: 'center',
    click: {
    hover: {
    breakpoint: window.matchMedia("(max-width: 766px)"),

Full Source Code

This Section get's updated automatically and always shows the latest Version of the source-code. You can copy & paste that code if you haven't installed the child-theme.