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