From 99e630748afb248acf70d6fc8d56467d964506a6 Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Fri, 14 Feb 2025 03:27:43 +0200
Subject: [PATCH 1/9] ERATRANS-1057: Mega menu.

---
 .../__snapshots__/navbar.test.js.snap         | 700 ++++++++++++++++++
 .../bcl-navigation/navigation.html.twig       |   2 +
 .../__snapshots__/contact-form.test.js.snap   | 525 +++++++++++++
 .../__snapshots__/event.test.js.snap          | 350 +++++++++
 .../__snapshots__/glossary.test.js.snap       | 350 +++++++++
 .../__snapshots__/group.test.js.snap          | 700 ++++++++++++++++++
 .../__snapshots__/header.test.js.snap         | 525 +++++++++++++
 .../__snapshots__/landing-page.test.js.snap   | 175 +++++
 src/compositions/bcl-mega-menu/.npmignore     |   2 +
 .../__snapshots__/mega-menu.test.js.snap      | 177 +++++
 src/compositions/bcl-mega-menu/data.js        |  72 ++
 .../bcl-mega-menu/mega-menu.html.twig         |  97 +++
 .../bcl-mega-menu/mega-menu.story.js          |  12 +
 .../bcl-mega-menu/mega-menu.test.js           |  25 +
 src/compositions/bcl-mega-menu/package.json   |  29 +
 .../bcl-news/__snapshots__/news.test.js.snap  | 350 +++++++++
 .../bcl-page/__snapshots__/page.test.js.snap  | 175 +++++
 .../__snapshots__/person.test.js.snap         | 350 +++++++++
 .../__snapshots__/procurement.test.js.snap    | 525 +++++++++++++
 .../__snapshots__/project.test.js.snap        | 700 ++++++++++++++++++
 .../__snapshots__/publication.test.js.snap    | 525 +++++++++++++
 .../__snapshots__/subscription.test.js.snap   | 175 +++++
 .../bcl-user/__snapshots__/user.test.js.snap  | 525 +++++++++++++
 .../__snapshots__/vacancy.test.js.snap        | 525 +++++++++++++
 src/data/header/data--navbar.js               |  75 ++
 src/data/navbar/data.js                       |  75 ++
 src/themes/default/src/scss/_mega-menu.scss   | 106 +++
 .../default/src/scss/oe-bcl-default.scss      |   1 +
 src/themes/joinup/src/scss/oe-bcl-joinup.scss |   1 +
 src/themes/ucpkn/src/scss/oe-bcl-ucpkn.scss   |   1 +
 30 files changed, 7850 insertions(+)
 create mode 100644 src/compositions/bcl-mega-menu/.npmignore
 create mode 100644 src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
 create mode 100644 src/compositions/bcl-mega-menu/data.js
 create mode 100644 src/compositions/bcl-mega-menu/mega-menu.html.twig
 create mode 100644 src/compositions/bcl-mega-menu/mega-menu.story.js
 create mode 100644 src/compositions/bcl-mega-menu/mega-menu.test.js
 create mode 100644 src/compositions/bcl-mega-menu/package.json
 create mode 100644 src/themes/default/src/scss/_mega-menu.scss

diff --git a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
index a9d33e7c2..96e9d810a 100644
--- a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
+++ b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
@@ -38,6 +38,181 @@ 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"
+            >
+              <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 mega menu
+              </a>
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="mega-menu-container dropdown-menu border-bottom"
+              >
+                <div
+                  class="row"
+                >
+                  <div
+                    class="col-4"
+                  >
+                    <div
+                      class="content-block py-3"
+                    >
+                      <h4>
+                        Mega Menu Content Title
+                      </h4>
+                      <p>
+                        Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      </p>
+                    </div>
+                  </div>
+                  <div
+                    class="col-8"
+                  >
+                    <div
+                      class="navigation-items"
+                    >
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="outside"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-inner-megamenu"
+                          role="button"
+                        >
+                          A link with dropdown
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-inner-megamenu"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              I'm a link
+                            </a>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a button
+                            </button>
+                          </li>
+                        </ul>
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="outside"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-inner-megamenu-2"
+                          role="button"
+                        >
+                          A link with dropdown and column
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-inner-megamenu-2"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              I'm a link
+                            </a>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a button
+                            </button>
+                          </li>
+                          <li>
+                            <button
+                              aria-disabled="true"
+                              class="dropdown-item"
+                              disabled="true"
+                              type="button"
+                            >
+                              I'm a disabled button
+                            </button>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a active button
+                            </button>
+                          </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"
+                      >
+                        A simple link!
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
           <li
             class="nav-item"
           >
@@ -198,6 +373,181 @@ 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"
+            >
+              <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 mega menu
+              </a>
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="mega-menu-container dropdown-menu border-bottom"
+              >
+                <div
+                  class="row"
+                >
+                  <div
+                    class="col-4"
+                  >
+                    <div
+                      class="content-block py-3"
+                    >
+                      <h4>
+                        Mega Menu Content Title
+                      </h4>
+                      <p>
+                        Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      </p>
+                    </div>
+                  </div>
+                  <div
+                    class="col-8"
+                  >
+                    <div
+                      class="navigation-items"
+                    >
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="outside"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-inner-megamenu"
+                          role="button"
+                        >
+                          A link with dropdown
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-inner-megamenu"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              I'm a link
+                            </a>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a button
+                            </button>
+                          </li>
+                        </ul>
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="outside"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-inner-megamenu-2"
+                          role="button"
+                        >
+                          A link with dropdown and column
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-inner-megamenu-2"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              I'm a link
+                            </a>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a button
+                            </button>
+                          </li>
+                          <li>
+                            <button
+                              aria-disabled="true"
+                              class="dropdown-item"
+                              disabled="true"
+                              type="button"
+                            >
+                              I'm a disabled button
+                            </button>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a active button
+                            </button>
+                          </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"
+                      >
+                        A simple link!
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
           <li
             class="nav-item"
           >
@@ -341,6 +691,181 @@ 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"
+          >
+            <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 mega menu
+            </a>
+            <div
+              aria-labelledby="dropdown-megamenu"
+              class="mega-menu-container dropdown-menu border-bottom"
+            >
+              <div
+                class="row"
+              >
+                <div
+                  class="col-4"
+                >
+                  <div
+                    class="content-block py-3"
+                  >
+                    <h4>
+                      Mega Menu Content Title
+                    </h4>
+                    <p>
+                      Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="col-8"
+                >
+                  <div
+                    class="navigation-items"
+                  >
+                    <div
+                      class="dropdown dropend"
+                    >
+                      <a
+                        aria-expanded="false"
+                        class="dropdown-toggle"
+                        data-bs-auto-close="outside"
+                        data-bs-toggle="dropdown"
+                        href="/example.html"
+                        id="dropdown-inner-megamenu"
+                        role="button"
+                      >
+                        A link with dropdown
+                      </a>
+                      <ul
+                        aria-labelledby="dropdown-inner-megamenu"
+                        class="dropdown-menu"
+                      >
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            I'm a link
+                          </a>
+                        </li>
+                        <li>
+                          <button
+                            class="dropdown-item"
+                            type="button"
+                          >
+                            I'm a button
+                          </button>
+                        </li>
+                      </ul>
+                    </div>
+                    <a
+                      href="/example.html"
+                    >
+                      A simple link!
+                    </a>
+                    <div
+                      class="dropdown dropend"
+                    >
+                      <a
+                        aria-expanded="false"
+                        class="dropdown-toggle"
+                        data-bs-auto-close="outside"
+                        data-bs-toggle="dropdown"
+                        href="/example.html"
+                        id="dropdown-inner-megamenu-2"
+                        role="button"
+                      >
+                        A link with dropdown and column
+                      </a>
+                      <ul
+                        aria-labelledby="dropdown-inner-megamenu-2"
+                        class="dropdown-menu"
+                      >
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            I'm a link
+                          </a>
+                        </li>
+                        <li>
+                          <button
+                            class="dropdown-item"
+                            type="button"
+                          >
+                            I'm a button
+                          </button>
+                        </li>
+                        <li>
+                          <button
+                            aria-disabled="true"
+                            class="dropdown-item"
+                            disabled="true"
+                            type="button"
+                          >
+                            I'm a disabled button
+                          </button>
+                        </li>
+                        <li>
+                          <button
+                            class="dropdown-item"
+                            type="button"
+                          >
+                            I'm a active button
+                          </button>
+                        </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"
+                    >
+                      A simple link!
+                    </a>
+                    <a
+                      href="/example.html"
+                    >
+                      A simple link!
+                    </a>
+                    <a
+                      href="/example.html"
+                    >
+                      A simple link!
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
         <li
           class="nav-item"
         >
@@ -500,6 +1025,181 @@ 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"
+            >
+              <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 mega menu
+              </a>
+              <div
+                aria-labelledby="dropdown-megamenu"
+                class="mega-menu-container dropdown-menu border-bottom"
+              >
+                <div
+                  class="row"
+                >
+                  <div
+                    class="col-4"
+                  >
+                    <div
+                      class="content-block py-3"
+                    >
+                      <h4>
+                        Mega Menu Content Title
+                      </h4>
+                      <p>
+                        Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      </p>
+                    </div>
+                  </div>
+                  <div
+                    class="col-8"
+                  >
+                    <div
+                      class="navigation-items"
+                    >
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="outside"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-inner-megamenu"
+                          role="button"
+                        >
+                          A link with dropdown
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-inner-megamenu"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              I'm a link
+                            </a>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a button
+                            </button>
+                          </li>
+                        </ul>
+                      </div>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                      <div
+                        class="dropdown dropend"
+                      >
+                        <a
+                          aria-expanded="false"
+                          class="dropdown-toggle"
+                          data-bs-auto-close="outside"
+                          data-bs-toggle="dropdown"
+                          href="/example.html"
+                          id="dropdown-inner-megamenu-2"
+                          role="button"
+                        >
+                          A link with dropdown and column
+                        </a>
+                        <ul
+                          aria-labelledby="dropdown-inner-megamenu-2"
+                          class="dropdown-menu"
+                        >
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              I'm a link
+                            </a>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a button
+                            </button>
+                          </li>
+                          <li>
+                            <button
+                              aria-disabled="true"
+                              class="dropdown-item"
+                              disabled="true"
+                              type="button"
+                            >
+                              I'm a disabled button
+                            </button>
+                          </li>
+                          <li>
+                            <button
+                              class="dropdown-item"
+                              type="button"
+                            >
+                              I'm a active button
+                            </button>
+                          </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"
+                      >
+                        A simple link!
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                      <a
+                        href="/example.html"
+                      >
+                        A simple link!
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
           <li
             class="nav-item"
           >
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..de782626e 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,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1372,6 +1547,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -2593,6 +2943,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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 4146203fe..44cfcb0f0 100644
--- a/src/compositions/bcl-event/__snapshots__/event.test.js.snap
+++ b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -2103,6 +2278,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..8b88c5131 100644
--- a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
+++ b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1588,6 +1763,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..d5bce8848 100644
--- a/src/compositions/bcl-group/__snapshots__/group.test.js.snap
+++ b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -2041,6 +2216,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3925,6 +4275,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -5656,6 +6181,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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 17503eda4..b03333b88 100644
--- a/src/compositions/bcl-header/__snapshots__/header.test.js.snap
+++ b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
@@ -169,6 +169,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -944,6 +1119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1713,6 +2063,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
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..2461be504 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,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..4f31ecfc6
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OE - Mega Menu renders correctly 1`] = `
+<jest>
+  <div
+    aria-labelledby="dropdown-megamenu"
+    class="bcl-mega-menu"
+  >
+    <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 border-bottom"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-4"
+        >
+          <div
+            class="content-block py-3"
+          >
+            <h4>
+              Mega Menu Content Title
+            </h4>
+            <p>
+              Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>
+          </div>
+        </div>
+        <div
+          class="col-8"
+        >
+          <div
+            class="navigation-items"
+          >
+            <div
+              class="dropdown dropend"
+            >
+              <a
+                aria-expanded="false"
+                class="dropdown-toggle"
+                data-bs-auto-close="outside"
+                data-bs-toggle="dropdown"
+                href="/example.html"
+                id="dropdown-megamenu-inner"
+                role="button"
+              >
+                A link with dropdown
+              </a>
+              <ul
+                aria-labelledby="dropdown-megamenu-inner"
+                class="dropdown-menu"
+              >
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
+                <li>
+                  <button
+                    class="dropdown-item"
+                    type="button"
+                  >
+                    I'm a button
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <a
+              href="/example.html"
+            >
+              A simple link!
+            </a>
+            <div
+              class="dropdown dropend"
+            >
+              <a
+                aria-expanded="false"
+                class="dropdown-toggle"
+                data-bs-auto-close="outside"
+                data-bs-toggle="dropdown"
+                href="/example.html"
+                id="dropdown-megamenu-inner-2"
+                role="button"
+              >
+                A link with dropdown and column
+              </a>
+              <ul
+                aria-labelledby="dropdown-megamenu-inner-2"
+                class="dropdown-menu"
+              >
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
+                <li>
+                  <button
+                    class="dropdown-item"
+                    type="button"
+                  >
+                    I'm a button
+                  </button>
+                </li>
+                <li>
+                  <button
+                    aria-disabled="true"
+                    class="dropdown-item"
+                    disabled="true"
+                    type="button"
+                  >
+                    I'm a disabled button
+                  </button>
+                </li>
+                <li>
+                  <button
+                    class="dropdown-item"
+                    type="button"
+                  >
+                    I'm a active button
+                  </button>
+                </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"
+            >
+              A simple link!
+            </a>
+            <a
+              href="/example.html"
+            >
+              A simple link!
+            </a>
+            <a
+              href="/example.html"
+            >
+              A simple link!
+            </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..89136b603
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/data.js
@@ -0,0 +1,72 @@
+module.exports = {
+  trigger: {
+    label: "A link with dropdown",
+    path: "/example.html",
+  },
+  id: "dropdown-megamenu",
+  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: "A link with dropdown",
+        path: "/example.html",
+      },
+      items: [
+        {
+          label: "I'm a link",
+          path: "/example.html",
+        },
+        {
+          label: "I'm a button",
+          button: true,
+        },
+      ],
+    },
+    {
+      label: "A simple link!",
+      path: "/example.html",
+    },
+    {
+      id: "dropdown-megamenu-inner-2",
+      trigger: {
+        label: "A link with dropdown and column",
+        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: "I'm a link",
+          path: "/example.html",
+        },
+        {
+          label: "I'm a button",
+          button: true,
+        },
+        {
+          label: "I'm a disabled button",
+          button: true,
+          disabled: true,
+        },
+        {
+          label: "I'm a active button",
+          button: true,
+        },
+      ],
+    },
+    {
+      label: "A simple link!",
+      path: "/example.html",
+    },
+    {
+      label: "A simple link!",
+      path: "/example.html",
+    },
+    {
+      label: "A simple link!",
+      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..4fd2f8920
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/mega-menu.html.twig
@@ -0,0 +1,97 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: dropdown-random(1000))
+  - trigger (link or button)
+  - content_block (block) (default: '')
+  - items (object[])
+    format: [
+      {
+        - link or dropdown
+          ! dropdown extra property:
+            collapse (render) - to showcase on the last column 
+      }
+    ]
+#}
+
+{% set _id = id|default('dropdown-' ~ random(1000)) %}
+{% set _link = link ?? false %}
+{% set _trigger = trigger|default({}) %}
+{% set _content_block = content_block|default('') %}
+{% set _items = items|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 }}>
+  {% 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 border-bottom" aria-labelledby="{{ _id }}">
+    <div class="row">
+      {% if content_block is defined %}
+      <div class="col-4">
+        <div class="content-block py-3">
+          {%- block content_block -%}
+            {{ _content_block }}
+          {%- endblock -%}
+        </div>
+      </div>
+      {% endif %}
+      <div class="col-8">
+        <div class="navigation-items">
+          {% for _item in _items %}
+            {% if _item.items is defined %}
+              {% 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({
+                  attributes: _trigger_attributes.setAttribute('data-bs-auto-close', 'outside')
+                })
+              }) only %}
+              {% if _item.collapse is defined %}
+                <div class="collapse">
+                  {{ _item.collapse }}
+                </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..bcb88cbab
--- /dev/null
+++ b/src/compositions/bcl-mega-menu/mega-menu.story.js
@@ -0,0 +1,12 @@
+import { withDesign } from "storybook-addon-designs";
+import withCode from "@openeuropa/storybook-addon-code";
+
+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",
+  decorators: [withCode, withDesign],
+};
+
+export const Default = () => megaMenu(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..79a4d4bab
--- /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..641f892e6
--- /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.8.2",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "OE - BCL mega menu",
+  "dependencies": {
+    "@openeuropa/bcl-link": "^1.8.2",
+    "@openeuropa/bcl-button": "^1.8.2",
+    "@openeuropa/bcl-dropdown": "^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..85e06d865 100644
--- a/src/compositions/bcl-news/__snapshots__/news.test.js.snap
+++ b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1290,6 +1465,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..071314bde 100644
--- a/src/compositions/bcl-page/__snapshots__/page.test.js.snap
+++ b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..fb516a899 100644
--- a/src/compositions/bcl-person/__snapshots__/person.test.js.snap
+++ b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1421,6 +1596,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..22a10a2b0 100644
--- a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
+++ b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1833,6 +2008,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3546,6 +3896,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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 1c551f547..fd66e56f0 100644
--- a/src/compositions/bcl-project/__snapshots__/project.test.js.snap
+++ b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
@@ -1978,6 +1978,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3780,6 +3955,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -6827,6 +7177,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -9874,6 +10399,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..8b6bda4fd 100644
--- a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
+++ b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1640,6 +1815,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3170,6 +3520,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..073c4a112 100644
--- a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
+++ b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..eaebbb044 100644
--- a/src/compositions/bcl-user/__snapshots__/user.test.js.snap
+++ b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
@@ -161,6 +161,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -1764,6 +1939,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -3934,6 +4284,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..f469a4606 100644
--- a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
+++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
@@ -119,6 +119,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -2138,6 +2313,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
             <li
               class="nav-item"
             >
@@ -4156,6 +4506,181 @@ 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"
+              >
+                <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 mega menu
+                </a>
+                <div
+                  aria-labelledby="dropdown-megamenu"
+                  class="mega-menu-container dropdown-menu border-bottom"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="col-4"
+                    >
+                      <div
+                        class="content-block py-3"
+                      >
+                        <h4>
+                          Mega Menu Content Title
+                        </h4>
+                        <p>
+                          Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="col-8"
+                    >
+                      <div
+                        class="navigation-items"
+                      >
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu"
+                            role="button"
+                          >
+                            A link with dropdown
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <div
+                          class="dropdown dropend"
+                        >
+                          <a
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-bs-auto-close="outside"
+                            data-bs-toggle="dropdown"
+                            href="/example.html"
+                            id="dropdown-inner-megamenu-2"
+                            role="button"
+                          >
+                            A link with dropdown and column
+                          </a>
+                          <ul
+                            aria-labelledby="dropdown-inner-megamenu-2"
+                            class="dropdown-menu"
+                          >
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                I'm a link
+                              </a>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-disabled="true"
+                                class="dropdown-item"
+                                disabled="true"
+                                type="button"
+                              >
+                                I'm a disabled button
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                class="dropdown-item"
+                                type="button"
+                              >
+                                I'm a active button
+                              </button>
+                            </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"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </a>
+                        <a
+                          href="/example.html"
+                        >
+                          A simple link!
+                        </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..bd428bacb 100644
--- a/src/data/header/data--navbar.js
+++ b/src/data/header/data--navbar.js
@@ -44,6 +44,81 @@ module.exports = {
     navbar: true,
     attributes: new drupalAttribute().addClass("me-auto"),
     items: [
+      {
+        mega_menu: true,
+        link: true,
+        id: "dropdown-megamenu",
+        trigger: {
+          label: "A link with mega menu",
+          path: "/example.html",
+          attributes: new drupalAttribute().addClass("nav-link"),
+        },
+        content_block:
+          "<h4>Mega Menu Content Title</h4><p>Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+        items: [
+          {
+            id: "dropdown-inner-megamenu",
+            trigger: {
+              label: "A link with dropdown",
+              path: "/example.html",
+            },
+            items: [
+              {
+                label: "I'm a link",
+                path: "/example.html",
+              },
+              {
+                label: "I'm a button",
+                button: true,
+              },
+            ],
+          },
+          {
+            label: "A simple link!",
+            path: "/example.html",
+          },
+          {
+            id: "dropdown-inner-megamenu-2",
+            trigger: {
+              label: "A link with dropdown and column",
+              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: "I'm a link",
+                path: "/example.html",
+              },
+              {
+                label: "I'm a button",
+                button: true,
+              },
+              {
+                label: "I'm a disabled button",
+                button: true,
+                disabled: true,
+              },
+              {
+                label: "I'm a active button",
+                button: true,
+              },
+            ],
+          },
+          {
+            label: "A simple link!",
+            path: "/example.html",
+          },
+          {
+            label: "A simple link!",
+            path: "/example.html",
+          },
+          {
+            label: "A simple link!",
+            path: "/example.html",
+          },
+        ],
+      },
       {
         label: "Home",
         path: "/example.html",
diff --git a/src/data/navbar/data.js b/src/data/navbar/data.js
index 54af4e972..57f1c98f9 100644
--- a/src/data/navbar/data.js
+++ b/src/data/navbar/data.js
@@ -10,6 +10,81 @@ module.exports = {
     navbar: true,
     attributes: new drupalAttribute().addClass("me-auto"),
     items: [
+      {
+        mega_menu: true,
+        link: true,
+        id: "dropdown-megamenu",
+        trigger: {
+          label: "A link with mega menu",
+          path: "/example.html",
+          attributes: new drupalAttribute().addClass("nav-link"),
+        },
+        content_block:
+          "<h4>Mega Menu Content Title</h4><p>Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+        items: [
+          {
+            id: "dropdown-inner-megamenu",
+            trigger: {
+              label: "A link with dropdown",
+              path: "/example.html",
+            },
+            items: [
+              {
+                label: "I'm a link",
+                path: "/example.html",
+              },
+              {
+                label: "I'm a button",
+                button: true,
+              },
+            ],
+          },
+          {
+            label: "A simple link!",
+            path: "/example.html",
+          },
+          {
+            id: "dropdown-inner-megamenu-2",
+            trigger: {
+              label: "A link with dropdown and column",
+              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: "I'm a link",
+                path: "/example.html",
+              },
+              {
+                label: "I'm a button",
+                button: true,
+              },
+              {
+                label: "I'm a disabled button",
+                button: true,
+                disabled: true,
+              },
+              {
+                label: "I'm a active button",
+                button: true,
+              },
+            ],
+          },
+          {
+            label: "A simple link!",
+            path: "/example.html",
+          },
+          {
+            label: "A simple link!",
+            path: "/example.html",
+          },
+          {
+            label: "A simple link!",
+            path: "/example.html",
+          },
+        ],
+      },
       {
         label: "I'm a link",
         path: "#first",
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..bae495999
--- /dev/null
+++ b/src/themes/default/src/scss/_mega-menu.scss
@@ -0,0 +1,106 @@
+/* stylelint-disable no-descending-specificity, declaration-no-important */
+
+.bcl-mega-menu {
+  &.nav-link {
+    padding: 0;
+  }
+  > .show + .mega-menu-container.dropdown-menu {
+    display: flex;
+  }
+  .mega-menu-container.dropdown-menu {
+    background: $lighter;
+    position: absolute;
+    min-height: 300px;
+    display: none;
+    width: 100%;
+    padding: 0 map-get($spacers, 3);
+    border-radius: 0;
+    margin-top: 8px;
+    > .row {
+      flex: 1;
+    }
+    .content-block {
+      position: relative;
+      height: 100%;
+      background: $white;
+      padding-left: map-get($spacers, 3);
+      margin-left: -16px;
+      &:after {
+        bottom: 0;
+        box-shadow: 4px 0 10px 0 rgba(224, 229, 245, 0.5);
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 10px;
+      }
+    }
+    .navigation-items {
+      padding: map-get($spacers, 3) 0;
+      width: 33%;
+      position: relative;
+      height: 100%;
+      > a,
+      > .dropdown {
+        padding: map-get($spacers, 1) map-get($spacers, "2-5");
+        border-left: 4px solid transparent;
+        display: block;
+        &.active {
+          border-left-color: $primary;
+        }
+        &:hover {
+          background: $white;
+          border-left-color: $primary;
+        }
+      }
+      a {
+        text-decoration: none;
+      }
+      .dropdown {
+        position: static;
+        .dropdown-menu {
+          transform: none !important;
+          right: auto !important;
+          left: 100% !important;
+          width: 100%;
+          border-radius: 0;
+          border-color: var(--bs-border-color);
+          border-top: none;
+          border-bottom: none;
+          height: 100%;
+        }
+        &:has(.show) {
+          background: $white;
+          border-left-color: $primary;
+          & + .collapse {
+            display: block;
+          }
+        }
+        .dropdown-toggle {
+          white-space: normal;
+          display: block;
+          position: relative;
+          &:after {
+            top: 50%;
+            transform: translateY(-50%);
+            position: absolute;
+            right: 0;
+          }
+        }
+      }
+      .collapse {
+        position: absolute;
+        right: auto;
+        left: 200%;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        padding: 16px;
+        img {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/themes/default/src/scss/oe-bcl-default.scss b/src/themes/default/src/scss/oe-bcl-default.scss
index 344bc74c9..c9134e724 100644
--- a/src/themes/default/src/scss/oe-bcl-default.scss
+++ b/src/themes/default/src/scss/oe-bcl-default.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/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
 @import "@openeuropa/bcl-theme-default/src/scss/timeline";
diff --git a/src/themes/joinup/src/scss/oe-bcl-joinup.scss b/src/themes/joinup/src/scss/oe-bcl-joinup.scss
index 3265497bc..3c85f5a82 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/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
 @import "@openeuropa/bcl-theme-default/src/scss/timeline";
diff --git a/src/themes/ucpkn/src/scss/oe-bcl-ucpkn.scss b/src/themes/ucpkn/src/scss/oe-bcl-ucpkn.scss
index b00b53ee6..bdaeeeaa7 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/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
 @import "@openeuropa/bcl-theme-default/src/scss/timeline";

From 3af879a5f65e91b572062faf89e6cf1823d49d24 Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Fri, 14 Feb 2025 03:44:48 +0200
Subject: [PATCH 2/9] ERATRANS-1057: Dependencies.

---
 src/components/bcl-navbar/package.json   | 1 +
 src/compositions/bcl-header/package.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/bcl-navbar/package.json b/src/components/bcl-navbar/package.json
index 4229832c5..b9a1e4644 100644
--- a/src/components/bcl-navbar/package.json
+++ b/src/components/bcl-navbar/package.json
@@ -5,6 +5,7 @@
   "version": "1.8.2",
   "dependencies": {
     "@openeuropa/bcl-form": "^1.8.2",
+    "@openeuropa/bcl-mega-menu": "^1.8.2",
     "@openeuropa/bcl-navigation": "^1.8.2"
   },
   "publishConfig": {
diff --git a/src/compositions/bcl-header/package.json b/src/compositions/bcl-header/package.json
index f17657872..3846072dd 100644
--- a/src/compositions/bcl-header/package.json
+++ b/src/compositions/bcl-header/package.json
@@ -11,6 +11,7 @@
     "@openeuropa/bcl-breadcrumb": "^1.8.2",
     "@openeuropa/bcl-language-list": "^1.8.2",
     "@openeuropa/bcl-modal": "^1.8.2",
+    "@openeuropa/bcl-mega-menu": "^1.8.2",
     "@openeuropa/bcl-navbar": "^1.8.2"
   },
   "repository": {

From 0510d6666d2ebdb109a18dd4dfa17a77698ee16c Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Sun, 16 Feb 2025 23:34:33 +0200
Subject: [PATCH 3/9] ERATRANS-1057: Responsive.

---
 .../__snapshots__/navbar.test.js.snap         | 84 +++++++++++++---
 .../__snapshots__/contact-form.test.js.snap   | 63 +++++++++---
 .../__snapshots__/event.test.js.snap          | 42 ++++++--
 .../__snapshots__/glossary.test.js.snap       | 42 ++++++--
 .../__snapshots__/group.test.js.snap          | 84 +++++++++++++---
 .../__snapshots__/header.test.js.snap         | 63 +++++++++---
 .../__snapshots__/landing-page.test.js.snap   | 21 +++-
 .../__snapshots__/mega-menu.test.js.snap      | 77 ++++++++++++++-
 src/compositions/bcl-mega-menu/data.js        | 28 ++++++
 .../bcl-mega-menu/mega-menu.html.twig         | 22 ++++-
 .../bcl-mega-menu/mega-menu.story.js          |  9 +-
 .../bcl-news/__snapshots__/news.test.js.snap  | 42 ++++++--
 .../bcl-page/__snapshots__/page.test.js.snap  | 21 +++-
 .../__snapshots__/person.test.js.snap         | 42 ++++++--
 .../__snapshots__/procurement.test.js.snap    | 63 +++++++++---
 .../__snapshots__/project.test.js.snap        | 84 +++++++++++++---
 .../__snapshots__/publication.test.js.snap    | 63 +++++++++---
 .../__snapshots__/subscription.test.js.snap   | 21 +++-
 .../bcl-user/__snapshots__/user.test.js.snap  | 63 +++++++++---
 .../__snapshots__/vacancy.test.js.snap        | 63 +++++++++---
 src/data/header/data--navbar.js               |  1 +
 src/themes/default/src/scss/_mega-menu.scss   | 98 +++++++++++++++----
 22 files changed, 904 insertions(+), 192 deletions(-)

diff --git a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
index 96e9d810a..c8eab9b2f 100644
--- a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
+++ b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
@@ -58,13 +58,26 @@ exports[`OE - navbar dark renders correctly 1`] = `
               </a>
               <div
                 aria-labelledby="dropdown-megamenu"
-                class="mega-menu-container dropdown-menu border-bottom"
+                class="mega-menu-container dropdown-menu"
               >
+                <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
-                  class="row"
+                  class="row position-relative"
                 >
                   <div
-                    class="col-4"
+                    class="col-12 col-lg-4"
                   >
                     <div
                       class="content-block py-3"
@@ -78,7 +91,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
                     </div>
                   </div>
                   <div
-                    class="col-8"
+                    class="col-12 col-lg-8"
                   >
                     <div
                       class="navigation-items"
@@ -393,13 +406,26 @@ exports[`OE - navbar light renders correctly 1`] = `
               </a>
               <div
                 aria-labelledby="dropdown-megamenu"
-                class="mega-menu-container dropdown-menu border-bottom"
+                class="mega-menu-container dropdown-menu"
               >
+                <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
-                  class="row"
+                  class="row position-relative"
                 >
                   <div
-                    class="col-4"
+                    class="col-12 col-lg-4"
                   >
                     <div
                       class="content-block py-3"
@@ -413,7 +439,7 @@ exports[`OE - navbar light renders correctly 1`] = `
                     </div>
                   </div>
                   <div
-                    class="col-8"
+                    class="col-12 col-lg-8"
                   >
                     <div
                       class="navigation-items"
@@ -711,13 +737,26 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
             </a>
             <div
               aria-labelledby="dropdown-megamenu"
-              class="mega-menu-container dropdown-menu border-bottom"
+              class="mega-menu-container dropdown-menu"
             >
+              <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
-                class="row"
+                class="row position-relative"
               >
                 <div
-                  class="col-4"
+                  class="col-12 col-lg-4"
                 >
                   <div
                     class="content-block py-3"
@@ -731,7 +770,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                   </div>
                 </div>
                 <div
-                  class="col-8"
+                  class="col-12 col-lg-8"
                 >
                   <div
                     class="navigation-items"
@@ -1045,13 +1084,26 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
               </a>
               <div
                 aria-labelledby="dropdown-megamenu"
-                class="mega-menu-container dropdown-menu border-bottom"
+                class="mega-menu-container dropdown-menu"
               >
+                <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
-                  class="row"
+                  class="row position-relative"
                 >
                   <div
-                    class="col-4"
+                    class="col-12 col-lg-4"
                   >
                     <div
                       class="content-block py-3"
@@ -1065,7 +1117,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                     </div>
                   </div>
                   <div
-                    class="col-8"
+                    class="col-12 col-lg-8"
                   >
                     <div
                       class="navigation-items"
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 de782626e..3d2693960 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
@@ -139,13 +139,26 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -1567,13 +1580,26 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -1587,7 +1613,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -2963,13 +2989,26 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -2983,7 +3022,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-event/__snapshots__/event.test.js.snap b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
index 44cfcb0f0..7cc407a4f 100644
--- a/src/compositions/bcl-event/__snapshots__/event.test.js.snap
+++ b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - event listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - event listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -2298,13 +2311,26 @@ exports[`OE - event page renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -2318,7 +2344,7 @@ exports[`OE - event page renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
index 8b88c5131..ef30a70e9 100644
--- a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
+++ b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -1783,13 +1796,26 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -1803,7 +1829,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-group/__snapshots__/group.test.js.snap b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
index d5bce8848..cc9befd36 100644
--- a/src/compositions/bcl-group/__snapshots__/group.test.js.snap
+++ b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - Group landing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Group landing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -2236,13 +2249,26 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -2256,7 +2282,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -4295,13 +4321,26 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -4315,7 +4354,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -6201,13 +6240,26 @@ exports[`OE - Group listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -6221,7 +6273,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-header/__snapshots__/header.test.js.snap b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
index b03333b88..a5439e9a1 100644
--- a/src/compositions/bcl-header/__snapshots__/header.test.js.snap
+++ b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
@@ -189,13 +189,26 @@ exports[`OE - Header EC renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -209,7 +222,7 @@ exports[`OE - Header EC renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -1139,13 +1152,26 @@ exports[`OE - Header EU renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -1159,7 +1185,7 @@ exports[`OE - Header EU renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -2083,13 +2109,26 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -2103,7 +2142,7 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
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 2461be504..4181acbb7 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
@@ -139,13 +139,26 @@ exports[`OE - Landing page renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Landing page renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
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
index 4f31ecfc6..93c6a4010 100644
--- a/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
+++ b/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
@@ -19,13 +19,26 @@ exports[`OE - Mega Menu renders correctly 1`] = `
     </button>
     <div
       aria-labelledby="dropdown-megamenu"
-      class="mega-menu-container dropdown-menu border-bottom"
+      class="mega-menu-container dropdown-menu"
     >
+      <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
-        class="row"
+        class="row position-relative"
       >
         <div
-          class="col-4"
+          class="col-12 col-lg-4"
         >
           <div
             class="content-block py-3"
@@ -39,7 +52,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
           </div>
         </div>
         <div
-          class="col-8"
+          class="col-12 col-lg-8"
         >
           <div
             class="navigation-items"
@@ -103,6 +116,62 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                 aria-labelledby="dropdown-megamenu-inner-2"
                 class="dropdown-menu"
               >
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    I'm a link
+                  </a>
+                </li>
                 <li>
                   <a
                     class="dropdown-item"
diff --git a/src/compositions/bcl-mega-menu/data.js b/src/compositions/bcl-mega-menu/data.js
index 89136b603..e1095313b 100644
--- a/src/compositions/bcl-mega-menu/data.js
+++ b/src/compositions/bcl-mega-menu/data.js
@@ -37,6 +37,34 @@ module.exports = {
       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: "I'm a link",
+          path: "/example.html",
+        },
+        {
+          label: "I'm a link",
+          path: "/example.html",
+        },
+        {
+          label: "I'm a link",
+          path: "/example.html",
+        },
+        {
+          label: "I'm a link",
+          path: "/example.html",
+        },
+        {
+          label: "I'm a link",
+          path: "/example.html",
+        },
+        {
+          label: "I'm a link",
+          path: "/example.html",
+        },
+        {
+          label: "I'm a link",
+          path: "/example.html",
+        },
         {
           label: "I'm a link",
           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
index 4fd2f8920..7bfedf92a 100644
--- a/src/compositions/bcl-mega-menu/mega-menu.html.twig
+++ b/src/compositions/bcl-mega-menu/mega-menu.html.twig
@@ -12,6 +12,8 @@
             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)) %}
@@ -19,6 +21,8 @@
 {% set _trigger = trigger|default({}) %}
 {% set _content_block = content_block|default('') %}
 {% 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() %}
@@ -56,10 +60,20 @@
   {% else %}
     {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
   {% endif %}
-  <div class="mega-menu-container dropdown-menu border-bottom" aria-labelledby="{{ _id }}">
-    <div class="row">
+  <div class="mega-menu-container dropdown-menu" aria-labelledby="{{ _id }}">
+    {% 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 class="row position-relative">
       {% if content_block is defined %}
-      <div class="col-4">
+      <div class="col-12 col-lg-4">
         <div class="content-block py-3">
           {%- block content_block -%}
             {{ _content_block }}
@@ -67,7 +81,7 @@
         </div>
       </div>
       {% endif %}
-      <div class="col-8">
+      <div class="col-12 col-lg-8">
         <div class="navigation-items">
           {% for _item in _items %}
             {% if _item.items is defined %}
diff --git a/src/compositions/bcl-mega-menu/mega-menu.story.js b/src/compositions/bcl-mega-menu/mega-menu.story.js
index bcb88cbab..7387526bc 100644
--- a/src/compositions/bcl-mega-menu/mega-menu.story.js
+++ b/src/compositions/bcl-mega-menu/mega-menu.story.js
@@ -1,4 +1,5 @@
 import { withDesign } from "storybook-addon-designs";
+import { correctPaths } from "@openeuropa/bcl-story-utils";
 import withCode from "@openeuropa/storybook-addon-code";
 
 import demoData from "@openeuropa/bcl-mega-menu/data.js";
@@ -9,4 +10,10 @@ export default {
   decorators: [withCode, withDesign],
 };
 
-export const Default = () => megaMenu(demoData);
+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-news/__snapshots__/news.test.js.snap b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
index 85e06d865..9663abd3f 100644
--- a/src/compositions/bcl-news/__snapshots__/news.test.js.snap
+++ b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - News full page renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - News full page renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -1485,13 +1498,26 @@ exports[`OE - News listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -1505,7 +1531,7 @@ exports[`OE - News listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-page/__snapshots__/page.test.js.snap b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
index 071314bde..fc7a88995 100644
--- a/src/compositions/bcl-page/__snapshots__/page.test.js.snap
+++ b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - Page Page renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-person/__snapshots__/person.test.js.snap b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
index fb516a899..ec6758763 100644
--- a/src/compositions/bcl-person/__snapshots__/person.test.js.snap
+++ b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - Person details renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Person details renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -1616,13 +1629,26 @@ exports[`OE - Person listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -1636,7 +1662,7 @@ exports[`OE - Person listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
index 22a10a2b0..69e1d78f2 100644
--- a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
+++ b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -2028,13 +2041,26 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -2048,7 +2074,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -3916,13 +3942,26 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -3936,7 +3975,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-project/__snapshots__/project.test.js.snap b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
index fd66e56f0..09f65277f 100644
--- a/src/compositions/bcl-project/__snapshots__/project.test.js.snap
+++ b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
@@ -1998,13 +1998,26 @@ exports[`OE - Project listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -2018,7 +2031,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -3975,13 +3988,26 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -3995,7 +4021,7 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -7197,13 +7223,26 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -7217,7 +7256,7 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -10419,13 +10458,26 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -10439,7 +10491,7 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
index 8b6bda4fd..5cdf3a4ae 100644
--- a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
+++ b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -1835,13 +1848,26 @@ exports[`OE - Publication details renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -1855,7 +1881,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -3540,13 +3566,26 @@ exports[`OE - Publication listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -3560,7 +3599,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
index 073c4a112..907edba92 100644
--- a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
+++ b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - Subscription renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-user/__snapshots__/user.test.js.snap b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
index eaebbb044..04e40004f 100644
--- a/src/compositions/bcl-user/__snapshots__/user.test.js.snap
+++ b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
@@ -181,13 +181,26 @@ exports[`OE - User list renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -201,7 +214,7 @@ exports[`OE - User list renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -1959,13 +1972,26 @@ exports[`OE - User renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -1979,7 +2005,7 @@ exports[`OE - User renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -4304,13 +4330,26 @@ exports[`OE - User terms renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -4324,7 +4363,7 @@ exports[`OE - User terms renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
index f469a4606..debd899c5 100644
--- a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
+++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
@@ -139,13 +139,26 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -159,7 +172,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -2333,13 +2346,26 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -2353,7 +2379,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
@@ -4526,13 +4552,26 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
-                  class="mega-menu-container dropdown-menu border-bottom"
+                  class="mega-menu-container dropdown-menu"
                 >
+                  <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
-                    class="row"
+                    class="row position-relative"
                   >
                     <div
-                      class="col-4"
+                      class="col-12 col-lg-4"
                     >
                       <div
                         class="content-block py-3"
@@ -4546,7 +4585,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                       </div>
                     </div>
                     <div
-                      class="col-8"
+                      class="col-12 col-lg-8"
                     >
                       <div
                         class="navigation-items"
diff --git a/src/data/header/data--navbar.js b/src/data/header/data--navbar.js
index bd428bacb..9034ed9e6 100644
--- a/src/data/header/data--navbar.js
+++ b/src/data/header/data--navbar.js
@@ -47,6 +47,7 @@ module.exports = {
       {
         mega_menu: true,
         link: true,
+        icon_path: "/icons.svg",
         id: "dropdown-megamenu",
         trigger: {
           label: "A link with mega menu",
diff --git a/src/themes/default/src/scss/_mega-menu.scss b/src/themes/default/src/scss/_mega-menu.scss
index bae495999..203724bc2 100644
--- a/src/themes/default/src/scss/_mega-menu.scss
+++ b/src/themes/default/src/scss/_mega-menu.scss
@@ -1,21 +1,33 @@
 /* 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: flex;
+    display: block;
   }
   .mega-menu-container.dropdown-menu {
     background: $lighter;
     position: absolute;
-    min-height: 300px;
+    max-height: 400px;
     display: none;
     width: 100%;
     padding: 0 map-get($spacers, 3);
     border-radius: 0;
-    margin-top: 8px;
+    border: 1px solid var(--bs-dropdown-border-color);
+    top: 100%;
+    margin: 8px 0 0;
+    .back-button {
+      display: none;
+    }
+    &:has(.show) {
+      .back-button {
+        display: block;
+      }
+    }
     > .row {
       flex: 1;
     }
@@ -23,8 +35,8 @@
       position: relative;
       height: 100%;
       background: $white;
-      padding-left: map-get($spacers, 3);
-      margin-left: -16px;
+      margin: 0 -1rem;
+      padding: 0 map-get($spacers, 3);
       &:after {
         bottom: 0;
         box-shadow: 4px 0 10px 0 rgba(224, 229, 245, 0.5);
@@ -38,12 +50,13 @@
     }
     .navigation-items {
       padding: map-get($spacers, 3) 0;
-      width: 33%;
-      position: relative;
+      width: 100%;
       height: 100%;
+      > a {
+        padding: map-get($spacers, 1) map-get($spacers, "2-5");
+      }
       > a,
       > .dropdown {
-        padding: map-get($spacers, 1) map-get($spacers, "2-5");
         border-left: 4px solid transparent;
         display: block;
         &.active {
@@ -59,16 +72,19 @@
       }
       .dropdown {
         position: static;
+        padding: 0;
         .dropdown-menu {
           transform: none !important;
           right: auto !important;
-          left: 100% !important;
+          left: 0 !important;
           width: 100%;
-          border-radius: 0;
-          border-color: var(--bs-border-color);
-          border-top: none;
-          border-bottom: none;
           height: 100%;
+          border: 0;
+          overflow: scroll;
+          position: absolute;
+          .dropdown-item {
+            white-space: normal;
+          }
         }
         &:has(.show) {
           background: $white;
@@ -81,26 +97,70 @@
           white-space: normal;
           display: block;
           position: relative;
+          padding: map-get($spacers, 1) map-get($spacers, "2-5")
+            map-get($spacers, 1) map-get($spacers, "2-5");
           &:after {
             top: 50%;
             transform: translateY(-50%);
             position: absolute;
-            right: 0;
+            right: 6px;
+          }
+        }
+        &:has(+ .collapse) {
+          .dropdown-menu {
+            height: 50%;
           }
         }
       }
       .collapse {
         position: absolute;
         right: auto;
-        left: 200%;
+        left: 0;
         width: 100%;
-        height: 100%;
-        top: 0;
-        padding: 16px;
+        height: 50%;
+        top: 50%;
+        padding: map-get($spacers, 3);
+        background: $lighter;
+        overflow: scroll;
         img {
           max-width: 100%;
+          max-height: 100%;
         }
       }
     }
   }
 }
+
+@include media-breakpoint-up(lg) {
+  .bcl-mega-menu {
+    > .show + .mega-menu-container.dropdown-menu {
+      display: flex;
+    }
+    .mega-menu-container.dropdown-menu {
+      top: 100%;
+      .content-block {
+        margin-right: 0;
+        padding-right: 0;
+      }
+      .navigation-items {
+        position: relative;
+        width: 33%;
+        .dropdown {
+          .dropdown-menu {
+            left: 100% !important;
+            top: auto;
+            height: 100% !important;
+          }
+        }
+        .collapse {
+          top: 0;
+          left: 200%;
+          height: 100%;
+        }
+      }
+      .back-button {
+        display: none !important;
+      }
+    }
+  }
+}

From eacb65046ec0e4f42f07147b18ebedf1bf4b42ca Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Mon, 17 Feb 2025 20:29:00 +0200
Subject: [PATCH 4/9] ERATRANS-1057: Documentation.

---
 src/compositions/bcl-mega-menu/mega-menu.html.twig | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/compositions/bcl-mega-menu/mega-menu.html.twig b/src/compositions/bcl-mega-menu/mega-menu.html.twig
index 7bfedf92a..1fc6eff74 100644
--- a/src/compositions/bcl-mega-menu/mega-menu.html.twig
+++ b/src/compositions/bcl-mega-menu/mega-menu.html.twig
@@ -2,6 +2,7 @@
 
 {# 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: '')
   - items (object[])

From a3923a4d51fa707e7d742ee82a9dd2bcd4cb66c3 Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Tue, 18 Feb 2025 01:40:42 +0200
Subject: [PATCH 5/9] ERATRANS-1057: Raw content block.

---
 src/compositions/bcl-mega-menu/mega-menu.html.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compositions/bcl-mega-menu/mega-menu.html.twig b/src/compositions/bcl-mega-menu/mega-menu.html.twig
index 1fc6eff74..5f653aa7f 100644
--- a/src/compositions/bcl-mega-menu/mega-menu.html.twig
+++ b/src/compositions/bcl-mega-menu/mega-menu.html.twig
@@ -77,7 +77,7 @@
       <div class="col-12 col-lg-4">
         <div class="content-block py-3">
           {%- block content_block -%}
-            {{ _content_block }}
+            {{ _content_block|raw }}
           {%- endblock -%}
         </div>
       </div>

From 2e5e9cac2b2420e095ca052c17f634e12f7dbe44 Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Tue, 18 Feb 2025 01:59:51 +0200
Subject: [PATCH 6/9] ERATRANS-1057: Raw content.

---
 src/compositions/bcl-mega-menu/mega-menu.html.twig | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/compositions/bcl-mega-menu/mega-menu.html.twig b/src/compositions/bcl-mega-menu/mega-menu.html.twig
index 5f653aa7f..f0c6d9ae6 100644
--- a/src/compositions/bcl-mega-menu/mega-menu.html.twig
+++ b/src/compositions/bcl-mega-menu/mega-menu.html.twig
@@ -77,7 +77,7 @@
       <div class="col-12 col-lg-4">
         <div class="content-block py-3">
           {%- block content_block -%}
-            {{ _content_block|raw }}
+            {{ _content_block }}
           {%- endblock -%}
         </div>
       </div>
@@ -96,7 +96,7 @@
               }) only %}
               {% if _item.collapse is defined %}
                 <div class="collapse">
-                  {{ _item.collapse }}
+                  {{ _item.collapse|raw }}
                 </div>
               {% endif %}
             {% else %}

From 551cafefea327d2bc7587a0c0f0c8839ece1205b Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Sun, 2 Mar 2025 23:15:35 +0200
Subject: [PATCH 7/9] ERATRANS-1057: PR feedback.

---
 .../__snapshots__/navbar.test.js.snap         | 124 ++++++++++--------
 .../__snapshots__/contact-form.test.js.snap   |  93 +++++++------
 .../__snapshots__/event.test.js.snap          |  62 +++++----
 .../__snapshots__/glossary.test.js.snap       |  62 +++++----
 .../__snapshots__/group.test.js.snap          | 124 ++++++++++--------
 .../__snapshots__/header.test.js.snap         |  93 +++++++------
 .../__snapshots__/landing-page.test.js.snap   |  31 +++--
 .../__snapshots__/mega-menu.test.js.snap      |  31 +++--
 .../bcl-mega-menu/mega-menu.html.twig         |  29 ++--
 .../bcl-news/__snapshots__/news.test.js.snap  |  62 +++++----
 .../bcl-page/__snapshots__/page.test.js.snap  |  31 +++--
 .../__snapshots__/person.test.js.snap         |  62 +++++----
 .../__snapshots__/procurement.test.js.snap    |  93 +++++++------
 .../__snapshots__/project.test.js.snap        | 124 ++++++++++--------
 .../__snapshots__/publication.test.js.snap    |  93 +++++++------
 .../__snapshots__/subscription.test.js.snap   |  31 +++--
 .../bcl-user/__snapshots__/user.test.js.snap  |  93 +++++++------
 .../__snapshots__/vacancy.test.js.snap        |  93 +++++++------
 src/themes/default/src/js/index.esm.js        |   2 +
 src/themes/default/src/js/index.umd.js        |   2 +
 .../default/src/js/mega-menu/mega-menu.js     |  53 ++++++++
 src/themes/default/src/scss/_mega-menu.scss   |  53 ++++++--
 src/themes/joinup/src/js/index.esm.js         |   2 +
 src/themes/joinup/src/js/index.umd.js         |   2 +
 src/themes/ucpkn/src/js/index.esm.js          |   2 +
 src/themes/ucpkn/src/js/index.umd.js          |   2 +
 26 files changed, 878 insertions(+), 571 deletions(-)
 create mode 100644 src/themes/default/src/js/mega-menu/mega-menu.js

diff --git a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
index c8eab9b2f..2418a6cde 100644
--- a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
+++ b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
@@ -44,6 +44,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
             <div
               aria-labelledby="dropdown-megamenu"
               class="nav-link bcl-mega-menu"
+              style="--bcl-mm-min-height: 300px;"
             >
               <a
                 aria-expanded="false"
@@ -60,19 +61,23 @@ exports[`OE - navbar dark renders correctly 1`] = `
                 aria-labelledby="dropdown-megamenu"
                 class="mega-menu-container dropdown-menu"
               >
-                <button
-                  class="back-button btn btn-link btn-md"
-                  type="button"
+                <div
+                  class="d-lg-none back-button-block"
                 >
-                  <svg
-                    class="me-2-5 bi icon--fluid"
+                  <button
+                    class="back-button btn btn-link btn-md"
+                    type="button"
                   >
-                    <use
-                      xlink:href="#arrow-left"
-                    />
-                  </svg>
-                  Back
-                </button>
+                    <svg
+                      class="me-2-5 bi icon--fluid"
+                    >
+                      <use
+                        xlink:href="#arrow-left"
+                      />
+                    </svg>
+                    Back
+                  </button>
+                </div>
                 <div
                   class="row position-relative"
                 >
@@ -102,7 +107,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
                         <a
                           aria-expanded="false"
                           class="dropdown-toggle"
-                          data-bs-auto-close="outside"
+                          data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
                           id="dropdown-inner-megamenu"
@@ -143,7 +148,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
                         <a
                           aria-expanded="false"
                           class="dropdown-toggle"
-                          data-bs-auto-close="outside"
+                          data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
                           id="dropdown-inner-megamenu-2"
@@ -392,6 +397,7 @@ exports[`OE - navbar light renders correctly 1`] = `
             <div
               aria-labelledby="dropdown-megamenu"
               class="nav-link bcl-mega-menu"
+              style="--bcl-mm-min-height: 300px;"
             >
               <a
                 aria-expanded="false"
@@ -408,19 +414,23 @@ exports[`OE - navbar light renders correctly 1`] = `
                 aria-labelledby="dropdown-megamenu"
                 class="mega-menu-container dropdown-menu"
               >
-                <button
-                  class="back-button btn btn-link btn-md"
-                  type="button"
+                <div
+                  class="d-lg-none back-button-block"
                 >
-                  <svg
-                    class="me-2-5 bi icon--fluid"
+                  <button
+                    class="back-button btn btn-link btn-md"
+                    type="button"
                   >
-                    <use
-                      xlink:href="#arrow-left"
-                    />
-                  </svg>
-                  Back
-                </button>
+                    <svg
+                      class="me-2-5 bi icon--fluid"
+                    >
+                      <use
+                        xlink:href="#arrow-left"
+                      />
+                    </svg>
+                    Back
+                  </button>
+                </div>
                 <div
                   class="row position-relative"
                 >
@@ -450,7 +460,7 @@ exports[`OE - navbar light renders correctly 1`] = `
                         <a
                           aria-expanded="false"
                           class="dropdown-toggle"
-                          data-bs-auto-close="outside"
+                          data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
                           id="dropdown-inner-megamenu"
@@ -491,7 +501,7 @@ exports[`OE - navbar light renders correctly 1`] = `
                         <a
                           aria-expanded="false"
                           class="dropdown-toggle"
-                          data-bs-auto-close="outside"
+                          data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
                           id="dropdown-inner-megamenu-2"
@@ -723,6 +733,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
           <div
             aria-labelledby="dropdown-megamenu"
             class="nav-link bcl-mega-menu"
+            style="--bcl-mm-min-height: 300px;"
           >
             <a
               aria-expanded="false"
@@ -739,19 +750,23 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
               aria-labelledby="dropdown-megamenu"
               class="mega-menu-container dropdown-menu"
             >
-              <button
-                class="back-button btn btn-link btn-md"
-                type="button"
+              <div
+                class="d-lg-none back-button-block"
               >
-                <svg
-                  class="me-2-5 bi icon--fluid"
+                <button
+                  class="back-button btn btn-link btn-md"
+                  type="button"
                 >
-                  <use
-                    xlink:href="#arrow-left"
-                  />
-                </svg>
-                Back
-              </button>
+                  <svg
+                    class="me-2-5 bi icon--fluid"
+                  >
+                    <use
+                      xlink:href="#arrow-left"
+                    />
+                  </svg>
+                  Back
+                </button>
+              </div>
               <div
                 class="row position-relative"
               >
@@ -781,7 +796,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                       <a
                         aria-expanded="false"
                         class="dropdown-toggle"
-                        data-bs-auto-close="outside"
+                        data-bs-auto-close="false"
                         data-bs-toggle="dropdown"
                         href="/example.html"
                         id="dropdown-inner-megamenu"
@@ -822,7 +837,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                       <a
                         aria-expanded="false"
                         class="dropdown-toggle"
-                        data-bs-auto-close="outside"
+                        data-bs-auto-close="false"
                         data-bs-toggle="dropdown"
                         href="/example.html"
                         id="dropdown-inner-megamenu-2"
@@ -1070,6 +1085,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
             <div
               aria-labelledby="dropdown-megamenu"
               class="nav-link bcl-mega-menu"
+              style="--bcl-mm-min-height: 300px;"
             >
               <a
                 aria-expanded="false"
@@ -1086,19 +1102,23 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                 aria-labelledby="dropdown-megamenu"
                 class="mega-menu-container dropdown-menu"
               >
-                <button
-                  class="back-button btn btn-link btn-md"
-                  type="button"
+                <div
+                  class="d-lg-none back-button-block"
                 >
-                  <svg
-                    class="me-2-5 bi icon--fluid"
+                  <button
+                    class="back-button btn btn-link btn-md"
+                    type="button"
                   >
-                    <use
-                      xlink:href="#arrow-left"
-                    />
-                  </svg>
-                  Back
-                </button>
+                    <svg
+                      class="me-2-5 bi icon--fluid"
+                    >
+                      <use
+                        xlink:href="#arrow-left"
+                      />
+                    </svg>
+                    Back
+                  </button>
+                </div>
                 <div
                   class="row position-relative"
                 >
@@ -1128,7 +1148,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                         <a
                           aria-expanded="false"
                           class="dropdown-toggle"
-                          data-bs-auto-close="outside"
+                          data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
                           id="dropdown-inner-megamenu"
@@ -1169,7 +1189,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                         <a
                           aria-expanded="false"
                           class="dropdown-toggle"
-                          data-bs-auto-close="outside"
+                          data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
                           id="dropdown-inner-megamenu-2"
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 3d2693960..bbcfd6630 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
@@ -125,6 +125,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -1566,6 +1571,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -1582,19 +1588,23 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -1624,7 +1634,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -1665,7 +1675,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -2975,6 +2985,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -2991,19 +3002,23 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -3033,7 +3048,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -3074,7 +3089,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-event/__snapshots__/event.test.js.snap b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
index 7cc407a4f..e68362b16 100644
--- a/src/compositions/bcl-event/__snapshots__/event.test.js.snap
+++ b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - event listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - event listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - event listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - event listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -2297,6 +2302,7 @@ exports[`OE - event page renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -2313,19 +2319,23 @@ exports[`OE - event page renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -2355,7 +2365,7 @@ exports[`OE - event page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -2396,7 +2406,7 @@ exports[`OE - event page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
index ef30a70e9..9805eb9a8 100644
--- a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
+++ b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -1782,6 +1787,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -1798,19 +1804,23 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -1840,7 +1850,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -1881,7 +1891,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-group/__snapshots__/group.test.js.snap b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
index cc9befd36..33d0e7586 100644
--- a/src/compositions/bcl-group/__snapshots__/group.test.js.snap
+++ b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - Group landing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Group landing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Group landing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Group landing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -2235,6 +2240,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -2251,19 +2257,23 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -2293,7 +2303,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -2334,7 +2344,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -4307,6 +4317,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -4323,19 +4334,23 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -4365,7 +4380,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -4406,7 +4421,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -6226,6 +6241,7 @@ exports[`OE - Group listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -6242,19 +6258,23 @@ exports[`OE - Group listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -6284,7 +6304,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -6325,7 +6345,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-header/__snapshots__/header.test.js.snap b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
index a5439e9a1..9ce6ed6a4 100644
--- a/src/compositions/bcl-header/__snapshots__/header.test.js.snap
+++ b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
@@ -175,6 +175,7 @@ exports[`OE - Header EC renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -191,19 +192,23 @@ exports[`OE - Header EC renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -233,7 +238,7 @@ exports[`OE - Header EC renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -274,7 +279,7 @@ exports[`OE - Header EC renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -1138,6 +1143,7 @@ exports[`OE - Header EU renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -1154,19 +1160,23 @@ exports[`OE - Header EU renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -1196,7 +1206,7 @@ exports[`OE - Header EU renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -1237,7 +1247,7 @@ exports[`OE - Header EU renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -2095,6 +2105,7 @@ exports[`OE - Header Neutral renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -2111,19 +2122,23 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -2153,7 +2168,7 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -2194,7 +2209,7 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
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 4181acbb7..ceec793fa 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
@@ -125,6 +125,7 @@ exports[`OE - Landing page renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Landing page renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Landing page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Landing page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
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
index 93c6a4010..d89499df9 100644
--- a/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
+++ b/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
@@ -5,6 +5,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
   <div
     aria-labelledby="dropdown-megamenu"
     class="bcl-mega-menu"
+    style="--bcl-mm-min-height: 300px;"
   >
     <button
       aria-expanded="false"
@@ -21,19 +22,23 @@ exports[`OE - Mega Menu renders correctly 1`] = `
       aria-labelledby="dropdown-megamenu"
       class="mega-menu-container dropdown-menu"
     >
-      <button
-        class="back-button btn btn-link btn-md"
-        type="button"
+      <div
+        class="d-lg-none back-button-block"
       >
-        <svg
-          class="me-2-5 bi icon--fluid"
+        <button
+          class="back-button btn btn-link btn-md"
+          type="button"
         >
-          <use
-            xlink:href="#arrow-left"
-          />
-        </svg>
-        Back
-      </button>
+          <svg
+            class="me-2-5 bi icon--fluid"
+          >
+            <use
+              xlink:href="#arrow-left"
+            />
+          </svg>
+          Back
+        </button>
+      </div>
       <div
         class="row position-relative"
       >
@@ -63,7 +68,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
               <a
                 aria-expanded="false"
                 class="dropdown-toggle"
-                data-bs-auto-close="outside"
+                data-bs-auto-close="false"
                 data-bs-toggle="dropdown"
                 href="/example.html"
                 id="dropdown-megamenu-inner"
@@ -104,7 +109,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
               <a
                 aria-expanded="false"
                 class="dropdown-toggle"
-                data-bs-auto-close="outside"
+                data-bs-auto-close="false"
                 data-bs-toggle="dropdown"
                 href="/example.html"
                 id="dropdown-megamenu-inner-2"
diff --git a/src/compositions/bcl-mega-menu/mega-menu.html.twig b/src/compositions/bcl-mega-menu/mega-menu.html.twig
index f0c6d9ae6..cca1fa82f 100644
--- a/src/compositions/bcl-mega-menu/mega-menu.html.twig
+++ b/src/compositions/bcl-mega-menu/mega-menu.html.twig
@@ -5,6 +5,8 @@
   - link (boolean) (default: false) - sets trigger to link, default is button
   - trigger (link or button)
   - content_block (block) (default: '')
+  - min_height (string) (default: '300px')
+    ! set min-height of mega-menu
   - items (object[])
     format: [
       {
@@ -21,6 +23,7 @@
 {% set _link = link ?? false %}
 {% set _trigger = trigger|default({}) %}
 {% set _content_block = content_block|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('') %}
@@ -55,23 +58,25 @@
   }) %}
 {% endif %}
 
-<div {{ attributes }}>
+<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 }}">
-    {% 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 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-12 col-lg-4">
@@ -91,7 +96,7 @@
                 direction: 'dropend',
                 link: true,
                 trigger: _item.trigger|merge({
-                  attributes: _trigger_attributes.setAttribute('data-bs-auto-close', 'outside')
+                  attributes: _trigger_attributes.setAttribute('data-bs-auto-close', 'false')
                 })
               }) only %}
               {% if _item.collapse is defined %}
diff --git a/src/compositions/bcl-news/__snapshots__/news.test.js.snap b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
index 9663abd3f..2f97531c2 100644
--- a/src/compositions/bcl-news/__snapshots__/news.test.js.snap
+++ b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - News full page renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - News full page renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - News full page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - News full page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -1484,6 +1489,7 @@ exports[`OE - News listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -1500,19 +1506,23 @@ exports[`OE - News listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -1542,7 +1552,7 @@ exports[`OE - News listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -1583,7 +1593,7 @@ exports[`OE - News listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-page/__snapshots__/page.test.js.snap b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
index fc7a88995..b6a28c10d 100644
--- a/src/compositions/bcl-page/__snapshots__/page.test.js.snap
+++ b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - Page Page renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Page Page renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-person/__snapshots__/person.test.js.snap b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
index ec6758763..09727fc20 100644
--- a/src/compositions/bcl-person/__snapshots__/person.test.js.snap
+++ b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - Person details renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Person details renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Person details renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Person details renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -1615,6 +1620,7 @@ exports[`OE - Person listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -1631,19 +1637,23 @@ exports[`OE - Person listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -1673,7 +1683,7 @@ exports[`OE - Person listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -1714,7 +1724,7 @@ exports[`OE - Person listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
index 69e1d78f2..d12c5cb8a 100644
--- a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
+++ b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -2027,6 +2032,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -2043,19 +2049,23 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -2085,7 +2095,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -2126,7 +2136,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -3928,6 +3938,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -3944,19 +3955,23 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -3986,7 +4001,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -4027,7 +4042,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-project/__snapshots__/project.test.js.snap b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
index 09f65277f..b63ce9542 100644
--- a/src/compositions/bcl-project/__snapshots__/project.test.js.snap
+++ b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
@@ -1984,6 +1984,7 @@ exports[`OE - Project listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -2000,19 +2001,23 @@ exports[`OE - Project listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -2042,7 +2047,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -2083,7 +2088,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -3974,6 +3979,7 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -3990,19 +3996,23 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -4032,7 +4042,7 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -4073,7 +4083,7 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -7209,6 +7219,7 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -7225,19 +7236,23 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -7267,7 +7282,7 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -7308,7 +7323,7 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -10444,6 +10459,7 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -10460,19 +10476,23 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -10502,7 +10522,7 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -10543,7 +10563,7 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
index 5cdf3a4ae..6ed568fda 100644
--- a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
+++ b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -1834,6 +1839,7 @@ exports[`OE - Publication details renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -1850,19 +1856,23 @@ exports[`OE - Publication details renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -1892,7 +1902,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -1933,7 +1943,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -3552,6 +3562,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -3568,19 +3579,23 @@ exports[`OE - Publication listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -3610,7 +3625,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -3651,7 +3666,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
index 907edba92..8b33d1227 100644
--- a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
+++ b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - Subscription renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Subscription renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-user/__snapshots__/user.test.js.snap b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
index 04e40004f..e520e6fa0 100644
--- a/src/compositions/bcl-user/__snapshots__/user.test.js.snap
+++ b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
@@ -167,6 +167,7 @@ exports[`OE - User list renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -183,19 +184,23 @@ exports[`OE - User list renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -225,7 +230,7 @@ exports[`OE - User list renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -266,7 +271,7 @@ exports[`OE - User list renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -1958,6 +1963,7 @@ exports[`OE - User renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -1974,19 +1980,23 @@ exports[`OE - User renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -2016,7 +2026,7 @@ exports[`OE - User renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -2057,7 +2067,7 @@ exports[`OE - User renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -4316,6 +4326,7 @@ exports[`OE - User terms renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -4332,19 +4343,23 @@ exports[`OE - User terms renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -4374,7 +4389,7 @@ exports[`OE - User terms renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -4415,7 +4430,7 @@ exports[`OE - User terms renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
index debd899c5..5fbe3b964 100644
--- a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
+++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
@@ -125,6 +125,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -141,19 +142,23 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -183,7 +188,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -224,7 +229,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -2332,6 +2337,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -2348,19 +2354,23 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -2390,7 +2400,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -2431,7 +2441,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
@@ -4538,6 +4548,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
               <div
                 aria-labelledby="dropdown-megamenu"
                 class="nav-link bcl-mega-menu"
+                style="--bcl-mm-min-height: 300px;"
               >
                 <a
                   aria-expanded="false"
@@ -4554,19 +4565,23 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                   aria-labelledby="dropdown-megamenu"
                   class="mega-menu-container dropdown-menu"
                 >
-                  <button
-                    class="back-button btn btn-link btn-md"
-                    type="button"
+                  <div
+                    class="d-lg-none back-button-block"
                   >
-                    <svg
-                      class="me-2-5 bi icon--fluid"
+                    <button
+                      class="back-button btn btn-link btn-md"
+                      type="button"
                     >
-                      <use
-                        xlink:href="/icons.svg#arrow-left"
-                      />
-                    </svg>
-                    Back
-                  </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"
                   >
@@ -4596,7 +4611,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu"
@@ -4637,7 +4652,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                           <a
                             aria-expanded="false"
                             class="dropdown-toggle"
-                            data-bs-auto-close="outside"
+                            data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
                             id="dropdown-inner-megamenu-2"
diff --git a/src/themes/default/src/js/index.esm.js b/src/themes/default/src/js/index.esm.js
index bc5efca58..7c999bbb5 100644
--- a/src/themes/default/src/js/index.esm.js
+++ b/src/themes/default/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 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 {
   Dropdown,
   Gallery,
   Modal,
+  MegaMenu,
   AccessibleToggle,
   Offcanvas,
   Popover,
diff --git a/src/themes/default/src/js/index.umd.js b/src/themes/default/src/js/index.umd.js
index d9ddf8e82..06affc9b8 100644
--- a/src/themes/default/src/js/index.umd.js
+++ b/src/themes/default/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 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 {
   Dropdown,
   Gallery,
   Modal,
+  MegaMenu,
   AccessibleToggle,
   Offcanvas,
   Popover,
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..7a26fc39c
--- /dev/null
+++ b/src/themes/default/src/js/mega-menu/mega-menu.js
@@ -0,0 +1,53 @@
+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 (!this.childToggles.length) return;
+      if (!window.matchMedia("(min-width: 992px)").matches) return;
+      const firstToggle = this.childToggles[0];
+      if (firstToggle.parentElement.classList.contains("show")) return;
+      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
index 203724bc2..84d6509b0 100644
--- a/src/themes/default/src/scss/_mega-menu.scss
+++ b/src/themes/default/src/scss/_mega-menu.scss
@@ -10,9 +10,8 @@
     display: block;
   }
   .mega-menu-container.dropdown-menu {
-    background: $lighter;
     position: absolute;
-    max-height: 400px;
+    min-height: var(--bcl-mm-min-height);
     display: none;
     width: 100%;
     padding: 0 map-get($spacers, 3);
@@ -27,6 +26,9 @@
       .back-button {
         display: block;
       }
+      .back-button-block {
+        padding-bottom: 46px;
+      }
     }
     > .row {
       flex: 1;
@@ -34,7 +36,6 @@
     .content-block {
       position: relative;
       height: 100%;
-      background: $white;
       margin: 0 -1rem;
       padding: 0 map-get($spacers, 3);
       &:after {
@@ -49,11 +50,11 @@
       }
     }
     .navigation-items {
-      padding: map-get($spacers, 3) 0;
       width: 100%;
       height: 100%;
+      .dropdown-toggle,
       > a {
-        padding: map-get($spacers, 1) map-get($spacers, "2-5");
+        padding: map-get($spacers, 2) map-get($spacers, "2-5");
       }
       > a,
       > .dropdown {
@@ -63,7 +64,7 @@
           border-left-color: $primary;
         }
         &:hover {
-          background: $white;
+          background: $blue-50;
           border-left-color: $primary;
         }
       }
@@ -82,12 +83,21 @@
           border: 0;
           overflow: scroll;
           position: absolute;
+          padding: 0;
+          border-radius: 0;
+          background: $blue-50;
           .dropdown-item {
             white-space: normal;
+            padding: map-get($spacers, 2) map-get($spacers, "2-5");
+            color: $link-color;
+            &:hover {
+              background: transparent;
+              text-decoration: underline;
+            }
           }
         }
         &:has(.show) {
-          background: $white;
+          background: $blue-50;
           border-left-color: $primary;
           & + .collapse {
             display: block;
@@ -97,14 +107,23 @@
           white-space: normal;
           display: block;
           position: relative;
-          padding: map-get($spacers, 1) map-get($spacers, "2-5")
-            map-get($spacers, 1) map-get($spacers, "2-5");
           &:after {
             top: 50%;
             transform: translateY(-50%);
             position: absolute;
             right: 6px;
           }
+          &.show {
+            position: absolute;
+            bottom: 100%;
+            z-index: 100;
+            color: $dark;
+            margin-left: -1rem;
+            font-size: 24px;
+            &:after {
+              display: none;
+            }
+          }
         }
         &:has(+ .collapse) {
           .dropdown-menu {
@@ -120,7 +139,7 @@
         height: 50%;
         top: 50%;
         padding: map-get($spacers, 3);
-        background: $lighter;
+        background: $white;
         overflow: scroll;
         img {
           max-width: 100%;
@@ -138,6 +157,7 @@
     }
     .mega-menu-container.dropdown-menu {
       top: 100%;
+      padding: map-get($spacers, 3) map-get($spacers, 3) 0 map-get($spacers, 3);
       .content-block {
         margin-right: 0;
         padding-right: 0;
@@ -151,6 +171,16 @@
             top: auto;
             height: 100% !important;
           }
+          .dropdown-toggle.show {
+            margin-left: 0;
+            color: $link-color;
+            position: relative;
+            bottom: 0;
+            font-size: 1rem;
+            &:after {
+              display: block;
+            }
+          }
         }
         .collapse {
           top: 0;
@@ -158,9 +188,6 @@
           height: 100%;
         }
       }
-      .back-button {
-        display: none !important;
-      }
     }
   }
 }
diff --git a/src/themes/joinup/src/js/index.esm.js b/src/themes/joinup/src/js/index.esm.js
index bc5efca58..7c999bbb5 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 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 {
   Dropdown,
   Gallery,
   Modal,
+  MegaMenu,
   AccessibleToggle,
   Offcanvas,
   Popover,
diff --git a/src/themes/joinup/src/js/index.umd.js b/src/themes/joinup/src/js/index.umd.js
index d9ddf8e82..06affc9b8 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 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 {
   Dropdown,
   Gallery,
   Modal,
+  MegaMenu,
   AccessibleToggle,
   Offcanvas,
   Popover,
diff --git a/src/themes/ucpkn/src/js/index.esm.js b/src/themes/ucpkn/src/js/index.esm.js
index bc5efca58..eef3c3df3 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 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";
@@ -30,6 +31,7 @@ export {
   Gallery,
   Modal,
   AccessibleToggle,
+  MegaMenu,
   Offcanvas,
   Popover,
   ScrollSpyV2,
diff --git a/src/themes/ucpkn/src/js/index.umd.js b/src/themes/ucpkn/src/js/index.umd.js
index d9ddf8e82..c40e000cf 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 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";
@@ -30,6 +31,7 @@ export default {
   Gallery,
   Modal,
   AccessibleToggle,
+  MegaMenu,
   Offcanvas,
   Popover,
   ScrollSpyV2,

From 835b24008e7809a24a8e5d4782f7b577964f6e48 Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Sun, 2 Mar 2025 23:27:21 +0200
Subject: [PATCH 8/9] ERATRANS-1057: PR feedback.

---
 src/themes/default/src/scss/_mega-menu.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/themes/default/src/scss/_mega-menu.scss b/src/themes/default/src/scss/_mega-menu.scss
index 84d6509b0..2d98a78c8 100644
--- a/src/themes/default/src/scss/_mega-menu.scss
+++ b/src/themes/default/src/scss/_mega-menu.scss
@@ -86,6 +86,7 @@
           padding: 0;
           border-radius: 0;
           background: $blue-50;
+          margin: 0;
           .dropdown-item {
             white-space: normal;
             padding: map-get($spacers, 2) map-get($spacers, "2-5");
@@ -151,6 +152,9 @@
 }
 
 @include media-breakpoint-up(lg) {
+  .nav-item:has(> .bcl-mega-menu) {
+    position: static;
+  }
   .bcl-mega-menu {
     > .show + .mega-menu-container.dropdown-menu {
       display: flex;
@@ -168,8 +172,9 @@
         .dropdown {
           .dropdown-menu {
             left: 100% !important;
-            top: auto;
+            top: 0;
             height: 100% !important;
+            margin: 0;
           }
           .dropdown-toggle.show {
             margin-left: 0;

From ac8e41121233f0c1844ea7f5b307f5f9b500ea99 Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Tue, 8 Apr 2025 20:15:48 +0300
Subject: [PATCH 9/9] Mega menu desktop

---
 .yarn/install-state.gz                        | Bin 2228392 -> 2228394 bytes
 .../__snapshots__/navbar.test.js.snap         | 508 +++++++++++-----
 .../__snapshots__/contact-form.test.js.snap   | 420 +++++++++----
 .../__snapshots__/event.test.js.snap          | 280 ++++++---
 .../__snapshots__/glossary.test.js.snap       | 280 ++++++---
 .../__snapshots__/group.test.js.snap          | 560 +++++++++++++-----
 .../__snapshots__/header.test.js.snap         | 420 +++++++++----
 .../__snapshots__/landing-page.test.js.snap   | 140 +++--
 .../__snapshots__/mega-menu.test.js.snap      | 139 ++---
 src/compositions/bcl-mega-menu/data.js        |  72 ++-
 .../bcl-mega-menu/mega-menu.html.twig         |  41 +-
 .../bcl-mega-menu/mega-menu.story.js          |   3 -
 .../bcl-news/__snapshots__/news.test.js.snap  | 280 ++++++---
 .../bcl-page/__snapshots__/page.test.js.snap  | 140 +++--
 .../__snapshots__/person.test.js.snap         | 280 ++++++---
 .../__snapshots__/procurement.test.js.snap    | 420 +++++++++----
 .../__snapshots__/project.test.js.snap        | 560 +++++++++++++-----
 .../__snapshots__/publication.test.js.snap    | 420 +++++++++----
 .../__snapshots__/subscription.test.js.snap   | 140 +++--
 .../bcl-user/__snapshots__/user.test.js.snap  | 420 +++++++++----
 .../__snapshots__/vacancy.test.js.snap        | 420 +++++++++----
 src/data/header/data--navbar.js               |  67 ++-
 src/data/navbar/data.js                       |  68 ++-
 .../default/src/js/mega-menu/mega-menu.js     |   3 +-
 src/themes/default/src/scss/_mega-menu.scss   | 175 +++---
 src/themes/default/src/scss/base/_colors.scss |   3 +
 26 files changed, 4635 insertions(+), 1624 deletions(-)

diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 646b511b075ec3d0578421d9ea4725403ce33331..ea77174d758848cd3810b6f010e4647a67ba5014 100644
GIT binary patch
delta 2749
zcmV;u3PSa$frtUBfrtTsgaL#Cgad>Ggaw2Kga?EOgb9QSgbRcWgbjoagb#!egb{=i
zgcF1mgcXDqgcpPugc*bygd2n$gdKz)gdc<;v>{LSf3<TfqOd(12M^}~Y{iBhg?YcE
zso)FPUofu_;*oH2Y}r$=kqCAay!#A!tfS%uw4n|08#6)TP9lhbwUC`oU|-h$|2eBh
zjha<+)F#W{605P>1l^*Xq~1OeVH2r$-027i)N|Q;VadtQmUVN`v%JxjF)p9IIE{){
zv?KFme=yAD$lgnLRdO!9E}bY~2V?Vhw<DITw>IeFG7k##?^2YQ7VrYANKM!~*2T1r
zaXLOnCF^O)tjTzqH(^KvAgh-SBsBbi)Gj~MV#MATwj#rXJ(~tnYCa{H*_(!CR=+Gz
zo7jn+HAFY{MreT^RH-fyE@snZ^j_i6D$naGf3<QOR(Z3|y2cU@fzT~?C()oXOPRQq
z&moM<&-D~FVdDk7=$gz~PwQ1C(VCup^r;lm2cAU-cd%_DimlSF2n0Ay?ar3WjYvog
z1ZBDgw~Y$wG<JPXJ2hcGN}OPuF}eWSgH>YZED1zyUVeMFWI*mZkT%H3AVGUV_ov_r
ze?pW2Gl*i=Gt6Y7N_;xGFd%?t;izqjcOq%?FZ+5_V60MV($ISX4ggq9=ytfqzD}Qr
zZ>F@`$W_!r-2J%xLW@CMQ*R`cELz<ZA_)0y$pZ;8V58rfL>C(XkOirvsPI$I1~#CF
z982dr{0KaaSQZJh0GYQcP)ZlFup_POf70v3TLN3VaSf-mH%frih08A=pDbEk#WF2T
zK9_RFZqXYoE~<kT$eDV?tlngxk)I^CPqLrjwO#mzQU8)Aix4|Y(h&9&9Z3P96u?<q
zB!QE#Z16xwG~UY$U8i5FTwH#4wuI-O5(NzM^@!c@@jLL!gnx3ksmp^bkmO7xf85r9
z>qQ=)0!&<k$Ab%5wGZAGAGBocqjxE3@}gv*xc_k27dtTceWCaQ`@xR9Dw)8z{OWAU
zBDCR5>aLDUg8-)+Im4x5#Ls$l>?|KRkFG<PmiYAI9-TZLX6|r0-LUM3PS>MY-fgmq
zJt1_p*?Us{qM+eZU}bZSQk)2(e>uq0<=2mIK|t#FXG=m#Ru?$g1+rjGu}Eh;RS=c{
zluqszz;Zr78rnTVr1*?UE);j^1bMF@sZQW#*$dE75*6J@I3X<jh^Nr4QC!Ha=+*mX
zA&RVMciUfn^Y|9D3yyNr4d{M6{NmfG_|>H@{_rx)1z9<;#~(4|l<cggf0%Wz4$|4H
zJ=2Z{ObY`hfMs1bh&(Ee8FZ)<TZ@nyNYT{YVX&<M1VIV`&BM|0%OXXkUIL4%qhN^`
z4ZOn&H7|dBaT8J(e>#tGb$j{qi~m+}<1Jbmf8kv|eD&p5B>VE$7s_~E&sNA9S&5jW
z0}+f1unXu2!Fa1#mc7U%e-6^-A~xnyhz76+jlwn&RuotA&;i0|UVsI^72*Lg@(p%A
z2iO&c7S)~ynI-xFYZkKv1J@wp-Mv+I?W_9#p*sGr*=Bchlxr{H+jEp_Yk&N|pYf3O
z-{#@U-=5vX;mY5iy@$&x&+Z<slmHtpUF|busA;Dd0xX8iA3Ddoe=M@n3GD7#asrNr
z&sD7jkSYt+U8+#dGZII#tI8G}@oK7@kQZs1QkkPlwxnVb=YeNhXrI>$#**KFt1D}I
zyc4cI__%!=2m9o!?a8CNcy;YHyvM71ym}3<zW4kl@ap@||98Cl!SgpX{EcMG$6$@|
zfaIDKUR^H`!&XaGe^S|1rjqn^i#&hT7+#$T`r2m|xrS<Hn7s{6hdmu|P`AgPkVYpB
z{i1UZugl4%fEN}Y-DLcWwKVhYw9+f9|GXQoo_w-2`Q&YQb?r60$E$n1dJV6h-v(a&
z@IBzwkKVwm$f6ihcbrxVyDCgnOQIS(ex9XQ?6Sr1Ep|-0f12?$-IG$SfbW(urE8mc
z+UynvOPUMw344yB4$(yh2LHi3G~ifr?Gk$q(%|nJv6|xDzP~H$guN55KL2Wv^&7e1
zmDlectM0MtHLUvaZD7?;-UC+s^xv`S;Xl6g;3Hk>{Klhit*@(={Pa5?>#71)y^M0Q
zK4j9(dCOBqf1?2&EbXv)rBY6r21A}Xr0QGDqZ9D!SkYDu9qrN;H)_IAS7Jz3#7Jr+
z7IIORN`b4V(SojmwozDnS50j3!55xBe)QzYnqSjUqNiW}%I6+@q?dU0g>Qb^K3y^m
zsg(@2n+IW2=hPUSzJuA>>QpBtKXhHxXo_k+vr;xVe?rz3JOAnCgpuPf!=DC3lJl%}
z!Pl@KgLkhGCQPY@6gTiudv<Y-z)sZwLGmJl)0^bdESaCe4s}<Zg|H^~kxj(I$wF62
zTl1VSq2V>Grx_lIl(oevQ3dOhM(Absdgj^3YB{D^XEa8YoJ5ivOplg-fbg1OsK}?X
zoKeY!e_R$!lir?{Ol#_%m!2e<B}|=jm*HIuOXFaH)@m0FO_inC^Dae|-`RDCzXw|(
zotj0{iiT2Ih#jvH&2AP-r>b)u$#wE^OkZt|<i9Eoz-Ms>{0<(B3%1~Fm%j{O)hj-|
zWE*;(QLYLIW>q;yuzoxCFHDs*t4modH&}kde~+a`Y|wF>0k)u`>W}I$Ts)PVIJe=`
zQ!e^LM-8Wr(`n{%$yu$Y!zDGglJBb-bK!`qM9oA6@M~SFZfQneP@TYGcv2P^1d`%s
zlZH6#7nnCi#lkrBUOIiq9kl0FCJqeVO9~+w0-lg+X)F`jfF1gAFh_DOITh&_YgS@a
zf7AtAqOMwENIJ}jdC5F<b;rj}=%{IcFDt0Dzj%bgn-=+Dz+|?LX>rFv;*rQ6f(E4L
zvd_qa(|54>!uGsIczH~!yWOf}*U?fe8VUshu{y=A?4>kBR5VhcQAyhNs99nvkvki3
z0CiiaDC>xEu9C9E);bH(GG<FA6G5!4e}4bE)$?8s-B8!6MlQEyrtA3F)CfN)geA^S
zJqNyIhjZX>aT7lv26~pGMjo_GNB&SqM~a3~)j}{GS?x3tSSr{*o;}oaOq#-?bk(vq
zeo9)!x3chy2anQ`;+H3oPUaF@w-TiY1n@zw)h2H$;f|&|5tdjz&a6t$_TVbpe<&?7
zY*UKXI3kM+N33e(CTk9|W>q6QYoMw0F{o0{E30U9JVLc3pnj415o@BFPMqcxRtx>m
zfS{oXPi2QPx=C0@t=JUYqTym*hx3(y15WHIr#A(FFtvgM8hn5`1luZUU4x*tfKh6g
zZ<iiMV=eRuSC)uAm57#|+9!Y)e-}KjkhURZE=^lySI3^4hHeuUtVV(DH1SS#Zx%9W
z)*VXJOTvQ9@!f@SYo>wP0ZGCoVFmXKQEfJ!6)T<Z5><*Nr*1(p0$vtz<jsabrb1{h
zt%)ertV(V(RS9#cow^l)NAc`u0r0JQKt<nn1b8r!#E06Bx9L<5yToaTZ_x<`;sl9m
zMulX1DeTOa6${E4D>Ab<>}jorzj_!<aRKBVTR$e%IxitWja7+&lpC6n)mCYm_Kd4S
zWQ;xlFvnVEl8TA9Jsg#@4OKLn9|cKptca$mY9h;qRcLlj2oFE}?g#$_TOn_A>+N6w
DZQwY0

delta 2747
zcmV;s3Pkm)frtU9frtTsgaL#Cgad>Ggaw2Kga?EOgb9QSgbRcWgbjoagb#!egb{=i
zgcF1mgcXDqgcpPugc*bygd2n$gdKz)gdc<;v>{LSf7LrHqPQ~$jZHs*qd0J)u<w@)
z6?_5bAM7iH*b+MJ$eDtJL~x?u-Dk*SwKlDS4s_7;Z|xH#o+N@8_zrS137pG!{{LN7
zt5)q@d)21O-x8~_+XUUBoRr=^kzo_1ciia+2-I`gd*R8+&z5y_(6hYJl`$@#yf}@D
zR<tAYe`GMs<*43EcU5vOy)Nx2;0I&#cef*#tG71j;xZ2k^Y2oWm=^E?t0+yd9qVFR
z$2lFJqa*8SsjR7Znm1uc10buH4kR@Efz&R)(qhEk7rr9Lggu)EQffXWnAw|#Wmdl|
zP@AyC&KjbddLy+!52{obNEfr|GJ3CYXdTb%e=4<V8&-L<&br1D4}s7vcPG)HGE13+
zmd_!K%dhnmHR0n0yy%+DSx@U#rqG%mJNi@#<pa;6jXT&j8O2s<R|FEArgmpb<whnX
z2ZAzPgWE<0bsAQm(@ss8j}j-?W{fU?_F$FRIZFajo0mTxlMKjR2hs)=86;>==>8O3
ze?f>cU<OgldWM-y)DfR{E({2uSvYE&;+-hk{7qkv4j8MHnl$vDgaZIp6S^I)Vb|#s
z`OTD88?}mBh`S$`-)J$&YwC@Jl0~bVLL?!-Ep;GC25j_Oljvdt0J0#J5*2>xF<=9F
zsIj!a!;iqz$Yqf<3y^uM14`*a7A(@be=faFq9tJ3O=viky-@<BE?j>5_*BvADwb<$
z^0|~Vc8lKNaZw$#K+e=7X7wfmjr=6JeNz1dFLMzaM*T~gEJE%qNkiCAcBBM^QUGUd
zQ3OuXvLON;*?2EAbe(?b<l^$DV-lW!N)#|C)+2ty$M3)^lm4mQrY;Y%K$0_&e{fp^
zt`~KD3NUdE9uF>Loqh1W#Gs{WAH7RSlNY4|CH#lOzp%jI_l4pM><2sYs#F5w^1EY_
zMQS6M)Lk8y1_4eta)wLANSyWRuq+=qkFG<PmiYAI9-TTJX6^_&-LUM3PS>MY-fgnV
zJt1_p*?UU<qNL$dU}bZSQk)2(e>uq0<@b;8f`HVg$0Q*os|%c1fht&2EYcZI6@(=K
zrBk>Cu$&K&hIWq-DL!LT3&mYJN!}|-suQ?bYymn-qM{oKCxk^D@f5l>N(i|Xy?Wm)
zM3EKkZu`q09^VD+f}`AY2XsFke)Y{%{OVE{pWURnATI~@_#=jz63c3ee_8kHAf3J1
zGwpc5v~XY&Sk`re$fFXNL7O_UwFs$!6iwY72HP4y5Tp>$JRF_4EK*eJC9tU43YLh`
zAUdp2^YZ5xcS7poFXu6??k|6R@!u+Lyg^IjZ@kO<FTebfWMBUNLKV-e)e2Q3D-n})
zAcAoLb^#qB8E-YqVv9`Se;{oxa$_!qYyf-EC~Om9MR6q$9UzV71z7M~As!H;-oWxX
zz^-t#sP;U_EZGNGv$!P~xCR;T_N}sOU)BE)r{n*cZFajxx%LvixkkCR_Q(JG9uHOj
z-P~OH$Fn=Jx$@6v@8Gh^v)h|1CBTMDSNjYVYT7A=0E?mWhtBaXe~YSg0=v7GoPguu
zb5&~rq{>2dmrf|>8Hpp=RaFa)d^Ocg$cr>hsmxJFwv=KL=YeNhXrI>$#*$xyt1D}I
zycMqA`>=hV0Q=~h?a8Ctcy;YHyvM71ym|$%e)RlK;MI?x|L=J9ljpB#_#4TVkHH!f
z0m(Hfyt-Z>hOL&Wf1<MMm`c*uE%N+TV|cYE=xd)<<Ql4(VfHpOZT57)LERpELK>Yk
z^o#aAye=o30$x~RbW`y!*3!(|(@L+b{_}Rcdh*fI<dZky)wS2~9<T24>J_|temC&y
zr|$r-e)bw(MHa<Sx)Zcg*ww*AwG^tc6X#ia#V%VM-{QxVf2)~D(>*Dj74Y3MrgUvH
zPn+GsVJUNAK4H&M)FHa4z~DbbhXx!=u3ci!K^pvBBUV$q-S>B8ov^p!)t6rmvVN@=
zyz=_pW7R!Yy@FLgzZ+Qfi+6xkzx;QsdieR*9(<rHo!@!%z4dLKB|rVahq|hOS1+TQ
ztPi<#bKdflf6-`w2TMC_Ua6FGOoJoO98&cy=Fv&`b*yNshK_dWiW@ays4FofD`F%y
z5(~K~OGkmLr_qA0g0@judsj_t@xfP~K7RD%$(rBNP@<<_|HhXde4v+j`GxO(+&*4%
z4OMYOvy|qn1WHr)C8SAtRl?K`ZyDajurvr2P^osoe@%3z5_{gI=*)9=-Cpm(R_K<d
zu(YCaOcqMhM~-GU3z^Y*YaPjTDp8EC20to4ZHvR?a0EOK28i>u;B1$t3}4kHJ-q}A
zdY(~EO894;?~P#nc4PH0b(mLO%Hnsy@*93EwIG8F<BV<v4|MXT-nzw8xrtjFK0W24
zKXi0pf9g0rRxX#E)nqwbQcEY5uG$b6F1Sk6G*F<f)}?bDO{WXmA$Kgf?$i$;wD{Si
zo(=B<;7rjmSsZ#V)!n&+bG*vLbwN6b03-v{D@K<F62XJ*(2o;s5;DoDNV!*20;}>3
zQ5AK`aE_odKIXMb+PbvjV+S;A8bsC#I@De~e?s9+i##w`zOD^Q9C1Lo6TCTSG<Yui
zi2bXzt+>dFR-BRmpHm}|`VMAis~x_W{Ls~5qlvot%+0~biwZn;{?jcQqa?5lZb(8&
z&J%Y9+yzSvNWVguu;v<4+`K{U*+pK2#i{|a>{S>{Z<0&1WPS>BOSgcauqNY5CW7{c
zf3@e8HQNi@4X?pX&G10e*cPV*Hmpw?r<jTRnP(rX<(Ouj(HNcTrIu<iJzD;ekk@1#
zqKi7Bl_5M?C}O;gok$%aXjqemFRj?D4j5*tk|9#_Xe)A<;t9XPD_M2CDOv4^vyr?K
zWr^*qu=X&D^^_<eQUY(C!a%KePzo<Sf05a;-nN_}3NtHXpGH!$wFj?@3q;%4`Y~yA
zdC8t>h(yFO-Oxm!wo21%+mNxkHTnPoIFQVfG#k9_;b=N-5~I<y93at!Q8hbK^CvbK
zs!1UsC@8Nij(qmuTXt$30A5`1W%jfU#bRlAfU&FN&rRc|0Ys}ISUXLkQ+<ntf7;Pm
z_(kp|c~aDg-PHh`eA5U=`6=-xSWk#*Fv04zbiNCo7K_=MR)N=`NUO%zVke1>`YpC@
zCCw3_F@uT|XW3iwB~3R&EJhz^VkgG4z~(k84h<ojqGhEi^um$s8o3GCf{;yTvVFTq
z48bAQuK*(J=<J}QPSi+vivpO8e;d_$<20?YvY1w5l7{A7m5rslNuWf<Wa=4j*w^cb
zqLOxrkUiz@hK1C*1QDR|4?sh(ty0`JXle@pltvnNse&}u-08&GILP+ETevwmklKNI
zJL+gD7L7?GCxe=}LH5$#f+rejGO0<!_NeK4Y8r7Y2}`=j<p8OJ^|?wBZBI~j0J7nv
zYFLlt@U0s#b?X*LIRspN+!{jOmYJ@DG*d$@2~i94oO%ur#SZ6SB*jh809NRStjvR!
zNeBV=eHM*p!<_yms?`wdOO{8)p)Py{NU&Yq9UHWAQ{T!D-~ZuzUjWNtBB$%^U;so3
BIxGMH

diff --git a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
index 2418a6cde..d92a5f291 100644
--- a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
+++ b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
@@ -55,7 +55,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
                 id="dropdown-megamenu"
                 role="button"
               >
-                A link with mega menu
+                A link with dropdown
               </a>
               <div
                 aria-labelledby="dropdown-megamenu"
@@ -72,7 +72,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
                       class="me-2-5 bi icon--fluid"
                     >
                       <use
-                        xlink:href="#arrow-left"
+                        xlink:href="/icons.svg#arrow-left"
                       />
                     </svg>
                     Back
@@ -82,10 +82,10 @@ exports[`OE - navbar dark renders correctly 1`] = `
                   class="row position-relative"
                 >
                   <div
-                    class="col-12 col-lg-4"
+                    class="col-md-12 col-xl-3"
                   >
                     <div
-                      class="content-block py-3"
+                      class="content-block"
                     >
                       <h4>
                         Mega Menu Content Title
@@ -93,10 +93,23 @@ exports[`OE - navbar dark renders correctly 1`] = `
                       <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-12 col-lg-8"
+                    class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                   >
                     <div
                       class="navigation-items"
@@ -110,13 +123,20 @@ exports[`OE - navbar dark renders correctly 1`] = `
                           data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
-                          id="dropdown-inner-megamenu"
+                          id="dropdown-megamenu-inner"
                           role="button"
                         >
-                          A link with dropdown
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
                         </a>
                         <ul
-                          aria-labelledby="dropdown-inner-megamenu"
+                          aria-labelledby="dropdown-megamenu-inner"
                           class="dropdown-menu"
                         >
                           <li>
@@ -124,23 +144,47 @@ exports[`OE - navbar dark renders correctly 1`] = `
                               class="dropdown-item"
                               href="/example.html"
                             >
-                              I'm a link
+                              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>
-                            <button
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a button
-                            </button>
+                              Base Sub Category Item
+                            </a>
                           </li>
                         </ul>
                       </div>
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <div
                         class="dropdown dropend"
@@ -151,13 +195,20 @@ exports[`OE - navbar dark renders correctly 1`] = `
                           data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
-                          id="dropdown-inner-megamenu-2"
+                          id="dropdown-megamenu-inner-2"
                           role="button"
                         >
-                          A link with dropdown and column
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
                         </a>
                         <ul
-                          aria-labelledby="dropdown-inner-megamenu-2"
+                          aria-labelledby="dropdown-megamenu-inner-2"
                           class="dropdown-menu"
                         >
                           <li>
@@ -165,34 +216,40 @@ exports[`OE - navbar dark renders correctly 1`] = `
                               class="dropdown-item"
                               href="/example.html"
                             >
-                              I'm a link
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
                             </a>
                           </li>
                           <li>
-                            <button
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a button
-                            </button>
+                              Base Sub Category Item
+                            </a>
                           </li>
                           <li>
-                            <button
-                              aria-disabled="true"
+                            <a
                               class="dropdown-item"
-                              disabled="true"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a disabled button
-                            </button>
+                              Base Sub Category Item
+                            </a>
                           </li>
                           <li>
-                            <button
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a active button
-                            </button>
+                              Base Sub Category Item
+                            </a>
                           </li>
                         </ul>
                       </div>
@@ -213,17 +270,17 @@ exports[`OE - navbar dark renders correctly 1`] = `
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                     </div>
                   </div>
@@ -408,7 +465,7 @@ exports[`OE - navbar light renders correctly 1`] = `
                 id="dropdown-megamenu"
                 role="button"
               >
-                A link with mega menu
+                A link with dropdown
               </a>
               <div
                 aria-labelledby="dropdown-megamenu"
@@ -425,7 +482,7 @@ exports[`OE - navbar light renders correctly 1`] = `
                       class="me-2-5 bi icon--fluid"
                     >
                       <use
-                        xlink:href="#arrow-left"
+                        xlink:href="/icons.svg#arrow-left"
                       />
                     </svg>
                     Back
@@ -435,10 +492,10 @@ exports[`OE - navbar light renders correctly 1`] = `
                   class="row position-relative"
                 >
                   <div
-                    class="col-12 col-lg-4"
+                    class="col-md-12 col-xl-3"
                   >
                     <div
-                      class="content-block py-3"
+                      class="content-block"
                     >
                       <h4>
                         Mega Menu Content Title
@@ -446,10 +503,23 @@ exports[`OE - navbar light renders correctly 1`] = `
                       <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-12 col-lg-8"
+                    class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                   >
                     <div
                       class="navigation-items"
@@ -463,13 +533,20 @@ exports[`OE - navbar light renders correctly 1`] = `
                           data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
-                          id="dropdown-inner-megamenu"
+                          id="dropdown-megamenu-inner"
                           role="button"
                         >
-                          A link with dropdown
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
                         </a>
                         <ul
-                          aria-labelledby="dropdown-inner-megamenu"
+                          aria-labelledby="dropdown-megamenu-inner"
                           class="dropdown-menu"
                         >
                           <li>
@@ -477,23 +554,47 @@ exports[`OE - navbar light renders correctly 1`] = `
                               class="dropdown-item"
                               href="/example.html"
                             >
-                              I'm a link
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
                             </a>
                           </li>
                           <li>
-                            <button
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a button
-                            </button>
+                              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"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <div
                         class="dropdown dropend"
@@ -504,13 +605,20 @@ exports[`OE - navbar light renders correctly 1`] = `
                           data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
-                          id="dropdown-inner-megamenu-2"
+                          id="dropdown-megamenu-inner-2"
                           role="button"
                         >
-                          A link with dropdown and column
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
                         </a>
                         <ul
-                          aria-labelledby="dropdown-inner-megamenu-2"
+                          aria-labelledby="dropdown-megamenu-inner-2"
                           class="dropdown-menu"
                         >
                           <li>
@@ -518,34 +626,40 @@ exports[`OE - navbar light renders correctly 1`] = `
                               class="dropdown-item"
                               href="/example.html"
                             >
-                              I'm a link
+                              Base Sub Category Item
                             </a>
                           </li>
                           <li>
-                            <button
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a button
-                            </button>
+                              Base Sub Category Item
+                            </a>
                           </li>
                           <li>
-                            <button
-                              aria-disabled="true"
+                            <a
                               class="dropdown-item"
-                              disabled="true"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a disabled button
-                            </button>
+                              Base Sub Category Item
+                            </a>
                           </li>
                           <li>
-                            <button
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a active button
-                            </button>
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
                           </li>
                         </ul>
                       </div>
@@ -566,17 +680,17 @@ exports[`OE - navbar light renders correctly 1`] = `
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                     </div>
                   </div>
@@ -744,7 +858,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
               id="dropdown-megamenu"
               role="button"
             >
-              A link with mega menu
+              A link with dropdown
             </a>
             <div
               aria-labelledby="dropdown-megamenu"
@@ -761,7 +875,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                     class="me-2-5 bi icon--fluid"
                   >
                     <use
-                      xlink:href="#arrow-left"
+                      xlink:href="/icons.svg#arrow-left"
                     />
                   </svg>
                   Back
@@ -771,10 +885,10 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                 class="row position-relative"
               >
                 <div
-                  class="col-12 col-lg-4"
+                  class="col-md-12 col-xl-3"
                 >
                   <div
-                    class="content-block py-3"
+                    class="content-block"
                   >
                     <h4>
                       Mega Menu Content Title
@@ -782,10 +896,23 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                     <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-12 col-lg-8"
+                  class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                 >
                   <div
                     class="navigation-items"
@@ -799,13 +926,20 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                         data-bs-auto-close="false"
                         data-bs-toggle="dropdown"
                         href="/example.html"
-                        id="dropdown-inner-megamenu"
+                        id="dropdown-megamenu-inner"
                         role="button"
                       >
-                        A link with dropdown
+                        Base Category Item
+                        <svg
+                          class="ms-2-5 bi icon--fluid"
+                        >
+                          <use
+                            xlink:href="/icons.svg#chevron-right"
+                          />
+                        </svg>
                       </a>
                       <ul
-                        aria-labelledby="dropdown-inner-megamenu"
+                        aria-labelledby="dropdown-megamenu-inner"
                         class="dropdown-menu"
                       >
                         <li>
@@ -813,23 +947,47 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                             class="dropdown-item"
                             href="/example.html"
                           >
-                            I'm a link
+                            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>
-                          <button
+                          <a
                             class="dropdown-item"
-                            type="button"
+                            href="/example.html"
                           >
-                            I'm a button
-                          </button>
+                            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"
                     >
-                      A simple link!
+                      Base Category Item
                     </a>
                     <div
                       class="dropdown dropend"
@@ -840,13 +998,20 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                         data-bs-auto-close="false"
                         data-bs-toggle="dropdown"
                         href="/example.html"
-                        id="dropdown-inner-megamenu-2"
+                        id="dropdown-megamenu-inner-2"
                         role="button"
                       >
-                        A link with dropdown and column
+                        Base Category Item
+                        <svg
+                          class="ms-2-5 bi icon--fluid"
+                        >
+                          <use
+                            xlink:href="/icons.svg#chevron-right"
+                          />
+                        </svg>
                       </a>
                       <ul
-                        aria-labelledby="dropdown-inner-megamenu-2"
+                        aria-labelledby="dropdown-megamenu-inner-2"
                         class="dropdown-menu"
                       >
                         <li>
@@ -854,34 +1019,40 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                             class="dropdown-item"
                             href="/example.html"
                           >
-                            I'm a link
+                            Base Sub Category Item
                           </a>
                         </li>
                         <li>
-                          <button
+                          <a
                             class="dropdown-item"
-                            type="button"
+                            href="/example.html"
                           >
-                            I'm a button
-                          </button>
+                            Base Sub Category Item
+                          </a>
                         </li>
                         <li>
-                          <button
-                            aria-disabled="true"
+                          <a
                             class="dropdown-item"
-                            disabled="true"
-                            type="button"
+                            href="/example.html"
                           >
-                            I'm a disabled button
-                          </button>
+                            Base Sub Category Item
+                          </a>
                         </li>
                         <li>
-                          <button
+                          <a
                             class="dropdown-item"
-                            type="button"
+                            href="/example.html"
                           >
-                            I'm a active button
-                          </button>
+                            Base Sub Category Item
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            href="/example.html"
+                          >
+                            Base Sub Category Item
+                          </a>
                         </li>
                       </ul>
                     </div>
@@ -902,17 +1073,17 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                     <a
                       href="/example.html"
                     >
-                      A simple link!
+                      Base Category Item
                     </a>
                     <a
                       href="/example.html"
                     >
-                      A simple link!
+                      Base Category Item
                     </a>
                     <a
                       href="/example.html"
                     >
-                      A simple link!
+                      Base Category Item
                     </a>
                   </div>
                 </div>
@@ -1096,7 +1267,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                 id="dropdown-megamenu"
                 role="button"
               >
-                A link with mega menu
+                A link with dropdown
               </a>
               <div
                 aria-labelledby="dropdown-megamenu"
@@ -1113,7 +1284,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                       class="me-2-5 bi icon--fluid"
                     >
                       <use
-                        xlink:href="#arrow-left"
+                        xlink:href="/icons.svg#arrow-left"
                       />
                     </svg>
                     Back
@@ -1123,10 +1294,10 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                   class="row position-relative"
                 >
                   <div
-                    class="col-12 col-lg-4"
+                    class="col-md-12 col-xl-3"
                   >
                     <div
-                      class="content-block py-3"
+                      class="content-block"
                     >
                       <h4>
                         Mega Menu Content Title
@@ -1134,10 +1305,23 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                       <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-12 col-lg-8"
+                    class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                   >
                     <div
                       class="navigation-items"
@@ -1151,13 +1335,20 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                           data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
-                          id="dropdown-inner-megamenu"
+                          id="dropdown-megamenu-inner"
                           role="button"
                         >
-                          A link with dropdown
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
                         </a>
                         <ul
-                          aria-labelledby="dropdown-inner-megamenu"
+                          aria-labelledby="dropdown-megamenu-inner"
                           class="dropdown-menu"
                         >
                           <li>
@@ -1165,23 +1356,47 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                               class="dropdown-item"
                               href="/example.html"
                             >
-                              I'm a link
+                              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>
-                            <button
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a button
-                            </button>
+                              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"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <div
                         class="dropdown dropend"
@@ -1192,13 +1407,20 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                           data-bs-auto-close="false"
                           data-bs-toggle="dropdown"
                           href="/example.html"
-                          id="dropdown-inner-megamenu-2"
+                          id="dropdown-megamenu-inner-2"
                           role="button"
                         >
-                          A link with dropdown and column
+                          Base Category Item
+                          <svg
+                            class="ms-2-5 bi icon--fluid"
+                          >
+                            <use
+                              xlink:href="/icons.svg#chevron-right"
+                            />
+                          </svg>
                         </a>
                         <ul
-                          aria-labelledby="dropdown-inner-megamenu-2"
+                          aria-labelledby="dropdown-megamenu-inner-2"
                           class="dropdown-menu"
                         >
                           <li>
@@ -1206,34 +1428,40 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                               class="dropdown-item"
                               href="/example.html"
                             >
-                              I'm a link
+                              Base Sub Category Item
                             </a>
                           </li>
                           <li>
-                            <button
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a button
-                            </button>
+                              Base Sub Category Item
+                            </a>
                           </li>
                           <li>
-                            <button
-                              aria-disabled="true"
+                            <a
                               class="dropdown-item"
-                              disabled="true"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a disabled button
-                            </button>
+                              Base Sub Category Item
+                            </a>
                           </li>
                           <li>
-                            <button
+                            <a
                               class="dropdown-item"
-                              type="button"
+                              href="/example.html"
                             >
-                              I'm a active button
-                            </button>
+                              Base Sub Category Item
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              class="dropdown-item"
+                              href="/example.html"
+                            >
+                              Base Sub Category Item
+                            </a>
                           </li>
                         </ul>
                       </div>
@@ -1254,17 +1482,17 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                       <a
                         href="/example.html"
                       >
-                        A simple link!
+                        Base Category Item
                       </a>
                     </div>
                   </div>
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 bbcfd6630..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
@@ -136,7 +136,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -1582,7 +1654,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -1609,10 +1681,10 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -1620,10 +1692,23 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -1637,13 +1722,20 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1651,23 +1743,62 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -1678,13 +1809,20 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1692,34 +1830,40 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -1740,17 +1884,17 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -2996,7 +3140,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -3023,10 +3167,10 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -3034,10 +3178,23 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -3051,13 +3208,20 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -3065,23 +3229,62 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.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"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -3092,13 +3295,20 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -3106,34 +3316,40 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -3154,17 +3370,17 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-event/__snapshots__/event.test.js.snap b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
index 6b1f78bc3..fa558e541 100644
--- a/src/compositions/bcl-event/__snapshots__/event.test.js.snap
+++ b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - event listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - event listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - event listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - event listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - event listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - event listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - event listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - event listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -2314,7 +2386,7 @@ exports[`OE - event page renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -2341,10 +2413,10 @@ exports[`OE - event page renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -2352,10 +2424,23 @@ exports[`OE - event page renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -2369,13 +2454,20 @@ exports[`OE - event page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2383,23 +2475,62 @@ exports[`OE - event page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -2410,13 +2541,20 @@ exports[`OE - event page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2424,34 +2562,40 @@ exports[`OE - event page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -2472,17 +2616,17 @@ exports[`OE - event page renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
index 9805eb9a8..3aaf66b9d 100644
--- a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
+++ b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -1798,7 +1870,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -1825,10 +1897,10 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -1836,10 +1908,23 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -1853,13 +1938,20 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1867,23 +1959,62 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -1894,13 +2025,20 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1908,34 +2046,40 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -1956,17 +2100,17 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-group/__snapshots__/group.test.js.snap b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
index 33d0e7586..704d1d225 100644
--- a/src/compositions/bcl-group/__snapshots__/group.test.js.snap
+++ b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - Group landing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Group landing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Group landing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Group landing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Group landing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Group landing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Group landing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Group landing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -2251,7 +2323,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -2278,10 +2350,10 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -2289,10 +2361,23 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -2306,13 +2391,20 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2320,23 +2412,62 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -2347,13 +2478,20 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2361,34 +2499,40 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -2409,17 +2553,17 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -4328,7 +4472,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -4355,10 +4499,10 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -4366,10 +4510,23 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -4383,13 +4540,20 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4397,23 +4561,62 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -4424,13 +4627,20 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4438,34 +4648,40 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -4486,17 +4702,17 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -6252,7 +6468,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -6279,10 +6495,10 @@ exports[`OE - Group listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -6290,10 +6506,23 @@ exports[`OE - Group listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -6307,13 +6536,20 @@ exports[`OE - Group listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -6321,23 +6557,62 @@ exports[`OE - Group listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -6348,13 +6623,20 @@ exports[`OE - Group listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -6362,34 +6644,40 @@ exports[`OE - Group listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -6410,17 +6698,17 @@ exports[`OE - Group listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-header/__snapshots__/header.test.js.snap b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
index f450a8cba..03c84f583 100644
--- a/src/compositions/bcl-header/__snapshots__/header.test.js.snap
+++ b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
@@ -187,7 +187,7 @@ exports[`OE - Header EC renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -214,10 +214,10 @@ exports[`OE - Header EC renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -225,10 +225,23 @@ exports[`OE - Header EC renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -242,13 +255,20 @@ exports[`OE - Header EC renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -256,23 +276,62 @@ exports[`OE - Header EC renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -283,13 +342,20 @@ exports[`OE - Header EC renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -297,34 +363,40 @@ exports[`OE - Header EC renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -345,17 +417,17 @@ exports[`OE - Header EC renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -1155,7 +1227,7 @@ exports[`OE - Header EU renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -1182,10 +1254,10 @@ exports[`OE - Header EU renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -1193,10 +1265,23 @@ exports[`OE - Header EU renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -1210,13 +1295,20 @@ exports[`OE - Header EU renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1224,23 +1316,62 @@ exports[`OE - Header EU renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -1251,13 +1382,20 @@ exports[`OE - Header EU renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1265,34 +1403,40 @@ exports[`OE - Header EU renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -1313,17 +1457,17 @@ exports[`OE - Header EU renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -2117,7 +2261,7 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -2144,10 +2288,10 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -2155,10 +2299,23 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -2172,13 +2329,20 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2186,23 +2350,62 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.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"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -2213,13 +2416,20 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2227,34 +2437,40 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -2275,17 +2491,17 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
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 ceec793fa..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
@@ -136,7 +136,7 @@ exports[`OE - Landing page renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Landing page renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Landing page renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Landing page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Landing page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Landing page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Landing page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Landing page renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
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
index d89499df9..3f3c925f2 100644
--- a/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
+++ b/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
@@ -43,10 +43,10 @@ exports[`OE - Mega Menu renders correctly 1`] = `
         class="row position-relative"
       >
         <div
-          class="col-12 col-lg-4"
+          class="col-md-12 col-xl-3"
         >
           <div
-            class="content-block py-3"
+            class="content-block"
           >
             <h4>
               Mega Menu Content Title
@@ -54,10 +54,23 @@ exports[`OE - Mega Menu renders correctly 1`] = `
             <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-12 col-lg-8"
+          class="col-md-12 col-xl-9 mb-3 mb-xl-0"
         >
           <div
             class="navigation-items"
@@ -74,7 +87,14 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                 id="dropdown-megamenu-inner"
                 role="button"
               >
-                A link with dropdown
+                Base Category Item
+                <svg
+                  class="ms-2-5 bi icon--fluid"
+                >
+                  <use
+                    xlink:href="#chevron-right"
+                  />
+                </svg>
               </a>
               <ul
                 aria-labelledby="dropdown-megamenu-inner"
@@ -85,23 +105,47 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                     class="dropdown-item"
                     href="/example.html"
                   >
-                    I'm a link
+                    Base Sub Category Item
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="dropdown-item"
+                    href="/example.html"
+                  >
+                    Base Sub Category Item
                   </a>
                 </li>
                 <li>
-                  <button
+                  <a
                     class="dropdown-item"
-                    type="button"
+                    href="/example.html"
                   >
-                    I'm a button
-                  </button>
+                    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"
             >
-              A simple link!
+              Base Category Item
             </a>
             <div
               class="dropdown dropend"
@@ -115,7 +159,14 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                 id="dropdown-megamenu-inner-2"
                 role="button"
               >
-                A link with dropdown and column
+                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"
@@ -126,23 +177,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                     class="dropdown-item"
                     href="/example.html"
                   >
-                    I'm a link
-                  </a>
-                </li>
-                <li>
-                  <a
-                    class="dropdown-item"
-                    href="/example.html"
-                  >
-                    I'm a link
-                  </a>
-                </li>
-                <li>
-                  <a
-                    class="dropdown-item"
-                    href="/example.html"
-                  >
-                    I'm a link
+                    Base Sub Category Item
                   </a>
                 </li>
                 <li>
@@ -150,7 +185,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                     class="dropdown-item"
                     href="/example.html"
                   >
-                    I'm a link
+                    Base Sub Category Item
                   </a>
                 </li>
                 <li>
@@ -158,7 +193,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                     class="dropdown-item"
                     href="/example.html"
                   >
-                    I'm a link
+                    Base Sub Category Item
                   </a>
                 </li>
                 <li>
@@ -166,7 +201,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                     class="dropdown-item"
                     href="/example.html"
                   >
-                    I'm a link
+                    Base Sub Category Item
                   </a>
                 </li>
                 <li>
@@ -174,43 +209,9 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                     class="dropdown-item"
                     href="/example.html"
                   >
-                    I'm a link
+                    Base Sub Category Item
                   </a>
                 </li>
-                <li>
-                  <a
-                    class="dropdown-item"
-                    href="/example.html"
-                  >
-                    I'm a link
-                  </a>
-                </li>
-                <li>
-                  <button
-                    class="dropdown-item"
-                    type="button"
-                  >
-                    I'm a button
-                  </button>
-                </li>
-                <li>
-                  <button
-                    aria-disabled="true"
-                    class="dropdown-item"
-                    disabled="true"
-                    type="button"
-                  >
-                    I'm a disabled button
-                  </button>
-                </li>
-                <li>
-                  <button
-                    class="dropdown-item"
-                    type="button"
-                  >
-                    I'm a active button
-                  </button>
-                </li>
               </ul>
             </div>
             <div
@@ -230,17 +231,17 @@ exports[`OE - Mega Menu renders correctly 1`] = `
             <a
               href="/example.html"
             >
-              A simple link!
+              Base Category Item
             </a>
             <a
               href="/example.html"
             >
-              A simple link!
+              Base Category Item
             </a>
             <a
               href="/example.html"
             >
-              A simple link!
+              Base Category Item
             </a>
           </div>
         </div>
diff --git a/src/compositions/bcl-mega-menu/data.js b/src/compositions/bcl-mega-menu/data.js
index e1095313b..936c971d7 100644
--- a/src/compositions/bcl-mega-menu/data.js
+++ b/src/compositions/bcl-mega-menu/data.js
@@ -4,96 +4,90 @@ module.exports = {
     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: "A link with dropdown",
+        label: "Base Category Item",
         path: "/example.html",
       },
       items: [
         {
-          label: "I'm a link",
+          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: "I'm a button",
-          button: true,
+          label: "Base Sub Category Item",
+          path: "/example.html",
+        },
+        {
+          label: "Base Sub Category Item",
+          path: "/example.html",
         },
       ],
     },
     {
-      label: "A simple link!",
+      label: "Base Category Item",
       path: "/example.html",
     },
     {
       id: "dropdown-megamenu-inner-2",
       trigger: {
-        label: "A link with dropdown and column",
+        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: "I'm a link",
-          path: "/example.html",
-        },
-        {
-          label: "I'm a link",
-          path: "/example.html",
-        },
-        {
-          label: "I'm a link",
-          path: "/example.html",
-        },
-        {
-          label: "I'm a link",
+          label: "Base Sub Category Item",
           path: "/example.html",
         },
         {
-          label: "I'm a link",
+          label: "Base Sub Category Item",
           path: "/example.html",
         },
         {
-          label: "I'm a link",
+          label: "Base Sub Category Item",
           path: "/example.html",
         },
         {
-          label: "I'm a link",
+          label: "Base Sub Category Item",
           path: "/example.html",
         },
         {
-          label: "I'm a link",
+          label: "Base Sub Category Item",
           path: "/example.html",
         },
-        {
-          label: "I'm a button",
-          button: true,
-        },
-        {
-          label: "I'm a disabled button",
-          button: true,
-          disabled: true,
-        },
-        {
-          label: "I'm a active button",
-          button: true,
-        },
       ],
     },
     {
-      label: "A simple link!",
+      label: "Base Category Item",
       path: "/example.html",
     },
     {
-      label: "A simple link!",
+      label: "Base Category Item",
       path: "/example.html",
     },
     {
-      label: "A simple link!",
+      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
index cca1fa82f..d350e8fae 100644
--- a/src/compositions/bcl-mega-menu/mega-menu.html.twig
+++ b/src/compositions/bcl-mega-menu/mega-menu.html.twig
@@ -5,6 +5,8 @@
   - 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[])
@@ -23,6 +25,8 @@
 {% 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') %}
@@ -79,23 +83,54 @@
     </div>
     <div class="row position-relative">
       {% if content_block is defined %}
-      <div class="col-12 col-lg-4">
-        <div class="content-block py-3">
+      <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-12 col-lg-8">
+      <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 %}
diff --git a/src/compositions/bcl-mega-menu/mega-menu.story.js b/src/compositions/bcl-mega-menu/mega-menu.story.js
index 7387526bc..c1dbc3598 100644
--- a/src/compositions/bcl-mega-menu/mega-menu.story.js
+++ b/src/compositions/bcl-mega-menu/mega-menu.story.js
@@ -1,13 +1,10 @@
-import { withDesign } from "storybook-addon-designs";
 import { correctPaths } from "@openeuropa/bcl-story-utils";
-import withCode from "@openeuropa/storybook-addon-code";
 
 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",
-  decorators: [withCode, withDesign],
 };
 
 const applyArgs = (data) => {
diff --git a/src/compositions/bcl-news/__snapshots__/news.test.js.snap b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
index 2f97531c2..52eb2d3ea 100644
--- a/src/compositions/bcl-news/__snapshots__/news.test.js.snap
+++ b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - News full page renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - News full page renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - News full page renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - News full page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - News full page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - News full page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - News full page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - News full page renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -1500,7 +1572,7 @@ exports[`OE - News listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -1527,10 +1599,10 @@ exports[`OE - News listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -1538,10 +1610,23 @@ exports[`OE - News listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -1555,13 +1640,20 @@ exports[`OE - News listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1569,23 +1661,62 @@ exports[`OE - News listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -1596,13 +1727,20 @@ exports[`OE - News listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1610,34 +1748,40 @@ exports[`OE - News listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -1658,17 +1802,17 @@ exports[`OE - News listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-page/__snapshots__/page.test.js.snap b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
index b6a28c10d..a511fa018 100644
--- a/src/compositions/bcl-page/__snapshots__/page.test.js.snap
+++ b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Page Page renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Page Page renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Page Page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Page Page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Page Page renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Page Page renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Page Page renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-person/__snapshots__/person.test.js.snap b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
index 09727fc20..0e0b6a406 100644
--- a/src/compositions/bcl-person/__snapshots__/person.test.js.snap
+++ b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - Person details renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Person details renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Person details renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Person details renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Person details renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Person details renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Person details renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Person details renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -1631,7 +1703,7 @@ exports[`OE - Person listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -1658,10 +1730,10 @@ exports[`OE - Person listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -1669,10 +1741,23 @@ exports[`OE - Person listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -1686,13 +1771,20 @@ exports[`OE - Person listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1700,23 +1792,62 @@ exports[`OE - Person listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -1727,13 +1858,20 @@ exports[`OE - Person listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1741,34 +1879,40 @@ exports[`OE - Person listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -1789,17 +1933,17 @@ exports[`OE - Person listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
index d12c5cb8a..b3c8081d9 100644
--- a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
+++ b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -2043,7 +2115,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -2070,10 +2142,10 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -2081,10 +2153,23 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -2098,13 +2183,20 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2112,23 +2204,62 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -2139,13 +2270,20 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2153,34 +2291,40 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -2201,17 +2345,17 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -3949,7 +4093,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -3976,10 +4120,10 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -3987,10 +4131,23 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -4004,13 +4161,20 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4018,23 +4182,62 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -4045,13 +4248,20 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4059,34 +4269,40 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -4107,17 +4323,17 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-project/__snapshots__/project.test.js.snap b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
index d403c8fbf..f0a32d586 100644
--- a/src/compositions/bcl-project/__snapshots__/project.test.js.snap
+++ b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
@@ -1995,7 +1995,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -2022,10 +2022,10 @@ exports[`OE - Project listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -2033,10 +2033,23 @@ exports[`OE - Project listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -2050,13 +2063,20 @@ exports[`OE - Project listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2064,23 +2084,62 @@ exports[`OE - Project listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -2091,13 +2150,20 @@ exports[`OE - Project listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2105,34 +2171,40 @@ exports[`OE - Project listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -2153,17 +2225,17 @@ exports[`OE - Project listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -3990,7 +4062,7 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -4017,10 +4089,10 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -4028,10 +4100,23 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -4045,13 +4130,20 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4059,23 +4151,62 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -4086,13 +4217,20 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4100,34 +4238,40 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -4148,17 +4292,17 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -7228,7 +7372,7 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -7255,10 +7399,10 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -7266,10 +7410,23 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -7283,13 +7440,20 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -7297,23 +7461,62 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -7324,13 +7527,20 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -7338,34 +7548,40 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -7386,17 +7602,17 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -10466,7 +10682,7 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -10493,10 +10709,10 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -10504,10 +10720,23 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -10521,13 +10750,20 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -10535,23 +10771,62 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -10562,13 +10837,20 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -10576,34 +10858,40 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -10624,17 +10912,17 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
index 6ed568fda..2bc000dc0 100644
--- a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
+++ b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -1850,7 +1922,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -1877,10 +1949,10 @@ exports[`OE - Publication details renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -1888,10 +1960,23 @@ exports[`OE - Publication details renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -1905,13 +1990,20 @@ exports[`OE - Publication details renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1919,23 +2011,62 @@ exports[`OE - Publication details renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -1946,13 +2077,20 @@ exports[`OE - Publication details renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -1960,34 +2098,40 @@ exports[`OE - Publication details renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -2008,17 +2152,17 @@ exports[`OE - Publication details renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -3573,7 +3717,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -3600,10 +3744,10 @@ exports[`OE - Publication listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -3611,10 +3755,23 @@ exports[`OE - Publication listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -3628,13 +3785,20 @@ exports[`OE - Publication listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -3642,23 +3806,62 @@ exports[`OE - Publication listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -3669,13 +3872,20 @@ exports[`OE - Publication listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -3683,34 +3893,40 @@ exports[`OE - Publication listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -3731,17 +3947,17 @@ exports[`OE - Publication listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
index 8b33d1227..a182f5237 100644
--- a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
+++ b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Subscription renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Subscription renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Subscription renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Subscription renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Subscription renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Subscription renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Subscription renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-user/__snapshots__/user.test.js.snap b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
index e520e6fa0..f44d9a806 100644
--- a/src/compositions/bcl-user/__snapshots__/user.test.js.snap
+++ b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
@@ -178,7 +178,7 @@ exports[`OE - User list renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -205,10 +205,10 @@ exports[`OE - User list renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -216,10 +216,23 @@ exports[`OE - User list renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -233,13 +246,20 @@ exports[`OE - User list renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -247,23 +267,62 @@ exports[`OE - User list renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="see-all-button dropdown-item"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -274,13 +333,20 @@ exports[`OE - User list renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -288,34 +354,40 @@ exports[`OE - User list renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -336,17 +408,17 @@ exports[`OE - User list renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -1974,7 +2046,7 @@ exports[`OE - User renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -2001,10 +2073,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -2012,10 +2084,23 @@ exports[`OE - User renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -2029,13 +2114,20 @@ exports[`OE - User renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2043,23 +2135,62 @@ exports[`OE - User renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -2070,13 +2201,20 @@ exports[`OE - User renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2084,34 +2222,40 @@ exports[`OE - User renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -2132,17 +2276,17 @@ exports[`OE - User renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -4337,7 +4481,7 @@ exports[`OE - User terms renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -4364,10 +4508,10 @@ exports[`OE - User terms renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -4375,10 +4519,23 @@ exports[`OE - User terms renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -4392,13 +4549,20 @@ exports[`OE - User terms renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4406,23 +4570,62 @@ exports[`OE - User terms renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -4433,13 +4636,20 @@ exports[`OE - User terms renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4447,34 +4657,40 @@ exports[`OE - User terms renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -4495,17 +4711,17 @@ exports[`OE - User terms renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
index 5fbe3b964..c473f4f7f 100644
--- a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
+++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
@@ -136,7 +136,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -163,10 +163,10 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -174,10 +174,23 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -191,13 +204,20 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -205,23 +225,62 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -232,13 +291,20 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -246,34 +312,40 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -294,17 +366,17 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -2348,7 +2420,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -2375,10 +2447,10 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -2386,10 +2458,23 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -2403,13 +2488,20 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2417,23 +2509,62 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                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>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -2444,13 +2575,20 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -2458,34 +2596,40 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -2506,17 +2650,17 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
@@ -4559,7 +4703,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                   id="dropdown-megamenu"
                   role="button"
                 >
-                  A link with mega menu
+                  A link with dropdown
                 </a>
                 <div
                   aria-labelledby="dropdown-megamenu"
@@ -4586,10 +4730,10 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                     class="row position-relative"
                   >
                     <div
-                      class="col-12 col-lg-4"
+                      class="col-md-12 col-xl-3"
                     >
                       <div
-                        class="content-block py-3"
+                        class="content-block"
                       >
                         <h4>
                           Mega Menu Content Title
@@ -4597,10 +4741,23 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                         <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-12 col-lg-8"
+                      class="col-md-12 col-xl-9 mb-3 mb-xl-0"
                     >
                       <div
                         class="navigation-items"
@@ -4614,13 +4771,20 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu"
+                            id="dropdown-megamenu-inner"
                             role="button"
                           >
-                            A link with dropdown
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu"
+                            aria-labelledby="dropdown-megamenu-inner"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4628,23 +4792,62 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                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"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <div
                           class="dropdown dropend"
@@ -4655,13 +4858,20 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                             data-bs-auto-close="false"
                             data-bs-toggle="dropdown"
                             href="/example.html"
-                            id="dropdown-inner-megamenu-2"
+                            id="dropdown-megamenu-inner-2"
                             role="button"
                           >
-                            A link with dropdown and column
+                            Base Category Item
+                            <svg
+                              class="ms-2-5 bi icon--fluid"
+                            >
+                              <use
+                                xlink:href="/icons.svg#chevron-right"
+                              />
+                            </svg>
                           </a>
                           <ul
-                            aria-labelledby="dropdown-inner-megamenu-2"
+                            aria-labelledby="dropdown-megamenu-inner-2"
                             class="dropdown-menu"
                           >
                             <li>
@@ -4669,34 +4879,40 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                                 class="dropdown-item"
                                 href="/example.html"
                               >
-                                I'm a link
+                                Base Sub Category Item
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                class="dropdown-item"
+                                href="/example.html"
+                              >
+                                Base Sub Category Item
                               </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
-                                aria-disabled="true"
+                              <a
                                 class="dropdown-item"
-                                disabled="true"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a disabled button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                             <li>
-                              <button
+                              <a
                                 class="dropdown-item"
-                                type="button"
+                                href="/example.html"
                               >
-                                I'm a active button
-                              </button>
+                                Base Sub Category Item
+                              </a>
                             </li>
                           </ul>
                         </div>
@@ -4717,17 +4933,17 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                         <a
                           href="/example.html"
                         >
-                          A simple link!
+                          Base Category Item
                         </a>
                       </div>
                     </div>
diff --git a/src/data/header/data--navbar.js b/src/data/header/data--navbar.js
index 9034ed9e6..3d7c8d6cd 100644
--- a/src/data/header/data--navbar.js
+++ b/src/data/header/data--navbar.js
@@ -50,72 +50,99 @@ module.exports = {
         icon_path: "/icons.svg",
         id: "dropdown-megamenu",
         trigger: {
-          label: "A link with mega menu",
+          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-inner-megamenu",
+            id: "dropdown-megamenu-inner",
             trigger: {
-              label: "A link with dropdown",
+              label: "Base Category Item",
+              path: "/example.html",
+            },
+            see_all: {
+              label: "See all",
               path: "/example.html",
             },
             items: [
               {
-                label: "I'm a link",
+                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: "I'm a button",
-                button: true,
+                label: "Base Sub Category Item",
+                path: "/example.html",
               },
             ],
           },
           {
-            label: "A simple link!",
+            label: "Base Category Item",
             path: "/example.html",
           },
           {
-            id: "dropdown-inner-megamenu-2",
+            id: "dropdown-megamenu-inner-2",
             trigger: {
-              label: "A link with dropdown and column",
+              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: "I'm a link",
+                label: "Base Sub Category Item",
                 path: "/example.html",
               },
               {
-                label: "I'm a button",
-                button: true,
+                label: "Base Sub Category Item",
+                path: "/example.html",
               },
               {
-                label: "I'm a disabled button",
-                button: true,
-                disabled: true,
+                label: "Base Sub Category Item",
+                path: "/example.html",
               },
               {
-                label: "I'm a active button",
-                button: true,
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
               },
             ],
           },
           {
-            label: "A simple link!",
+            label: "Base Category Item",
             path: "/example.html",
           },
           {
-            label: "A simple link!",
+            label: "Base Category Item",
             path: "/example.html",
           },
           {
-            label: "A simple link!",
+            label: "Base Category Item",
             path: "/example.html",
           },
         ],
diff --git a/src/data/navbar/data.js b/src/data/navbar/data.js
index 57f1c98f9..e519019a0 100644
--- a/src/data/navbar/data.js
+++ b/src/data/navbar/data.js
@@ -13,74 +13,102 @@ module.exports = {
       {
         mega_menu: true,
         link: true,
+        icon_path: "/icons.svg",
         id: "dropdown-megamenu",
         trigger: {
-          label: "A link with mega menu",
+          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-inner-megamenu",
+            id: "dropdown-megamenu-inner",
             trigger: {
-              label: "A link with dropdown",
+              label: "Base Category Item",
               path: "/example.html",
             },
             items: [
               {
-                label: "I'm a link",
+                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: "I'm a button",
-                button: true,
+                label: "Base Sub Category Item",
+                path: "/example.html",
               },
             ],
           },
           {
-            label: "A simple link!",
+            label: "Base Category Item",
             path: "/example.html",
           },
           {
-            id: "dropdown-inner-megamenu-2",
+            id: "dropdown-megamenu-inner-2",
             trigger: {
-              label: "A link with dropdown and column",
+              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: "I'm a link",
+                label: "Base Sub Category Item",
                 path: "/example.html",
               },
               {
-                label: "I'm a button",
-                button: true,
+                label: "Base Sub Category Item",
+                path: "/example.html",
               },
               {
-                label: "I'm a disabled button",
-                button: true,
-                disabled: true,
+                label: "Base Sub Category Item",
+                path: "/example.html",
               },
               {
-                label: "I'm a active button",
-                button: true,
+                label: "Base Sub Category Item",
+                path: "/example.html",
+              },
+              {
+                label: "Base Sub Category Item",
+                path: "/example.html",
               },
             ],
           },
           {
-            label: "A simple link!",
+            label: "Base Category Item",
             path: "/example.html",
           },
           {
-            label: "A simple link!",
+            label: "Base Category Item",
             path: "/example.html",
           },
           {
-            label: "A simple link!",
+            label: "Base Category Item",
             path: "/example.html",
           },
         ],
diff --git a/src/themes/default/src/js/mega-menu/mega-menu.js b/src/themes/default/src/js/mega-menu/mega-menu.js
index 7a26fc39c..4fb56453d 100644
--- a/src/themes/default/src/js/mega-menu/mega-menu.js
+++ b/src/themes/default/src/js/mega-menu/mega-menu.js
@@ -15,10 +15,9 @@ class MegaMenu {
 
   addEventListeners() {
     EventHandler.on(this.parentToggle, "shown.bs.dropdown", () => {
-      if (!this.childToggles.length) return;
       if (!window.matchMedia("(min-width: 992px)").matches) return;
+      if (this.childToggles.some(toggle => toggle.parentElement.classList.contains("show"))) return;
       const firstToggle = this.childToggles[0];
-      if (firstToggle.parentElement.classList.contains("show")) return;
       Dropdown.getOrCreateInstance(firstToggle).show();
     });
     this.childToggles.forEach((toggle) => {
diff --git a/src/themes/default/src/scss/_mega-menu.scss b/src/themes/default/src/scss/_mega-menu.scss
index 2d98a78c8..1c7e67892 100644
--- a/src/themes/default/src/scss/_mega-menu.scss
+++ b/src/themes/default/src/scss/_mega-menu.scss
@@ -16,7 +16,10 @@
     width: 100%;
     padding: 0 map-get($spacers, 3);
     border-radius: 0;
-    border: 1px solid var(--bs-dropdown-border-color);
+    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 {
@@ -37,43 +40,81 @@
       position: relative;
       height: 100%;
       margin: 0 -1rem;
-      padding: 0 map-get($spacers, 3);
+      padding: map-get($spacers, 3);
       &:after {
-        bottom: 0;
-        box-shadow: 4px 0 10px 0 rgba(224, 229, 245, 0.5);
         content: "";
         pointer-events: none;
         position: absolute;
-        right: 0;
-        top: 0;
-        width: 10px;
+      }
+    }
+    .content-link {
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
       }
     }
     .navigation-items {
       width: 100%;
       height: 100%;
-      .dropdown-toggle,
-      > a {
-        padding: map-get($spacers, 2) map-get($spacers, "2-5");
-      }
       > a,
-      > .dropdown {
-        border-left: 4px solid transparent;
-        display: block;
-        &.active {
-          border-left-color: $primary;
+      > 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 {
-          background: $blue-50;
-          border-left-color: $primary;
+          text-decoration: underline;
         }
       }
-      a {
+      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;
-        padding: 0;
+        &:has(.show) {
+          background: $blue-50;
+          & + .collapse {
+            display: block;
+          }
+        }
+        &:has(+ .collapse) {
+          .dropdown-menu {
+            height: 50%;
+          }
+        }
         .dropdown-menu {
           transform: none !important;
           right: auto !important;
@@ -85,52 +126,31 @@
           position: absolute;
           padding: 0;
           border-radius: 0;
-          background: $blue-50;
+          background: $neutral-bg-subtle;
           margin: 0;
           .dropdown-item {
-            white-space: normal;
-            padding: map-get($spacers, 2) map-get($spacers, "2-5");
             color: $link-color;
             &:hover {
               background: transparent;
               text-decoration: underline;
             }
-          }
-        }
-        &:has(.show) {
-          background: $blue-50;
-          border-left-color: $primary;
-          & + .collapse {
-            display: block;
-          }
-        }
-        .dropdown-toggle {
-          white-space: normal;
-          display: block;
-          position: relative;
-          &:after {
-            top: 50%;
-            transform: translateY(-50%);
-            position: absolute;
-            right: 6px;
-          }
-          &.show {
-            position: absolute;
-            bottom: 100%;
-            z-index: 100;
-            color: $dark;
-            margin-left: -1rem;
-            font-size: 24px;
-            &:after {
-              display: none;
+            &.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;
+              }
             }
           }
         }
-        &:has(+ .collapse) {
-          .dropdown-menu {
-            height: 50%;
-          }
-        }
       }
       .collapse {
         position: absolute;
@@ -150,8 +170,7 @@
     }
   }
 }
-
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up(md) {
   .nav-item:has(> .bcl-mega-menu) {
     position: static;
   }
@@ -161,14 +180,15 @@
     }
     .mega-menu-container.dropdown-menu {
       top: 100%;
-      padding: map-get($spacers, 3) map-get($spacers, 3) 0 map-get($spacers, 3);
+      padding: map-get($spacers, 3);
       .content-block {
         margin-right: 0;
-        padding-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;
@@ -176,16 +196,6 @@
             height: 100% !important;
             margin: 0;
           }
-          .dropdown-toggle.show {
-            margin-left: 0;
-            color: $link-color;
-            position: relative;
-            bottom: 0;
-            font-size: 1rem;
-            &:after {
-              display: block;
-            }
-          }
         }
         .collapse {
           top: 0;
@@ -195,4 +205,29 @@
       }
     }
   }
+  .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