diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 3b86d688b..ea77174d7 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
index a9d33e7c2..d92a5f291 100644
--- a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
+++ b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
@@ -38,6 +38,256 @@ exports[`OE - navbar dark renders correctly 1`] = `
         <ul
           class="me-auto navbar-nav"
         >
+          <li
+            class="nav-item"
+          >
+            <div
+              aria-labelledby="dropdown-megamenu"
+              class="nav-link bcl-mega-menu"
+              style="--bcl-mm-min-height: 300px;"
+            >
+              <a
+                aria-expanded="false"
+                class="nav-link dropdown-toggle"
+                data-bs-auto-close="outside"
+                data-bs-toggle="dropdown"
+                href="/example.html"
+                id="dropdown-megamenu"
+                role="button"
+              >
+                A link with dropdown
+              </a>
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="mega-menu-container dropdown-menu"
+              >
+                <div
+                  class="d-lg-none back-button-block"
+                >
+                  <button
+                    class="back-button btn btn-link btn-md"
+                    type="button"
+                  >
+                    <svg
+                      class="me-2-5 bi icon--fluid"
+                    >
+                      <use
+                        xlink:href="/icons.svg#arrow-left"
+                      />
+                    </svg>
+                    Back
+                  </button>
+                </div>
+                <div
+                  class="row position-relative"
+                >
+                  <div
+                    class="col-md-12 col-xl-3"
+                  >
+                    <div
+                      class="content-block"
+                    >
+                      <h4>
+                        Mega Menu Content Title
+                      </h4>
+                      <p>
+                        Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      </p>
+                      <a
+                        class="content-link"
+                        href="/example.html"
+                      >
+                        Discover more
+                        <svg
+                          class="ms-2-5 bi icon--s"
+                        >
+                          <use
+                            xlink:href="/icons.svg#arrow-right"
+                          />
+                        </svg>
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                  >
+                    <div
+                      class="navigation-items"
+                    >
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="false"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-megamenu-inner"
+                          role="button"
+                        >
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-megamenu-inner"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="false"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-megamenu-inner-2"
+                          role="button"
+                        >
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-megamenu-inner-2"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                      <div
+                        class="collapse"
+                      >
+                        <a
+                          class="mb-3 d-block"
+                          href="#"
+                        >
+                           Example link
+                        </a>
+                        <img
+                          alt="image"
+                          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                        />
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
           <li
             class="nav-item"
           >
@@ -198,6 +448,256 @@ exports[`OE - navbar light renders correctly 1`] = `
         <ul
           class="me-auto navbar-nav"
         >
+          <li
+            class="nav-item"
+          >
+            <div
+              aria-labelledby="dropdown-megamenu"
+              class="nav-link bcl-mega-menu"
+              style="--bcl-mm-min-height: 300px;"
+            >
+              <a
+                aria-expanded="false"
+                class="nav-link dropdown-toggle"
+                data-bs-auto-close="outside"
+                data-bs-toggle="dropdown"
+                href="/example.html"
+                id="dropdown-megamenu"
+                role="button"
+              >
+                A link with dropdown
+              </a>
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="mega-menu-container dropdown-menu"
+              >
+                <div
+                  class="d-lg-none back-button-block"
+                >
+                  <button
+                    class="back-button btn btn-link btn-md"
+                    type="button"
+                  >
+                    <svg
+                      class="me-2-5 bi icon--fluid"
+                    >
+                      <use
+                        xlink:href="/icons.svg#arrow-left"
+                      />
+                    </svg>
+                    Back
+                  </button>
+                </div>
+                <div
+                  class="row position-relative"
+                >
+                  <div
+                    class="col-md-12 col-xl-3"
+                  >
+                    <div
+                      class="content-block"
+                    >
+                      <h4>
+                        Mega Menu Content Title
+                      </h4>
+                      <p>
+                        Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      </p>
+                      <a
+                        class="content-link"
+                        href="/example.html"
+                      >
+                        Discover more
+                        <svg
+                          class="ms-2-5 bi icon--s"
+                        >
+                          <use
+                            xlink:href="/icons.svg#arrow-right"
+                          />
+                        </svg>
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                  >
+                    <div
+                      class="navigation-items"
+                    >
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="false"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-megamenu-inner"
+                          role="button"
+                        >
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-megamenu-inner"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="false"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-megamenu-inner-2"
+                          role="button"
+                        >
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-megamenu-inner-2"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                      <div
+                        class="collapse"
+                      >
+                        <a
+                          class="mb-3 d-block"
+                          href="#"
+                        >
+                           Example link
+                        </a>
+                        <img
+                          alt="image"
+                          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                        />
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
           <li
             class="nav-item"
           >
@@ -341,6 +841,256 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
       <ul
         class="me-auto navbar-nav"
       >
+        <li
+          class="nav-item"
+        >
+          <div
+            aria-labelledby="dropdown-megamenu"
+            class="nav-link bcl-mega-menu"
+            style="--bcl-mm-min-height: 300px;"
+          >
+            <a
+              aria-expanded="false"
+              class="nav-link dropdown-toggle"
+              data-bs-auto-close="outside"
+              data-bs-toggle="dropdown"
+              href="/example.html"
+              id="dropdown-megamenu"
+              role="button"
+            >
+              A link with dropdown
+            </a>
+            <div
+              aria-labelledby="dropdown-megamenu"
+              class="mega-menu-container dropdown-menu"
+            >
+              <div
+                class="d-lg-none back-button-block"
+              >
+                <button
+                  class="back-button btn btn-link btn-md"
+                  type="button"
+                >
+                  <svg
+                    class="me-2-5 bi icon--fluid"
+                  >
+                    <use
+                      xlink:href="/icons.svg#arrow-left"
+                    />
+                  </svg>
+                  Back
+                </button>
+              </div>
+              <div
+                class="row position-relative"
+              >
+                <div
+                  class="col-md-12 col-xl-3"
+                >
+                  <div
+                    class="content-block"
+                  >
+                    <h4>
+                      Mega Menu Content Title
+                    </h4>
+                    <p>
+                      Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                    <a
+                      class="content-link"
+                      href="/example.html"
+                    >
+                      Discover more
+                      <svg
+                        class="ms-2-5 bi icon--s"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-right"
+                        />
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+                <div
+                  class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                >
+                  <div
+                    class="navigation-items"
+                  >
+                    <div
+                      class="dropdown dropend"
+                    >
+                      <a
+                        aria-expanded="false"
+                        class="dropdown-toggle"
+                        data-bs-auto-close="false"
+                        data-bs-toggle="dropdown"
+                        href="/example.html"
+                        id="dropdown-megamenu-inner"
+                        role="button"
+                      >
+                        Base Category Item
+                        <svg
+                          class="ms-2-5 bi icon--fluid"
+                        >
+                          <use
+                            xlink:href="/icons.svg#chevron-right"
+                          />
+                        </svg>
+                      </a>
+                      <ul
+                        aria-labelledby="dropdown-megamenu-inner"
+                        class="dropdown-menu"
+                      >
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a
+                      href="/example.html"
+                    >
+                      Base Category Item
+                    </a>
+                    <div
+                      class="dropdown dropend"
+                    >
+                      <a
+                        aria-expanded="false"
+                        class="dropdown-toggle"
+                        data-bs-auto-close="false"
+                        data-bs-toggle="dropdown"
+                        href="/example.html"
+                        id="dropdown-megamenu-inner-2"
+                        role="button"
+                      >
+                        Base Category Item
+                        <svg
+                          class="ms-2-5 bi icon--fluid"
+                        >
+                          <use
+                            xlink:href="/icons.svg#chevron-right"
+                          />
+                        </svg>
+                      </a>
+                      <ul
+                        aria-labelledby="dropdown-megamenu-inner-2"
+                        class="dropdown-menu"
+                      >
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <div
+                      class="collapse"
+                    >
+                      <a
+                        class="mb-3 d-block"
+                        href="#"
+                      >
+                         Example link
+                      </a>
+                      <img
+                        alt="image"
+                        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                      />
+                    </div>
+                    <a
+                      href="/example.html"
+                    >
+                      Base Category Item
+                    </a>
+                    <a
+                      href="/example.html"
+                    >
+                      Base Category Item
+                    </a>
+                    <a
+                      href="/example.html"
+                    >
+                      Base Category Item
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
         <li
           class="nav-item"
         >
@@ -500,6 +1250,256 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
         <ul
           class="me-auto navbar-nav"
         >
+          <li
+            class="nav-item"
+          >
+            <div
+              aria-labelledby="dropdown-megamenu"
+              class="nav-link bcl-mega-menu"
+              style="--bcl-mm-min-height: 300px;"
+            >
+              <a
+                aria-expanded="false"
+                class="nav-link dropdown-toggle"
+                data-bs-auto-close="outside"
+                data-bs-toggle="dropdown"
+                href="/example.html"
+                id="dropdown-megamenu"
+                role="button"
+              >
+                A link with dropdown
+              </a>
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="mega-menu-container dropdown-menu"
+              >
+                <div
+                  class="d-lg-none back-button-block"
+                >
+                  <button
+                    class="back-button btn btn-link btn-md"
+                    type="button"
+                  >
+                    <svg
+                      class="me-2-5 bi icon--fluid"
+                    >
+                      <use
+                        xlink:href="/icons.svg#arrow-left"
+                      />
+                    </svg>
+                    Back
+                  </button>
+                </div>
+                <div
+                  class="row position-relative"
+                >
+                  <div
+                    class="col-md-12 col-xl-3"
+                  >
+                    <div
+                      class="content-block"
+                    >
+                      <h4>
+                        Mega Menu Content Title
+                      </h4>
+                      <p>
+                        Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      </p>
+                      <a
+                        class="content-link"
+                        href="/example.html"
+                      >
+                        Discover more
+                        <svg
+                          class="ms-2-5 bi icon--s"
+                        >
+                          <use
+                            xlink:href="/icons.svg#arrow-right"
+                          />
+                        </svg>
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                  >
+                    <div
+                      class="navigation-items"
+                    >
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="false"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-megamenu-inner"
+                          role="button"
+                        >
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-megamenu-inner"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="false"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-megamenu-inner-2"
+                          role="button"
+                        >
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-megamenu-inner-2"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                      <div
+                        class="collapse"
+                      >
+                        <a
+                          class="mb-3 d-block"
+                          href="#"
+                        >
+                           Example link
+                        </a>
+                        <img
+                          alt="image"
+                          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                        />
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        Base Category Item
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
           <li
             class="nav-item"
           >
diff --git a/src/components/bcl-navbar/package.json b/src/components/bcl-navbar/package.json
index ed274b4e0..6767d3ff0 100644
--- a/src/components/bcl-navbar/package.json
+++ b/src/components/bcl-navbar/package.json
@@ -5,6 +5,7 @@
   "version": "1.10.0",
   "dependencies": {
     "@openeuropa/bcl-form": "^1.10.0",
+    "@openeuropa/bcl-mega-menu": "^1.10.0",
     "@openeuropa/bcl-navigation": "^1.10.0"
   },
   "publishConfig": {
diff --git a/src/components/bcl-navigation/navigation.html.twig b/src/components/bcl-navigation/navigation.html.twig
index 84a2cc4b6..a7b8e2937 100644
--- a/src/components/bcl-navigation/navigation.html.twig
+++ b/src/components/bcl-navigation/navigation.html.twig
@@ -124,6 +124,8 @@
           {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
         {% elseif _item.button is defined %}
           {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {% elseif _item.mega_menu is defined %}
+          {% include '@oe-bcl/bcl-mega-menu/mega-menu.html.twig' with _item only %}
         {% else %}
           {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
         {% endif %}
diff --git a/src/compositions/bcl-contact-form/__snapshots__/contact-form.test.js.snap b/src/compositions/bcl-contact-form/__snapshots__/contact-form.test.js.snap
index fd34342fa..ee2bea70c 100644
--- a/src/compositions/bcl-contact-form/__snapshots__/contact-form.test.js.snap
+++ b/src/compositions/bcl-contact-form/__snapshots__/contact-form.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1372,6 +1637,271 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -2593,6 +3123,271 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-event/__snapshots__/event.test.js.snap b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
index 2bc4c0ddd..fa558e541 100644
--- a/src/compositions/bcl-event/__snapshots__/event.test.js.snap
+++ b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - event listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -2104,6 +2369,271 @@ exports[`OE - event page renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
index 5daff8b84..3aaf66b9d 100644
--- a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
+++ b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Glossary detail renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1588,6 +1853,271 @@ exports[`OE - Glossary listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-group/__snapshots__/group.test.js.snap b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
index 09055ac7c..704d1d225 100644
--- a/src/compositions/bcl-group/__snapshots__/group.test.js.snap
+++ b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Group landing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -2041,6 +2306,271 @@ exports[`OE - Group listing Content renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3925,6 +4455,271 @@ exports[`OE - Group listing Member renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -5656,6 +6451,271 @@ exports[`OE - Group listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-header/__snapshots__/header.test.js.snap b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
index 2fc2c649d..03c84f583 100644
--- a/src/compositions/bcl-header/__snapshots__/header.test.js.snap
+++ b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
@@ -170,6 +170,271 @@ exports[`OE - Header EC renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -945,6 +1210,271 @@ exports[`OE - Header EU renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1714,6 +2244,271 @@ exports[`OE - Header Neutral renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-header/package.json b/src/compositions/bcl-header/package.json
index a01fe2042..f78cdaf58 100644
--- a/src/compositions/bcl-header/package.json
+++ b/src/compositions/bcl-header/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@openeuropa/bcl-breadcrumb": "^1.10.0",
     "@openeuropa/bcl-language-list": "^1.10.0",
+    "@openeuropa/bcl-mega-menu": "^1.10.0",
     "@openeuropa/bcl-modal": "^1.10.0",
     "@openeuropa/bcl-navbar": "^1.10.0"
   },
diff --git a/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap b/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
index dbd957faf..4d4d4bc50 100644
--- a/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
+++ b/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Landing page renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-mega-menu/.npmignore b/src/compositions/bcl-mega-menu/.npmignore
new file mode 100644
index 000000000..384605447
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/.npmignore
@@ -0,0 +1,2 @@
+__snapshots__
+*.js
diff --git a/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap b/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
new file mode 100644
index 000000000..3f3c925f2
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
@@ -0,0 +1,252 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OE - Mega Menu renders correctly 1`] = `
+<jest>
+  <div
+    aria-labelledby="dropdown-megamenu"
+    class="bcl-mega-menu"
+    style="--bcl-mm-min-height: 300px;"
+  >
+    <button
+      aria-expanded="false"
+      autocomplete="off"
+      class="dropdown-toggle btn btn-primary btn-md"
+      data-bs-auto-close="outside"
+      data-bs-toggle="dropdown"
+      id="dropdown-megamenu"
+      type="button"
+    >
+      A link with dropdown
+    </button>
+    <div
+      aria-labelledby="dropdown-megamenu"
+      class="mega-menu-container dropdown-menu"
+    >
+      <div
+        class="d-lg-none back-button-block"
+      >
+        <button
+          class="back-button btn btn-link btn-md"
+          type="button"
+        >
+          <svg
+            class="me-2-5 bi icon--fluid"
+          >
+            <use
+              xlink:href="#arrow-left"
+            />
+          </svg>
+          Back
+        </button>
+      </div>
+      <div
+        class="row position-relative"
+      >
+        <div
+          class="col-md-12 col-xl-3"
+        >
+          <div
+            class="content-block"
+          >
+            <h4>
+              Mega Menu Content Title
+            </h4>
+            <p>
+              Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>
+            <a
+              class="content-link"
+              href="/example.html"
+            >
+              Discover more
+              <svg
+                class="ms-2-5 bi icon--s"
+              >
+                <use
+                  xlink:href="#arrow-right"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div
+          class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+        >
+          <div
+            class="navigation-items"
+          >
+            <div
+              class="dropdown dropend"
+            >
+              <a
+                aria-expanded="false"
+                class="dropdown-toggle"
+                data-bs-auto-close="false"
+                data-bs-toggle="dropdown"
+                href="/example.html"
+                id="dropdown-megamenu-inner"
+                role="button"
+              >
+                Base Category Item
+                <svg
+                  class="ms-2-5 bi icon--fluid"
+                >
+                  <use
+                    xlink:href="#chevron-right"
+                  />
+                </svg>
+              </a>
+              <ul
+                aria-labelledby="dropdown-megamenu-inner"
+                class="dropdown-menu"
+              >
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <a
+              href="/example.html"
+            >
+              Base Category Item
+            </a>
+            <div
+              class="dropdown dropend"
+            >
+              <a
+                aria-expanded="false"
+                class="dropdown-toggle"
+                data-bs-auto-close="false"
+                data-bs-toggle="dropdown"
+                href="/example.html"
+                id="dropdown-megamenu-inner-2"
+                role="button"
+              >
+                Base Category Item
+                <svg
+                  class="ms-2-5 bi icon--fluid"
+                >
+                  <use
+                    xlink:href="#chevron-right"
+                  />
+                </svg>
+              </a>
+              <ul
+                aria-labelledby="dropdown-megamenu-inner-2"
+                class="dropdown-menu"
+              >
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div
+              class="collapse"
+            >
+              <a
+                class="mb-3 d-block"
+                href="#"
+              >
+                 Example link
+              </a>
+              <img
+                alt="image"
+                src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+              />
+            </div>
+            <a
+              href="/example.html"
+            >
+              Base Category Item
+            </a>
+            <a
+              href="/example.html"
+            >
+              Base Category Item
+            </a>
+            <a
+              href="/example.html"
+            >
+              Base Category Item
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</jest>
+`;
diff --git a/src/compositions/bcl-mega-menu/data.js b/src/compositions/bcl-mega-menu/data.js
new file mode 100644
index 000000000..936c971d7
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/data.js
@@ -0,0 +1,94 @@
+module.exports = {
+  trigger: {
+    label: "A link with dropdown",
+    path: "/example.html",
+  },
+  id: "dropdown-megamenu",
+  content_link: {
+    label: "Discover more",
+    path: "/example.html",
+    icon: {
+      name: "arrow-right",
+    },
+  },
+  content_block:
+    "<h4>Mega Menu Content Title</h4><p>Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  items: [
+    {
+      id: "dropdown-megamenu-inner",
+      trigger: {
+        label: "Base Category Item",
+        path: "/example.html",
+      },
+      items: [
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+      ],
+    },
+    {
+      label: "Base Category Item",
+      path: "/example.html",
+    },
+    {
+      id: "dropdown-megamenu-inner-2",
+      trigger: {
+        label: "Base Category Item",
+        path: "/example.html",
+      },
+      collapse:
+        "<a href='#' class='mb-3 d-block'> Example link</a><img src='https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg' alt='image'>",
+      items: [
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+      ],
+    },
+    {
+      label: "Base Category Item",
+      path: "/example.html",
+    },
+    {
+      label: "Base Category Item",
+      path: "/example.html",
+    },
+    {
+      label: "Base Category Item",
+      path: "/example.html",
+    },
+  ],
+};
diff --git a/src/compositions/bcl-mega-menu/mega-menu.html.twig b/src/compositions/bcl-mega-menu/mega-menu.html.twig
new file mode 100644
index 000000000..d350e8fae
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/mega-menu.html.twig
@@ -0,0 +1,152 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: dropdown-random(1000))
+  - link (boolean) (default: false) - sets trigger to link, default is button
+  - trigger (link or button)
+  - content_block (block) (default: '')
+  - content_link (link)
+  - icon_path (string) (default: '')
+  - min_height (string) (default: '300px')
+    ! set min-height of mega-menu
+  - items (object[])
+    format: [
+      {
+        - link or dropdown
+          ! dropdown extra property:
+            collapse (render) - to showcase on the last column 
+      }
+    ]
+  - back_button_label (string) (default: 'Back')
+  - icon_path (string) (default: '')
+#}
+
+{% set _id = id|default('dropdown-' ~ random(1000)) %}
+{% set _link = link ?? false %}
+{% set _trigger = trigger|default({}) %}
+{% set _content_block = content_block|default('') %}
+{% set _content_link = content_link|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _min_height = min_height|default('300px') %}
+{% set _items = items|default([]) %}
+{% set _back_button_label = back_button_label|default('Back') %}
+{% set _icon_path = icon_path|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _classes = ['bcl-mega-menu'] %}
+
+{% set attributes = attributes.setAttribute('aria-labelledby', _id).addClass(_classes) %}
+
+{% if _trigger.attributes is empty %}
+  {% set _trigger = _trigger|merge({
+    attributes: create_attribute()
+  }) %}
+{% endif %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger.attributes.addClass(['dropdown-toggle'])
+                      .setAttribute('aria-expanded', 'false')
+                      .setAttribute('data-bs-toggle', 'dropdown')
+                      .setAttribute('data-bs-auto-close', 'outside')
+                      .setAttribute('id', _id)
+}) %}
+{% if _link %}
+  {% set _trigger = _trigger|merge({
+    attributes: _trigger.attributes.setAttribute('role', 'button') 
+  }) %}
+{% else %}
+  {% set _trigger = _trigger|merge({
+    attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
+  }) %}
+{% endif %}
+
+<div {{ attributes }} style="--bcl-mm-min-height: {{ _min_height }};">
+  {% if _link %}
+    {% include '@oe-bcl/bcl-link/link.html.twig' with _trigger only %}
+  {% else %}
+    {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
+  {% endif %}
+  <div class="mega-menu-container dropdown-menu" aria-labelledby="{{ _id }}">
+    <div class="d-lg-none back-button-block">
+      {% include '@oe-bcl/bcl-button/button.html.twig' with {
+        label: _back_button_label,
+        icon_position: "before",
+        variant: 'link',
+        icon: {
+          path: _icon_path,
+          name: "arrow-left",
+        },
+        attributes: create_attribute().addClass(['back-button'])
+      } only %}
+    </div>
+    <div class="row position-relative">
+      {% if content_block is defined %}
+      <div class="col-md-12 col-xl-3">
+        <div class="content-block">
+          {%- block content_block -%}
+            {{ _content_block }}
+          {%- endblock -%}
+          {% if _content_link is defined %}
+            {% set _content_link = _content_link|merge({
+              icon: _content_link.icon|default({})|merge({
+                path: _icon_path
+              }),
+                attributes: (_content_link.attributes is defined
+                  ? _content_link.attributes
+                  : create_attribute()
+                ).addClass('content-link')
+            }) %}
+
+            {% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}
+          {% endif %}
+        </div>
+      </div>
+      {% endif %}
+      <div class="col-md-12 col-xl-9 mb-3 mb-xl-0">
+        <div class="navigation-items">
+          {% for _item in _items %}
+            {% if _item.items is defined %}
+              {% set _items_list = _item.items %}
+              {% if _item.see_all is defined %}
+                {% set _items_list = _items_list|merge([
+                  _item.see_all|merge({
+                    icon: {
+                      name: "arrow-right",
+                      path: _icon_path,
+                    },
+                    attributes: create_attribute().addClass('see-all-button')
+                  })
+                ]) %}
+              {% endif %}
+              {% set _item = _item|merge({ items: _items_list }) %}
+              {% set _trigger_attributes = _item.trigger.attributes is defined ? _item.trigger.attributes : create_attribute() %}
+              {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item|merge({
+                direction: 'dropend',
+                link: true,
+                trigger: _item.trigger|merge({
+                  icon: {
+                    name: "chevron-right",
+                    path: _icon_path,
+                    size: "fluid",
+                  },
+                  attributes: _trigger_attributes.setAttribute('data-bs-auto-close', 'false')
+                })
+              }) only %}
+              {% if _item.collapse is defined %}
+                <div class="collapse">
+                  {{ _item.collapse|raw }}
+                </div>
+              {% endif %}
+            {% else %}
+              {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+            {% endif %}
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endapply %}
diff --git a/src/compositions/bcl-mega-menu/mega-menu.story.js b/src/compositions/bcl-mega-menu/mega-menu.story.js
new file mode 100644
index 000000000..c1dbc3598
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/mega-menu.story.js
@@ -0,0 +1,16 @@
+import { correctPaths } from "@openeuropa/bcl-story-utils";
+
+import demoData from "@openeuropa/bcl-mega-menu/data.js";
+import megaMenu from "@openeuropa/bcl-mega-menu/mega-menu.html.twig";
+
+export default {
+  title: "Compositions/Mega Menu",
+};
+
+const applyArgs = (data) => {
+  data.icon_path = "/icons.svg";
+
+  return Object.assign(correctPaths(data));
+};
+
+export const Default = () => megaMenu(applyArgs(demoData));
diff --git a/src/compositions/bcl-mega-menu/mega-menu.test.js b/src/compositions/bcl-mega-menu/mega-menu.test.js
new file mode 100644
index 000000000..8aae06d46
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/mega-menu.test.js
@@ -0,0 +1,25 @@
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
+import demoData from "@openeuropa/bcl-mega-menu/data";
+
+const template = "@oe-bcl/bcl-mega-menu/mega-menu.html.twig";
+
+const render = (params) => renderTwigFileAsNode(template, params);
+
+expect.extend(toHaveNoViolations);
+
+describe("OE - Mega Menu", () => {
+  test(`renders correctly`, () => {
+    expect.assertions(1);
+    return expect(render(demoData)).resolves.toMatchSnapshot();
+  });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData, true)),
+    ).toHaveNoViolations();
+  });
+});
diff --git a/src/compositions/bcl-mega-menu/package.json b/src/compositions/bcl-mega-menu/package.json
new file mode 100644
index 000000000..f92cce078
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@openeuropa/bcl-mega-menu",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "1.10.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "OE - BCL mega menu",
+  "dependencies": {
+    "@openeuropa/bcl-button": "^1.8.2",
+    "@openeuropa/bcl-dropdown": "^1.8.2",
+    "@openeuropa/bcl-link": "^1.8.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openeuropa/bootstrap-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openeuropa/bootstrap-component-library.git/issues"
+  },
+  "homepage": "https://github.com/openeuropa/bootstrap-component-library",
+  "keywords": [
+    "openeuropa",
+    "bootstrap-component-library",
+    "design-system",
+    "twig"
+  ]
+}
diff --git a/src/compositions/bcl-news/__snapshots__/news.test.js.snap b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
index f420cfa77..52eb2d3ea 100644
--- a/src/compositions/bcl-news/__snapshots__/news.test.js.snap
+++ b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - News full page renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1290,6 +1555,271 @@ exports[`OE - News listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-page/__snapshots__/page.test.js.snap b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
index 023a9178e..a511fa018 100644
--- a/src/compositions/bcl-page/__snapshots__/page.test.js.snap
+++ b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Page Page renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-person/__snapshots__/person.test.js.snap b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
index 6a5f4ee79..0e0b6a406 100644
--- a/src/compositions/bcl-person/__snapshots__/person.test.js.snap
+++ b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Person details renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1421,6 +1686,271 @@ exports[`OE - Person listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
index dfb4c2d4e..b3c8081d9 100644
--- a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
+++ b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1833,6 +2098,271 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3546,6 +4076,271 @@ exports[`OE - Procurement listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-project/__snapshots__/project.test.js.snap b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
index 77055e36e..f0a32d586 100644
--- a/src/compositions/bcl-project/__snapshots__/project.test.js.snap
+++ b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
@@ -1978,6 +1978,271 @@ exports[`OE - Project listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3780,6 +4045,271 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -6825,6 +7355,271 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -9870,6 +10665,271 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
index 30c408736..2bc000dc0 100644
--- a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
+++ b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1640,6 +1905,271 @@ exports[`OE - Publication details renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3170,6 +3700,271 @@ exports[`OE - Publication listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
index 09e6ec5a8..a182f5237 100644
--- a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
+++ b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Subscription renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-user/__snapshots__/user.test.js.snap b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
index cd1c6b556..f44d9a806 100644
--- a/src/compositions/bcl-user/__snapshots__/user.test.js.snap
+++ b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
@@ -161,6 +161,271 @@ exports[`OE - User list renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1764,6 +2029,271 @@ exports[`OE - User renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3934,6 +4464,271 @@ exports[`OE - User terms renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
index f9e4013b2..c473f4f7f 100644
--- a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
+++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
@@ -119,6 +119,271 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -2138,6 +2403,271 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -4156,6 +4686,271 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
           <ul
             class="me-auto navbar-nav"
           >
+            <li
+              class="nav-item"
+            >
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
+              >
+                <a
+                  aria-expanded="false"
+                  class="nav-link dropdown-toggle"
+                  data-bs-auto-close="outside"
+                  data-bs-toggle="dropdown"
+                  href="/example.html"
+                  id="dropdown-megamenu"
+                  role="button"
+                >
+                  A link with dropdown
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu"
+                >
+                  <div
+                    class="d-lg-none back-button-block"
+                  >
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
+                    >
+                      <svg
+                        class="me-2-5 bi icon--fluid"
+                      >
+                        <use
+                          xlink:href="/icons.svg#arrow-left"
+                        />
+                      </svg>
+                      Back
+                    </button>
+                  </div>
+                  <div
+                    class="row position-relative"
+                  >
+                    <div
+                      class="col-md-12 col-xl-3"
+                    >
+                      <div
+                        class="content-block"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                        <a
+                          class="content-link"
+                          href="/example.html"
+                        >
+                          Discover more
+                          <svg
+                            class="ms-2-5 bi icon--s"
+                          >
+                            <use
+                              xlink:href="/icons.svg#arrow-right"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    <div
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
+                              >
+                                See all
+                                <svg
+                                  class="ms-2-5 bi icon--s"
+                                >
+                                  <use
+                                    xlink:href="/icons.svg#arrow-right"
+                                  />
+                                </svg>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="false"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-megamenu-inner-2"
+                            role="button"
+                          >
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-megamenu-inner-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div
+                          class="collapse"
+                        >
+                          <a
+                            class="mb-3 d-block"
+                            href="#"
+                          >
+                             Example link
+                          </a>
+                          <img
+                            alt="image"
+                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                          />
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          Base Category Item
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
diff --git a/src/data/header/data--navbar.js b/src/data/header/data--navbar.js
index c305ac1d3..3d7c8d6cd 100644
--- a/src/data/header/data--navbar.js
+++ b/src/data/header/data--navbar.js
@@ -44,6 +44,109 @@ module.exports = {
     navbar: true,
     attributes: new drupalAttribute().addClass("me-auto"),
     items: [
+      {
+        mega_menu: true,
+        link: true,
+        icon_path: "/icons.svg",
+        id: "dropdown-megamenu",
+        trigger: {
+          label: "A link with dropdown",
+          path: "/example.html",
+          attributes: new drupalAttribute().addClass("nav-link"),
+        },
+        id: "dropdown-megamenu",
+        content_link: {
+          label: "Discover more",
+          path: "/example.html",
+          icon: {
+            name: "arrow-right",
+          },
+        },
+        content_block:
+          "<h4>Mega Menu Content Title</h4><p>Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+        items: [
+          {
+            id: "dropdown-megamenu-inner",
+            trigger: {
+              label: "Base Category Item",
+              path: "/example.html",
+            },
+            see_all: {
+              label: "See all",
+              path: "/example.html",
+            },
+            items: [
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+            ],
+          },
+          {
+            label: "Base Category Item",
+            path: "/example.html",
+          },
+          {
+            id: "dropdown-megamenu-inner-2",
+            trigger: {
+              label: "Base Category Item",
+              path: "/example.html",
+            },
+            collapse:
+              "<a href='#' class='mb-3 d-block'> Example link</a><img src='https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg' alt='image'>",
+            items: [
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+            ],
+          },
+          {
+            label: "Base Category Item",
+            path: "/example.html",
+          },
+          {
+            label: "Base Category Item",
+            path: "/example.html",
+          },
+          {
+            label: "Base Category Item",
+            path: "/example.html",
+          },
+        ],
+      },
       {
         label: "Home",
         path: "/example.html",
diff --git a/src/data/navbar/data.js b/src/data/navbar/data.js
index 54af4e972..e519019a0 100644
--- a/src/data/navbar/data.js
+++ b/src/data/navbar/data.js
@@ -10,6 +10,109 @@ module.exports = {
     navbar: true,
     attributes: new drupalAttribute().addClass("me-auto"),
     items: [
+      {
+        mega_menu: true,
+        link: true,
+        icon_path: "/icons.svg",
+        id: "dropdown-megamenu",
+        trigger: {
+          label: "A link with dropdown",
+          path: "/example.html",
+          attributes: new drupalAttribute().addClass("nav-link"),
+        },
+        id: "dropdown-megamenu",
+        content_link: {
+          label: "Discover more",
+          path: "/example.html",
+          icon: {
+            name: "arrow-right",
+          },
+        },
+        see_all: {
+          label: "See all",
+          path: "/example.html",
+        },
+        content_block:
+          "<h4>Mega Menu Content Title</h4><p>Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+        items: [
+          {
+            id: "dropdown-megamenu-inner",
+            trigger: {
+              label: "Base Category Item",
+              path: "/example.html",
+            },
+            items: [
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+            ],
+          },
+          {
+            label: "Base Category Item",
+            path: "/example.html",
+          },
+          {
+            id: "dropdown-megamenu-inner-2",
+            trigger: {
+              label: "Base Category Item",
+              path: "/example.html",
+            },
+            collapse:
+              "<a href='#' class='mb-3 d-block'> Example link</a><img src='https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg' alt='image'>",
+            items: [
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+            ],
+          },
+          {
+            label: "Base Category Item",
+            path: "/example.html",
+          },
+          {
+            label: "Base Category Item",
+            path: "/example.html",
+          },
+          {
+            label: "Base Category Item",
+            path: "/example.html",
+          },
+        ],
+      },
       {
         label: "I'm a link",
         path: "#first",
diff --git a/src/themes/default/src/js/index.esm.js b/src/themes/default/src/js/index.esm.js
index f435ecbc9..5528d24d4 100644
--- a/src/themes/default/src/js/index.esm.js
+++ b/src/themes/default/src/js/index.esm.js
@@ -11,6 +11,7 @@ import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
+import MegaMenu from "@openeuropa/bcl-theme-default/src/js/mega-menu/mega-menu";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -29,6 +30,7 @@ export {
   Collapse,
   Dropdown,
   Modal,
+  MegaMenu,
   Offcanvas,
   Popover,
   ScrollSpyV2,
diff --git a/src/themes/default/src/js/index.umd.js b/src/themes/default/src/js/index.umd.js
index a92a95a1f..b6d4d87d9 100644
--- a/src/themes/default/src/js/index.umd.js
+++ b/src/themes/default/src/js/index.umd.js
@@ -11,6 +11,7 @@ import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
+import MegaMenu from "@openeuropa/bcl-theme-default/src/js/mega-menu/mega-menu";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -29,6 +30,7 @@ export default {
   Collapse,
   Dropdown,
   Modal,
+  MegaMenu,
   Offcanvas,
   Popover,
   ScrollSpyV2,
diff --git a/src/themes/default/src/js/mega-menu/mega-menu.js b/src/themes/default/src/js/mega-menu/mega-menu.js
new file mode 100644
index 000000000..4fb56453d
--- /dev/null
+++ b/src/themes/default/src/js/mega-menu/mega-menu.js
@@ -0,0 +1,52 @@
+import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+
+class MegaMenu {
+  constructor(root) {
+    this.root = root;
+    this.parentToggle = SelectorEngine.findOne('[data-bs-toggle="dropdown"]', this.root);
+    if (!this.parentToggle) return;
+    this.parentInstance = Dropdown.getOrCreateInstance(this.parentToggle);
+    this.childToggles = SelectorEngine.find('.dropdown > [data-bs-toggle="dropdown"]', this.root);
+    this.backButton = SelectorEngine.findOne('.back-button', this.root);
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    EventHandler.on(this.parentToggle, "shown.bs.dropdown", () => {
+      if (!window.matchMedia("(min-width: 992px)").matches) return;
+      if (this.childToggles.some(toggle => toggle.parentElement.classList.contains("show"))) return;
+      const firstToggle = this.childToggles[0];
+      Dropdown.getOrCreateInstance(firstToggle).show();
+    });
+    this.childToggles.forEach((toggle) => {
+      const dropdownInstance = Dropdown.getOrCreateInstance(toggle);
+      EventHandler.on(toggle, "click", (e) => {
+        e.preventDefault();
+        this.childToggles.forEach((other) => {
+          Dropdown.getOrCreateInstance(other).hide();
+        });
+        dropdownInstance.show();
+      });
+    });
+    if (this.backButton) {
+      EventHandler.on(this.backButton, "click", () => {
+        this.childToggles.forEach((toggle) => {
+          Dropdown.getOrCreateInstance(toggle).hide();
+        });
+      });
+    }
+  }
+
+  static init(selector = ".bcl-mega-menu") {
+    const megaMenus = SelectorEngine.find(selector);
+    megaMenus.forEach((menuEl) => new MegaMenu(menuEl));
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  MegaMenu.init();
+});
+
+export default MegaMenu;
diff --git a/src/themes/default/src/scss/_mega-menu.scss b/src/themes/default/src/scss/_mega-menu.scss
new file mode 100644
index 000000000..1c7e67892
--- /dev/null
+++ b/src/themes/default/src/scss/_mega-menu.scss
@@ -0,0 +1,233 @@
+/* stylelint-disable no-descending-specificity, declaration-no-important */
+.nav-item:has(> .bcl-mega-menu) {
+  position: relative;
+}
+.bcl-mega-menu {
+  &.nav-link {
+    padding: 0;
+  }
+  > .show + .mega-menu-container.dropdown-menu {
+    display: block;
+  }
+  .mega-menu-container.dropdown-menu {
+    position: absolute;
+    min-height: var(--bcl-mm-min-height);
+    display: none;
+    width: 100%;
+    padding: 0 map-get($spacers, 3);
+    border-radius: 0;
+    border-bottom: 1px solid var(--bs-dropdown-border-color);
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    top: 100%;
+    margin: 8px 0 0;
+    .back-button {
+      display: none;
+    }
+    &:has(.show) {
+      .back-button {
+        display: block;
+      }
+      .back-button-block {
+        padding-bottom: 46px;
+      }
+    }
+    > .row {
+      flex: 1;
+    }
+    .content-block {
+      position: relative;
+      height: 100%;
+      margin: 0 -1rem;
+      padding: map-get($spacers, 3);
+      &:after {
+        content: "";
+        pointer-events: none;
+        position: absolute;
+      }
+    }
+    .content-link {
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    .navigation-items {
+      width: 100%;
+      height: 100%;
+      > a,
+      > button,
+      > .dropdown > a,
+      li > button,
+      li > a {
+        padding: map-get($spacers, 2) map-get($spacers, "3-5");
+        white-space: normal;
+        &:has(svg) {
+          padding-right: map-get($spacers, 5);
+        }
+        &.active,
+        &.show {
+          background: $primary-bg-subtle;
+        }
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      li:has(.see-all-button) {
+        margin: 0 map-get($spacers, "3-5");
+        position: sticky;
+        top: 100%;
+      }
+      .dropdown-toggle,
+      > a {
+        color: $dark;
+        display: block;
+        text-decoration: none;
+        position: relative;
+        &.show {
+          color: $dark;
+          text-decoration: none;
+          &:after {
+            display: none;
+          }
+        }
+        &:after {
+          display: none;
+        }
+        > svg {
+          position: absolute;
+          right: 20px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+      .dropdown {
+        position: static;
+        &:has(.show) {
+          background: $blue-50;
+          & + .collapse {
+            display: block;
+          }
+        }
+        &:has(+ .collapse) {
+          .dropdown-menu {
+            height: 50%;
+          }
+        }
+        .dropdown-menu {
+          transform: none !important;
+          right: auto !important;
+          left: 0 !important;
+          width: 100%;
+          height: 100%;
+          border: 0;
+          overflow: scroll;
+          position: absolute;
+          padding: 0;
+          border-radius: 0;
+          background: $neutral-bg-subtle;
+          margin: 0;
+          .dropdown-item {
+            color: $link-color;
+            &:hover {
+              background: transparent;
+              text-decoration: underline;
+            }
+            &.see-all-button {
+              padding-left: 0;
+              padding-right: 0;
+              color: $dark;
+              position: relative;
+              &:after {
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 1px;
+                width: 100%;
+                content: "";
+                background: $neutral-border-color;
+              }
+            }
+          }
+        }
+      }
+      .collapse {
+        position: absolute;
+        right: auto;
+        left: 0;
+        width: 100%;
+        height: 50%;
+        top: 50%;
+        padding: map-get($spacers, 3);
+        background: $white;
+        overflow: scroll;
+        img {
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+    }
+  }
+}
+@include media-breakpoint-up(md) {
+  .nav-item:has(> .bcl-mega-menu) {
+    position: static;
+  }
+  .bcl-mega-menu {
+    > .show + .mega-menu-container.dropdown-menu {
+      display: flex;
+    }
+    .mega-menu-container.dropdown-menu {
+      top: 100%;
+      padding: map-get($spacers, 3);
+      .content-block {
+        margin-right: 0;
+        box-shadow: 0px 10px 13px -6px rgba(224, 229, 245, 0.5);
+      }
+      .navigation-items {
+        position: relative;
+        width: 33%;
+        margin-top: map-get($spacers, 3);
+        .dropdown {
+          .dropdown-menu {
+            left: 100% !important;
+            top: 0;
+            height: 100% !important;
+            margin: 0;
+          }
+        }
+        .collapse {
+          top: 0;
+          left: 200%;
+          height: 100%;
+        }
+      }
+    }
+  }
+  .bcl-mega-menu {
+    .mega-menu-container.dropdown-menu {
+      .content-block {
+        margin-bottom: map-get($spacers, 4);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .bcl-mega-menu {
+    .mega-menu-container.dropdown-menu {
+      .content-block {
+        box-shadow: none;
+        &:after {
+          bottom: 0;
+          right: 0;
+          top: 0;
+          width: 10px;
+          height: 100%;
+          box-shadow: 4px 0 10px 0 rgba(224, 229, 245, 0.5);
+        }
+      }
+    }
+  }
+}
diff --git a/src/themes/default/src/scss/base/_colors.scss b/src/themes/default/src/scss/base/_colors.scss
index 260175302..80171e947 100644
--- a/src/themes/default/src/scss/base/_colors.scss
+++ b/src/themes/default/src/scss/base/_colors.scss
@@ -16,6 +16,9 @@ $gray-700: #495057;
 
 $text-muted: #495057;
 
+$neutral-bg-subtle: #f3f5fb;
+$neutral-border-color: #b9c5e9;
+
 // Color variants scales
 
 // Tables
diff --git a/src/themes/default/src/scss/oe-bcl-default.scss b/src/themes/default/src/scss/oe-bcl-default.scss
index 0a123005d..bf753ecce 100644
--- a/src/themes/default/src/scss/oe-bcl-default.scss
+++ b/src/themes/default/src/scss/oe-bcl-default.scss
@@ -77,6 +77,7 @@
 @import "@openeuropa/bcl-theme-default/src/scss/spinners";
 @import "@openeuropa/bcl-theme-default/src/scss/badge";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect";
+@import "@openeuropa/bcl-theme-default/src/scss/mega-menu";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect-2";
 @import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
diff --git a/src/themes/joinup/src/js/index.esm.js b/src/themes/joinup/src/js/index.esm.js
index 6c9b74370..012fa6851 100644
--- a/src/themes/joinup/src/js/index.esm.js
+++ b/src/themes/joinup/src/js/index.esm.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import MegaMenu from "@openeuropa/bcl-theme-default/src/js/mega-menu/mega-menu";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
@@ -30,6 +31,7 @@ export {
   Dropdown,
   Gallery,
   Modal,
+  MegaMenu,
   AccessibleToggle,
   AccordionToggle,
   Offcanvas,
diff --git a/src/themes/joinup/src/js/index.umd.js b/src/themes/joinup/src/js/index.umd.js
index 50096558f..b9721a68e 100644
--- a/src/themes/joinup/src/js/index.umd.js
+++ b/src/themes/joinup/src/js/index.umd.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import MegaMenu from "@openeuropa/bcl-theme-default/src/js/mega-menu/mega-menu";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
@@ -30,6 +31,7 @@ export default {
   Dropdown,
   Gallery,
   Modal,
+  MegaMenu,
   AccessibleToggle,
   AccordionToggle,
   Offcanvas,
diff --git a/src/themes/joinup/src/scss/oe-bcl-joinup.scss b/src/themes/joinup/src/scss/oe-bcl-joinup.scss
index 23e37be07..e14bd60af 100644
--- a/src/themes/joinup/src/scss/oe-bcl-joinup.scss
+++ b/src/themes/joinup/src/scss/oe-bcl-joinup.scss
@@ -81,6 +81,7 @@
 @import "@openeuropa/bcl-theme-default/src/scss/spinners";
 @import "@openeuropa/bcl-theme-default/src/scss/badge";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect";
+@import "@openeuropa/bcl-theme-default/src/scss/mega-menu";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect-2";
 @import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
diff --git a/src/themes/ucpkn/src/js/index.esm.js b/src/themes/ucpkn/src/js/index.esm.js
index 6c9b74370..bff882b33 100644
--- a/src/themes/ucpkn/src/js/index.esm.js
+++ b/src/themes/ucpkn/src/js/index.esm.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import MegaMenu from "@openeuropa/bcl-theme-default/src/js/mega-menu/mega-menu";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
@@ -31,6 +32,7 @@ export {
   Gallery,
   Modal,
   AccessibleToggle,
+  MegaMenu,
   AccordionToggle,
   Offcanvas,
   Popover,
diff --git a/src/themes/ucpkn/src/js/index.umd.js b/src/themes/ucpkn/src/js/index.umd.js
index 50096558f..cc02e6b58 100644
--- a/src/themes/ucpkn/src/js/index.umd.js
+++ b/src/themes/ucpkn/src/js/index.umd.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import MegaMenu from "@openeuropa/bcl-theme-default/src/js/mega-menu/mega-menu";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
@@ -31,6 +32,7 @@ export default {
   Gallery,
   Modal,
   AccessibleToggle,
+  MegaMenu,
   AccordionToggle,
   Offcanvas,
   Popover,
diff --git a/src/themes/ucpkn/src/scss/oe-bcl-ucpkn.scss b/src/themes/ucpkn/src/scss/oe-bcl-ucpkn.scss
index b513e2745..eb00e4d24 100644
--- a/src/themes/ucpkn/src/scss/oe-bcl-ucpkn.scss
+++ b/src/themes/ucpkn/src/scss/oe-bcl-ucpkn.scss
@@ -74,6 +74,7 @@
 @import "@openeuropa/bcl-theme-default/src/scss/spinners";
 @import "@openeuropa/bcl-theme-default/src/scss/badge";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect";
+@import "@openeuropa/bcl-theme-default/src/scss/mega-menu";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect-2";
 @import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
diff --git a/yarn.lock b/yarn.lock
index d9275bd49..de885750b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3068,7 +3068,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@openeuropa/bcl-button@npm:^1.10.0, @openeuropa/bcl-button@workspace:src/components/bcl-button":
+"@openeuropa/bcl-button@npm:^1.10.0, @openeuropa/bcl-button@npm:^1.8.2, @openeuropa/bcl-button@workspace:src/components/bcl-button":
   version: 0.0.0-use.local
   resolution: "@openeuropa/bcl-button@workspace:src/components/bcl-button"
   dependencies:
@@ -3339,7 +3339,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@openeuropa/bcl-dropdown@npm:^1.10.0, @openeuropa/bcl-dropdown@workspace:src/components/bcl-dropdown":
+"@openeuropa/bcl-dropdown@npm:^1.10.0, @openeuropa/bcl-dropdown@npm:^1.8.2, @openeuropa/bcl-dropdown@workspace:src/components/bcl-dropdown":
   version: 0.0.0-use.local
   resolution: "@openeuropa/bcl-dropdown@workspace:src/components/bcl-dropdown"
   dependencies:
@@ -3457,6 +3457,7 @@ __metadata:
   dependencies:
     "@openeuropa/bcl-breadcrumb": "npm:^1.10.0"
     "@openeuropa/bcl-language-list": "npm:^1.10.0"
+    "@openeuropa/bcl-mega-menu": "npm:^1.10.0"
     "@openeuropa/bcl-modal": "npm:^1.10.0"
     "@openeuropa/bcl-navbar": "npm:^1.10.0"
   languageName: unknown
@@ -3521,7 +3522,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@openeuropa/bcl-link@npm:^1.10.0, @openeuropa/bcl-link@workspace:src/components/bcl-link":
+"@openeuropa/bcl-link@npm:^1.10.0, @openeuropa/bcl-link@npm:^1.8.2, @openeuropa/bcl-link@workspace:src/components/bcl-link":
   version: 0.0.0-use.local
   resolution: "@openeuropa/bcl-link@workspace:src/components/bcl-link"
   dependencies:
@@ -3558,6 +3559,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@openeuropa/bcl-mega-menu@npm:^1.10.0, @openeuropa/bcl-mega-menu@workspace:src/compositions/bcl-mega-menu":
+  version: 0.0.0-use.local
+  resolution: "@openeuropa/bcl-mega-menu@workspace:src/compositions/bcl-mega-menu"
+  dependencies:
+    "@openeuropa/bcl-button": "npm:^1.8.2"
+    "@openeuropa/bcl-dropdown": "npm:^1.8.2"
+    "@openeuropa/bcl-link": "npm:^1.8.2"
+  languageName: unknown
+  linkType: soft
+
 "@openeuropa/bcl-modal@npm:^1.10.0, @openeuropa/bcl-modal@workspace:src/components/bcl-modal":
   version: 0.0.0-use.local
   resolution: "@openeuropa/bcl-modal@workspace:src/components/bcl-modal"
@@ -3575,6 +3586,7 @@ __metadata:
   resolution: "@openeuropa/bcl-navbar@workspace:src/components/bcl-navbar"
   dependencies:
     "@openeuropa/bcl-form": "npm:^1.10.0"
+    "@openeuropa/bcl-mega-menu": "npm:^1.10.0"
     "@openeuropa/bcl-navigation": "npm:^1.10.0"
   languageName: unknown
   linkType: soft