diff --git a/.drone.yml b/.drone.yml
index e31563106..9f0017c7a 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -42,7 +42,7 @@ services:
 pipeline:
   ecl-build:
     group: prepare
-    image: git.fpfis.tech.ec.europa.eu/fpfis/dependency_proxy/containers/node:21
+    image: git.fpfis.tech.ec.europa.eu/fpfis/dependency_proxy/containers/node:18.18.2
     commands:
       # To build the theme using a development version of ECL set its development branch in .env.dist
       # and make sure that ECL_BUILD is set to "dev".
diff --git a/docker-compose.yml b/docker-compose.yml
index 00bd03d11..8dca565a9 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -37,7 +37,7 @@ services:
       - '4444'
     shm_size: 2g
   node:
-    image: node:21
+    image: node:18.18.2
     user: "node"
     working_dir: /home/node/app
     environment:
diff --git a/modules/oe_theme_helper/templates/oe-theme-helper-site-navigation.html.twig b/modules/oe_theme_helper/templates/oe-theme-helper-site-navigation.html.twig
index ec9ac68e5..d4e562205 100644
--- a/modules/oe_theme_helper/templates/oe-theme-helper-site-navigation.html.twig
+++ b/modules/oe_theme_helper/templates/oe-theme-helper-site-navigation.html.twig
@@ -15,4 +15,4 @@
   close: close,
   items: menu_items,
   site_name: site_name,
-}, 'vertical') }}
+}, 'default') }}
diff --git a/package.json b/package.json
index 74a13a566..87b1ae475 100644
--- a/package.json
+++ b/package.json
@@ -14,56 +14,57 @@
     "prepare": "patch-package"
   },
   "dependencies": {
-    "@ecl/builder": "4.0.2",
-    "@ecl/preset-ec": "4.0.2",
-    "@ecl/preset-eu": "4.0.2",
-    "@ecl/preset-reset": "4.0.2",
+    "@ecl/builder": "4.1.0",
+    "@ecl/preset-ec": "4.1.0",
+    "@ecl/preset-eu": "4.1.0",
+    "@ecl/preset-reset": "4.1.0",
     "@ecl/stylelint-config": "0.2.1",
-    "@ecl/theme-ec": "4.0.2",
-    "@ecl/theme-eu": "4.0.2",
-    "@ecl/twig-component-accordion": "4.0.2",
-    "@ecl/twig-component-banner": "4.0.2",
-    "@ecl/twig-component-blockquote": "4.0.2",
-    "@ecl/twig-component-breadcrumb": "4.0.2",
-    "@ecl/twig-component-button": "4.0.2",
-    "@ecl/twig-component-card": "4.0.2",
-    "@ecl/twig-component-carousel": "4.0.2",
-    "@ecl/twig-component-content-item": "4.0.2",
-    "@ecl/twig-component-datepicker": "4.0.2",
-    "@ecl/twig-component-description-list": "4.0.2",
-    "@ecl/twig-component-expandable": "4.0.2",
-    "@ecl/twig-component-fact-figures": "4.0.2",
-    "@ecl/twig-component-featured-item": "4.0.2",
-    "@ecl/twig-component-file": "4.0.2",
-    "@ecl/twig-component-gallery": "4.0.2",
-    "@ecl/twig-component-icon": "4.0.2",
-    "@ecl/twig-component-inpage-navigation": "4.0.2",
-    "@ecl/twig-component-label": "4.0.2",
-    "@ecl/twig-component-link": "4.0.2",
-    "@ecl/twig-component-list-illustration": "4.0.2",
-    "@ecl/twig-component-media-container": "4.0.2",
-    "@ecl/twig-component-menu": "4.0.2",
-    "@ecl/twig-component-navigation-list": "4.0.2",
-    "@ecl/twig-component-news-ticker": "4.0.2",
-    "@ecl/twig-component-notification": "4.0.2",
-    "@ecl/twig-component-page-header": "4.0.2",
-    "@ecl/twig-component-pagination": "4.0.2",
-    "@ecl/twig-component-radio": "4.0.2",
-    "@ecl/twig-component-search-form": "4.0.2",
-    "@ecl/twig-component-select": "4.0.2",
-    "@ecl/twig-component-site-footer": "4.0.2",
-    "@ecl/twig-component-site-header": "4.0.2",
-    "@ecl/twig-component-skip-link": "4.0.2",
-    "@ecl/twig-component-social-media-follow": "4.0.2",
-    "@ecl/twig-component-social-media-share": "4.0.2",
-    "@ecl/twig-component-splash-page": "4.0.2",
-    "@ecl/twig-component-table": "4.0.2",
-    "@ecl/twig-component-tabs": "4.0.2",
-    "@ecl/twig-component-tag": "4.0.2",
-    "@ecl/twig-component-text-input": "4.0.2",
-    "@ecl/twig-component-timeline": "4.0.2",
-    "@ecl/vanilla-utility-background": "4.0.2",
-    "@ecl/vanilla-utility-border": "4.0.2",
+    "@ecl/theme-ec": "4.1.0",
+    "@ecl/theme-eu": "4.1.0",
+    "@ecl/twig-component-accordion": "4.1.0",
+    "@ecl/twig-component-banner": "4.1.0",
+    "@ecl/twig-component-blockquote": "4.1.0",
+    "@ecl/twig-component-breadcrumb": "4.1.0",
+    "@ecl/twig-component-button": "4.1.0",
+    "@ecl/twig-component-card": "4.1.0",
+    "@ecl/twig-component-carousel": "4.1.0",
+    "@ecl/twig-component-content-item": "4.1.0",
+    "@ecl/twig-component-datepicker": "4.1.0",
+    "@ecl/twig-component-description-list": "4.1.0",
+    "@ecl/twig-component-expandable": "4.1.0",
+    "@ecl/twig-component-fact-figures": "4.1.0",
+    "@ecl/twig-component-featured-item": "4.1.0",
+    "@ecl/twig-component-file": "4.1.0",
+    "@ecl/twig-component-gallery": "4.1.0",
+    "@ecl/twig-component-icon": "4.1.0",
+    "@ecl/twig-component-inpage-navigation": "4.1.0",
+    "@ecl/twig-component-label": "4.1.0",
+    "@ecl/twig-component-link": "4.1.0",
+    "@ecl/twig-component-list-illustration": "4.1.0",
+    "@ecl/twig-component-media-container": "4.1.0",
+    "@ecl/twig-component-mega-menu": "4.1.0",
+    "@ecl/twig-component-menu": "4.1.0",
+    "@ecl/twig-component-navigation-list": "4.1.0",
+    "@ecl/twig-component-news-ticker": "4.1.0",
+    "@ecl/twig-component-notification": "4.1.0",
+    "@ecl/twig-component-page-header": "4.1.0",
+    "@ecl/twig-component-pagination": "4.1.0",
+    "@ecl/twig-component-radio": "4.1.0",
+    "@ecl/twig-component-search-form": "4.1.0",
+    "@ecl/twig-component-select": "4.1.0",
+    "@ecl/twig-component-site-footer": "4.1.0",
+    "@ecl/twig-component-site-header": "4.1.0",
+    "@ecl/twig-component-skip-link": "4.1.0",
+    "@ecl/twig-component-social-media-follow": "4.1.0",
+    "@ecl/twig-component-social-media-share": "4.1.0",
+    "@ecl/twig-component-splash-page": "4.1.0",
+    "@ecl/twig-component-table": "4.1.0",
+    "@ecl/twig-component-tabs": "4.1.0",
+    "@ecl/twig-component-tag": "4.1.0",
+    "@ecl/twig-component-text-input": "4.1.0",
+    "@ecl/twig-component-timeline": "4.1.0",
+    "@ecl/vanilla-utility-background": "4.1.0",
+    "@ecl/vanilla-utility-border": "4.1.0",
     "chokidar-cli": "3.0.0",
     "grunt": "1.6.1",
     "grunt-contrib-copy": "1.0.0",
diff --git a/patches/@ecl+twig-component-content-block+4.0.2.patch b/patches/@ecl+twig-component-content-block+4.1.0.patch
similarity index 100%
rename from patches/@ecl+twig-component-content-block+4.0.2.patch
rename to patches/@ecl+twig-component-content-block+4.1.0.patch
diff --git a/patches/@ecl+twig-component-file+4.0.2.patch b/patches/@ecl+twig-component-file+4.1.0.patch
similarity index 100%
rename from patches/@ecl+twig-component-file+4.0.2.patch
rename to patches/@ecl+twig-component-file+4.1.0.patch
diff --git a/patches/@ecl+twig-component-menu+4.0.2.patch b/patches/@ecl+twig-component-menu+4.1.0.patch
similarity index 100%
rename from patches/@ecl+twig-component-menu+4.0.2.patch
rename to patches/@ecl+twig-component-menu+4.1.0.patch
diff --git a/patches/@ecl+twig-component-site-footer+4.0.2.patch b/patches/@ecl+twig-component-site-footer+4.1.0.patch
similarity index 100%
rename from patches/@ecl+twig-component-site-footer+4.0.2.patch
rename to patches/@ecl+twig-component-site-footer+4.1.0.patch
diff --git a/patches/@ecl+twig-component-tabs+4.0.2.patch b/patches/@ecl+twig-component-tabs+4.1.0.patch
similarity index 100%
rename from patches/@ecl+twig-component-tabs+4.0.2.patch
rename to patches/@ecl+twig-component-tabs+4.1.0.patch
diff --git a/templates/navigation/menu--main.html.twig b/templates/navigation/menu--main.html.twig
index c0ef56ee7..c28323fe1 100644
--- a/templates/navigation/menu--main.html.twig
+++ b/templates/navigation/menu--main.html.twig
@@ -11,6 +11,6 @@
     label: 'Menu'|t,
     close: close,
     items: links,
-    variant: 'vertical',
+    variant: 'default',
   }) }}
 {% endif %}
diff --git a/templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml b/templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml
index 0572eb566..280c491f8 100644
--- a/templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml
+++ b/templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml
@@ -2,9 +2,12 @@ navigation_menu:
   label: "Navigation menu"
   description: "Default implementation of the main navigation menu."
   variants:
-    vertical:
-      label: "Vertical"
-      description: "Menu items will be arranged vertically, in 4 columns."
+    default:
+      label: "Default"
+      description: "Default variant uses the ECL menu component."
+    mega_menu:
+      label: "Mega menu"
+      description: "Mega menu variant uses the ECL Mega menu component."
   fields:
     label:
       type: "text"
@@ -89,7 +92,36 @@ navigation_menu:
                 - name: "extra-attr2"
                   value: "extra value2"
               is_current: TRUE
-              external: true
+              see_all: true
+              children:
+                - href: "#"
+                  label: 'Granchild 2.1.1'
+                  is_current: TRUE
+                - href: "#"
+                  label: 'Granchild 2.1.2'
+                  external: true
+                - href: "#"
+                  label: 'Granchild 2.1.3'
+                - href: "#"
+                  label: 'Granchild 2.1.4'
+                - href: "#"
+                  label: 'Granchild 2.1.5'
+                  external: true
+              featured:
+                title: "featured column 1"
+                content:
+                  '#markup': "<article class=\"ecl-navigation-list__item\">\n    <picture class=\"ecl-picture ecl-navigation-list__picture\"><img class=\"ecl-navigation-list__image\" src=\"https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg\" alt=\"Alt text for the image\" /></picture>\n    <div class=\"ecl-content-block ecl-navigation-list__content-block\" data-ecl-auto-init=\"ContentBlock\" data-ecl-content-block>\n      <div class=\"ecl-content-block__title\" data-ecl-title-link><a href=\"/example#qspea\" class=\"ecl-link ecl-link--standalone\">Title 1</a></div>\n      <div class=\"ecl-content-block__description\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus</div>\n    </div>\n  </article>"
+                items:
+                  - href: "#"
+                    label: "Featured link 2.1.1"
+                    is_current: TRUE
+                  - href: "#"
+                    label: "Featured link 2.1.2"
+                  - href: "#"
+                    label: "Featured link 2.1.3"
+                  - href: "#"
+                    label: "Featured link 2.1.4"
+                    external: true
             - href: '#'
               label: 'Application of EU law'
             - href: '#'
@@ -113,9 +145,52 @@ navigation_menu:
         - href: "#"
           label: "Live, work, study"
           external: true
+          children:
+            - href: '#'
+              label: 'Child 6.1'
+              see_all: false
+              children:
+                - href: "#"
+                  label: 'Granchild 6.1.1'
+                  is_current: TRUE
+                - href: "#"
+                  label: 'Granchild 6.1.2'
+                  external: true
+                - href: "#"
+                  label: 'Granchild 6.1.3'
+                - href: "#"
+                  label: 'Granchild 6.1.4'
+                - href: "#"
+                  label: 'Granchild 6.1.5'
+                  external: true
+              featured:
+                title: "featured column 2"
+                content:
+                  '#markup': "<article class=\"ecl-navigation-list__item\">\n    <picture class=\"ecl-picture ecl-navigation-list__picture\"><img class=\"ecl-navigation-list__image\" src=\"https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg\" alt=\"Alt text for the image\" /></picture>\n    <div class=\"ecl-content-block ecl-navigation-list__content-block\" data-ecl-auto-init=\"ContentBlock\" data-ecl-content-block>\n      <div class=\"ecl-content-block__title\" data-ecl-title-link><a href=\"/example#qspea\" class=\"ecl-link ecl-link--standalone\">Title 2</a></div>\n      <div class=\"ecl-content-block__description\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus</div>\n    </div>\n  </article>"
+                items:
+                  - href: "#"
+                    label: "Featured link 6.1.1"
+                    is_current: TRUE
+                  - href: "#"
+                    label: "Featured link 6.1.2"
+                  - href: "#"
+                    label: "Featured link 6.1.3"
+                  - href: "#"
+                    label: "Featured link 6.1.4"
+                    external: true
+            - href: '#'
+              label: 'Child 6.2'
+            - href: '#'
+              label: 'Child 6.3'
+            - href: '#'
+              label: 'Child 6.4'
+            - href: '#'
+              label: 'Child 6.5'
         - href: "#"
           label: "Visit a European Union institution"
         - href: "#"
           label: "Jobs & traineeships in EU institutions"
         - href: "#"
           label: "Participate, interact, vote"
+          container:
+            '#markup': "<article class=\"ecl-navigation-list__item\">\n    <picture class=\"ecl-picture ecl-navigation-list__picture\"><img class=\"ecl-navigation-list__image\" src=\"https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg\" alt=\"Alt text for the image\" /></picture>\n    <div class=\"ecl-content-block ecl-navigation-list__content-block\" data-ecl-auto-init=\"ContentBlock\" data-ecl-content-block>\n      <div class=\"ecl-content-block__title\" data-ecl-title-link><a href=\"/example#qspea\" class=\"ecl-link ecl-link--standalone\">Title 3</a></div>\n      <div class=\"ecl-content-block__description\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus</div>\n    </div>\n  </article>"
diff --git a/templates/patterns/navigation_menu/pattern-navigation-menu--variant-mega-menu.html.twig b/templates/patterns/navigation_menu/pattern-navigation-menu--variant-mega-menu.html.twig
new file mode 100644
index 000000000..69fc9e1e2
--- /dev/null
+++ b/templates/patterns/navigation_menu/pattern-navigation-menu--variant-mega-menu.html.twig
@@ -0,0 +1,159 @@
+{#
+/**
+ * @file
+ * Mega menu variant implementation for the navigation menu pattern.
+ */
+#}
+
+{# Process items as expected by ECL Mega menu. #}
+{% set _items = [] %}
+{% for item in items %}
+
+  {# Process children, if any. #}
+  {% set _children = [] %}
+  {% for child in item.children %}
+    {% set _child = {
+      path: child.href,
+      label: child.label,
+      see_all: child.see_all|default(false),
+      extra_attributes: child.extra_attributes,
+    } %}
+    {% if child.is_current is defined and child.is_current == true%}
+      {% set _child = _child|merge({
+        is_current: child.is_current,
+      }) %}
+    {% endif %}
+    {% if child.external is defined and child.external == true %}
+      {% set _child = _child|merge({
+        external: child.external,
+        icon_path: ecl_icon_path
+      }) %}
+    {% endif %}
+
+    {# Process grandchildren, if any. #}
+    {% set _grandchildren = [] %}
+    {% for grandchild in child.children %}
+      {% set _grandchild = {
+        path: grandchild.href,
+        label: grandchild.label,
+        extra_attributes: grandchild.extra_attributes,
+      } %}
+      {% if grandchild.is_current is defined and grandchild.is_current == true%}
+        {% set _grandchild = _grandchild|merge({
+          is_current: grandchild.is_current,
+        }) %}
+      {% endif %}
+      {% if grandchild.external is defined and grandchild.external == true %}
+        {% set _grandchild = _grandchild|merge({
+          external: grandchild.external,
+          icon_path: ecl_icon_path
+        }) %}
+      {% endif %}
+      {% set _grandchildren = _grandchildren|merge([_grandchild]) %}
+    {% endfor %}
+
+    {# Process featured column, if set. #}
+    {% set _featured = [] %}
+    {% if child.featured is not empty %}
+      {% set _featured = _featured|merge({
+        title: child.featured.title|default(''),
+        content: child.featured.content|default(''),
+      }) %}
+      {% set _featured_items = [] %}
+      {% for featured_item in child.featured.items %}
+        {% set _featured_item = {
+          path: featured_item.href,
+          label: featured_item.label,
+        } %}
+        {% if featured_item.is_current is defined and featured_item.is_current == true%}
+          {% set _featured_item = _featured_item|merge({
+            is_current: featured_item.is_current,
+          }) %}
+        {% endif %}
+        {% if featured_item.external is defined and featured_item.external == true %}
+          {% set _featured_item = _featured_item|merge({
+            external: featured_item.external,
+            icon_path: ecl_icon_path
+          }) %}
+        {% endif %}
+        {% set _featured_items = _featured_items|merge([_featured_item]) %}
+      {% endfor %}
+      {% set _featured = _featured|merge({
+        items: _featured_items,
+      }) %}
+    {% endif %}
+    {% set _child = _child|merge({
+      children: _grandchildren,
+      featured: _featured,
+      see_all: child.see_all|default(false)
+    }) %}
+    {% set _children = _children|merge([_child]) %}
+  {% endfor %}
+
+  {# Process menu items. #}
+  {% set _item = {
+    path: item.href,
+    label: item.label,
+    children: _children,
+    trigger_aria_label: "Access item's children"|t,
+    extra_attributes: item.extra_attributes,
+  } %}
+  {% if _children is empty %}
+    {% if item.external is defined and item.external == true %}
+      {% set _item = _item|merge({
+        external: item.external,
+        icon_path: ecl_icon_path
+      }) %}
+    {% endif %}
+    {% if item.container is defined and item.container is not empty %}
+      {% set _item = _item|merge({
+        container: item.container,
+      }) %}
+    {% endif %}
+  {% endif %}
+  {% if item.is_current is defined and item.is_current == true %}
+    {% set _item = _item|merge({
+      is_current: item.is_current,
+    }) %}
+  {% endif %}
+  {% set _items = _items|merge([_item]) %}
+{% endfor %}
+
+{% if _items %}
+  {# Add extra attributes. #}
+  {% set extra_attributes = [
+    {
+      'name': 'aria-label',
+      'value': "Site navigation"|t,
+    }
+  ] %}
+  {% include '@ecl-twig/mega-menu' with {
+    title: label|default('Menu'|t),
+    toggle: {
+      link: {
+        label: label|default('Menu'|t),
+        hide_label: true
+      },
+      icon: {
+        path: ecl_icon_path,
+        name: 'hamburger',
+        size: 'm',
+      }
+    },
+    close: {
+      label: close.label|default('Close'|t),
+      icon: {
+        path: ecl_icon_path,
+        name: ecl_component_library == 'ec' ? 'close' : 'close-filled',
+        size: ecl_component_library == 'ec' ? 'm' : 's',
+      },
+      hide_label: ecl_component_library == 'ec',
+    },
+    back_label: back|default('Back'|t),
+    icon_path: ecl_icon_path,
+    items: _items,
+    see_all_label: see_all_label|default(),
+    extra_attributes: extra_attributes|default([]),
+  } only %}
+{% endif %}
+