diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 7770777f606..755f7ffe71a 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -80,6 +80,13 @@
         'views/snippets/s_product_list.xml',
         'views/snippets/s_mega_menu_multi_menus.xml',
         'views/snippets/s_mega_menu_menu_image_menu.xml',
+        'views/snippets/s_mega_menu_thumbnails.xml',
+        'views/snippets/s_mega_menu_little_icons.xml',
+        'views/snippets/s_mega_menu_images_subtitles.xml',
+        'views/snippets/s_mega_menu_menus_logos.xml',
+        'views/snippets/s_mega_menu_odoo_menu.xml',
+        'views/snippets/s_mega_menu_big_icons_subtitles.xml',
+        'views/snippets/s_mega_menu_cards.xml',
         'views/snippets/s_google_map.xml',
         'views/snippets/s_map.xml',
         'views/snippets/s_dynamic_snippet.xml',
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 4e614ee14f7..99cf99082f5 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -1004,6 +1004,204 @@
             <field name="type">url</field>
             <field name="url">/website/static/src/img/snippets_demo/s_references_5.png</field>
         </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_1" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_1.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_1.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_2.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_2.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_3.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_3.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_4" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_4.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_4.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_5" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_5.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_5.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_6" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_6.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_6.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_7" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_7.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_7.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_8" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_8.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_8.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_9" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_9.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_9.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_10" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_10.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_10.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_thumbnails_default_image_11" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_thumbnails_default_image_11.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_11.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_images_subtitles_default_image_1" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_images_subtitles_default_image_1.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_1.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_images_subtitles_default_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_images_subtitles_default_image_2.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_2.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_images_subtitles_default_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_images_subtitles_default_image_3.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_3.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_images_subtitles_default_image_4" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_images_subtitles_default_image_4.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_4.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_images_subtitles_default_image_5" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_images_subtitles_default_image_5.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_5.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_images_subtitles_default_image_6" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_images_subtitles_default_image_6.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_6.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_images_subtitles_default_image_7" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_images_subtitles_default_image_7.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_7.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_menus_logos_default_image" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_menus_logos_default_image.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_image.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_menus_logos_default_logo_1" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_menus_logos_default_logo_1.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_1.png</field>
+        </record>
+        <record id="website.s_mega_menu_menus_logos_default_logo_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_menus_logos_default_logo_2.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_2.png</field>
+        </record>
+        <record id="website.s_mega_menu_menus_logos_default_logo_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_menus_logos_default_logo_3.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_3.png</field>
+        </record>
+        <record id="website.s_mega_menu_menus_logos_default_logo_4" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_menus_logos_default_logo_4.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_4.png</field>
+        </record>
+        <record id="website.s_mega_menu_menus_logos_default_logo_5" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_menus_logos_default_logo_5.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_5.png</field>
+        </record>
+        <record id="website.s_mega_menu_menus_logos_default_logo_6" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_menus_logos_default_logo_6.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_6.png</field>
+        </record>
+        <record id="website.s_mega_menu_cards_default_image_1" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_cards_default_image_1.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_1.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_cards_default_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_cards_default_image_2.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_2.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_cards_default_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_cards_default_image_3.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_3.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_cards_default_image_4" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_cards_default_image_4.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_4.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_cards_default_image_5" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_cards_default_image_5.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_5.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_cards_default_image_6" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_cards_default_image_6.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_6.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_cards_default_image_7" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_cards_default_image_7.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_7.jpg</field>
+        </record>
+        <record id="website.s_mega_menu_cards_default_image_8" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_mega_menu_cards_default_image_8.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_8.jpg</field>
+        </record>
         <record id="website.s_product_catalog_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
             <field name="name">s_product_catalog_default_image.jpg</field>
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_1.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_1.jpg
new file mode 100644
index 00000000000..a3b16429698
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_1.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_2.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_2.jpg
new file mode 100644
index 00000000000..235bde823c3
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_2.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_3.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_3.jpg
new file mode 100644
index 00000000000..20abbec38f9
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_3.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_4.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_4.jpg
new file mode 100644
index 00000000000..0594b7e00dc
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_4.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_5.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_5.jpg
new file mode 100644
index 00000000000..efc08aa325f
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_5.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_6.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_6.jpg
new file mode 100644
index 00000000000..442c413c5dc
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_6.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_7.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_7.jpg
new file mode 100644
index 00000000000..1d6282162b3
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_7.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_8.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_8.jpg
new file mode 100644
index 00000000000..09bdc3b7db6
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_8.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_1.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_1.jpg
new file mode 100644
index 00000000000..97bc8954c35
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_1.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_2.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_2.jpg
new file mode 100644
index 00000000000..e5e676eddb0
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_2.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_3.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_3.jpg
new file mode 100644
index 00000000000..20131799b52
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_3.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_4.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_4.jpg
new file mode 100644
index 00000000000..2ea42ddd7c2
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_4.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_5.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_5.jpg
new file mode 100644
index 00000000000..843e59b926d
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_5.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_6.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_6.jpg
new file mode 100644
index 00000000000..43cb9e1873c
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_6.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_7.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_7.jpg
new file mode 100644
index 00000000000..95d6661a9f3
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_7.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_image.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_image.jpg
new file mode 100644
index 00000000000..ecbcd1b505a
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_image.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_1.png b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_1.png
new file mode 100644
index 00000000000..bb45dc4f62b
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_1.png differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_2.png b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_2.png
new file mode 100644
index 00000000000..0ea02f217e7
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_2.png differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_3.png b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_3.png
new file mode 100644
index 00000000000..95bf0205c6b
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_3.png differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_4.png b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_4.png
new file mode 100644
index 00000000000..ae1d2c636cf
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_4.png differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_5.png b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_5.png
new file mode 100644
index 00000000000..3ff7f44864e
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_5.png differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_6.png b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_6.png
new file mode 100644
index 00000000000..62441f82bb9
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_6.png differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_1.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_1.jpg
new file mode 100644
index 00000000000..15dbf6f13b7
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_1.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_10.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_10.jpg
new file mode 100644
index 00000000000..7d8ee8132b2
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_10.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_11.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_11.jpg
new file mode 100644
index 00000000000..018e738fa6c
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_11.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_2.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_2.jpg
new file mode 100644
index 00000000000..19910d11985
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_2.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_3.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_3.jpg
new file mode 100644
index 00000000000..498c55d6412
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_3.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_4.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_4.jpg
new file mode 100644
index 00000000000..817da9de1c1
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_4.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_5.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_5.jpg
new file mode 100644
index 00000000000..89819bba11a
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_5.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_6.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_6.jpg
new file mode 100644
index 00000000000..eff616513f1
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_6.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_7.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_7.jpg
new file mode 100644
index 00000000000..5b538100d5e
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_7.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_8.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_8.jpg
new file mode 100644
index 00000000000..56e7cc080a0
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_8.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_9.jpg b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_9.jpg
new file mode 100644
index 00000000000..2715d088d6c
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_9.jpg differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_big_icons_subtitles.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_big_icons_subtitles.svg
new file mode 100644
index 00000000000..2f893343bd4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_big_icons_subtitles.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="5" height="2" x="0" y="0"/>
+    <path id="path-3" d="M5.6 3zm1.4-3v1H0v-1h7z"/>
+    <filter id="filter-4" width="107.1%" height="150%" x="-3.6%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_big_icons_subtitles">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 14)">
+        <g class="group">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(19)">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(38)">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(0 12)">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(19 12)">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(38 12)">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(0 24)">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(19 24)">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(38 24)">
+          <circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(7 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(7 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_cards.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_cards.svg
new file mode 100644
index 00000000000..29daa0e1056
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_cards.svg
@@ -0,0 +1,170 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="14" height="2" x="0" y="0"/>
+    <filter id="filter-2" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M13 6zm-1-3v1H2V3h10zm2-3v1H0V0h14z"/>
+    <filter id="filter-4" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+     <rect id="path-5" width="13" height="6" x="0" y="0"/>
+    <linearGradient id="linearGradient-6" x1="72.875%" x2="40.332%" y1="47.367%" y2="38.122%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-7" x1="88.517%" x2="50%" y1="46.899%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_cards">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 9)">
+        <g class="group">
+          <g class="image_1_border">
+            <rect width="14" height="7" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.472 .47)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
+              <ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
+              <ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
+            </g>
+            <path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(0 10)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 14)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(19)">
+          <g class="image_1_border">
+            <rect width="14" height="7" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.472 .47)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
+              <ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
+              <ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
+            </g>
+            <path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(0 10)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 14)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(39)">
+          <g class="image_1_border">
+            <rect width="14" height="7" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.472 .47)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
+              <ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
+              <ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
+            </g>
+            <path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(0 10)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 14)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(0 23)">
+          <g class="image_1_border">
+            <rect width="14" height="7" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.472 .47)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
+              <ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
+              <ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
+            </g>
+            <path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(0 10)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 14)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(19 23)">
+          <g class="image_1_border">
+            <rect width="14" height="7" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.472 .47)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
+              <ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
+              <ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
+            </g>
+            <path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(0 10)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 14)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(39 23)">
+          <g class="image_1_border">
+            <rect width="14" height="7" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.472 .47)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
+              <ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
+              <ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
+            </g>
+            <path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(0 10)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 14)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_images_subtitles.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_images_subtitles.svg
new file mode 100644
index 00000000000..6a391876caa
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_images_subtitles.svg
@@ -0,0 +1,197 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="6.535" height="6.535" x="0" y="0"/>
+    <rect id="path-2" width="5" height="2" x="0" y="0"/>
+    <path id="path-3" d="M5.6 3zm2.4-3v1H0v-1h7z"/>
+    <rect id="path-4" width="10.5" height="9.535" x="0" y="0"/>
+    <path id="path-5" d="M0 0L11 0 11 1 0 1M0 2L8 2 8 3 0 3M0 4L11 4 11 5 0 5"/>
+    <rect id="path-6" width="8" height="1" x="34" y="3"/>
+    <linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-9" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-10" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <filter id="filter-11" width="107.1%" height="150%" x="-3.6%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_images_subtitles">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 17)">
+        <g class="group">
+          <g class="image_1_border">
+            <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.25 .233)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+              <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+              <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+            </g>
+            <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(9 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(9 4)">
+            <use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(20)">
+          <g class="image_1_border">
+            <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.25 .233)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+              <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+              <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+            </g>
+            <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(9 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(9 4)">
+            <use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(0 9)">
+          <g class="image_1_border">
+            <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.25 .233)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+              <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+              <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+            </g>
+            <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(9 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(9 4)">
+            <use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(20 9)">
+          <g class="image_1_border">
+            <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.25 .233)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+              <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+              <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+            </g>
+            <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(9 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(9 4)">
+            <use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(0 18)">
+          <g class="image_1_border">
+            <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.25 .233)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+              <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+              <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+            </g>
+            <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(9 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(9 4)">
+            <use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(20 18)">
+          <g class="image_1_border">
+            <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.25 .233)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+              <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+              <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+            </g>
+            <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(9 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <g class="combined_shape" transform="translate(9 4)">
+            <use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="image_2_border" transform="translate(42)">
+          <rect width="11" height="10" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-9" fill="#fff">
+              <use xlink:href="#path-4"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
+            <ellipse cx="9.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-9)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-9)" class="oval" mask="url(#mask-9)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-10)" class="oval" mask="url(#mask-9)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M11 0v10H0V0h11zm-11 1H1v8h9V1z" class="rectangle_2"/>
+        </g>
+        <g class="combined_shape" transform="translate(42 16)">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+        <g class="rectangle_copy" transform="translate(8 10)">
+          <use fill="#000" filter="url(#filter-11)" xlink:href="#path-6"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-6"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_little_icons.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_little_icons.svg
new file mode 100644
index 00000000000..fd11733da35
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_little_icons.svg
@@ -0,0 +1,84 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+	  <rect id="path-2" width="4" height="2" x="0" y="0"/>
+    <path id="path-3" d="M0 0L11 0 11 1 0 1M0 2L8 2 8 3 0 3M0 4L11 4 11 5 0 5"/>
+    <filter id="filter-4" width="105.6%" height="128.6%" x="-2.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-5" width="10" height="1" x="34" y="3"/>
+    <filter id="filter-6" width="104.8%" height="300%" x="-2.4%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_little_icons">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 21)">
+        <g class="group" transform="translate(0 1)">
+          <circle cx="2" cy="2" r="2" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(5 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <circle cx="2" cy="2" r="2" transform="translate(12)" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(17 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <circle cx="2" cy="2" r="2" transform="translate(24)" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(29 1)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <circle cx="2" cy="2" r="2" transform="translate(0 6)" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(6 7)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <circle cx="2" cy="2" r="2" transform="translate(12 6)" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(17 7)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <circle cx="2" cy="2" r="2" transform="translate(24 6)" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(29 7)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <circle cx="2" cy="2" r="2" transform="translate(0 12)" fill="url(#linearGradient-1)"  class="oval"/>
+          <g class="rectangle" transform="translate(6 13)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <circle cx="2" cy="2" r="2" transform="translate(12 12)" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(17 13)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+          <circle cx="2" cy="2" r="2" transform="translate(24 12)" fill="url(#linearGradient-1)" class="oval"/>
+          <g class="rectangle" transform="translate(29 13)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+          </g>
+        </g>
+        <rect width="17" height="18" fill="#D8D8D8" class="rectangle" opacity=".219" transform="translate(36)"/>
+        <g class="combined_shape" transform="translate(39 7)">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <g class="rectangle_copy" transform="translate(5)">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_menus_logos.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_menus_logos.svg
new file mode 100644
index 00000000000..2c0779ad8ff
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_menus_logos.svg
@@ -0,0 +1,167 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="8" height="2" x="0" y="0"/>
+    <filter id="filter-2" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M0 0L7 0 7 1 0 1M0 3L4 3 4 4 0 4M0 6L7 6 7 7 0 7"/>
+    <filter id="filter-4" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-5" width="10.5" height="9.535" x="0" y="0"/>
+    <rect id="path-6" width="9" height="2" x="0" y="0"/>
+    <linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-9" width="6.535" height="6.535" x="0" y="0"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_menus_logos">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 10)">
+        <g class="group">
+          <g class="rectangle">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(12)">
+          <g class="rectangle">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(24)">
+          <g class="rectangle">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(0 15)">
+          <g class="rectangle">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(12 15)">
+          <g class="rectangle">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <g class="group" transform="translate(24 15)">
+          <g class="rectangle">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <g class="combined_shape" transform="translate(0 4)">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+        </g>
+        <rect width="17" height="29" fill="#D8D8D8" class="rectangle" opacity=".219" transform="translate(36)"/>
+        <g class="group" transform="translate(39 6)">
+          <g class="image_1_border" transform="">
+            <rect width="11" height="10" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.25 .233)">
+              <mask id="mask-9" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="9.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-9)" rx="1.875" ry="1.744"/>
+              <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-9)" rx="5.875" ry="3.488"/>
+              <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-9)" rx="9.375" ry="5.465"/>
+            </g>
+            <path fill="#FFF" d="M11 0v10H0V0h11zm-11 1H1v8h9V1z" class="rectangle_2"/>
+          </g>
+          <g class="rectangle" transform="translate(1 13)">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-6"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-6"/>
+          </g>
+        </g>
+        <rect width="53" height="1" fill="#D8D8D8" class="rectangle_bg" opacity=".219" transform="translate(0 29)"/>
+        <g class="image_1_border" transform="translate(0 33)">
+          <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-9"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
+            <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(15 33)">
+          <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-9"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
+            <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(31 33)">
+          <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-9"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
+            <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(46 33)">
+          <rect width="6" height="6" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-9"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
+            <ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_odoo_menu.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_odoo_menu.svg
new file mode 100644
index 00000000000..f337cc7b3da
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_odoo_menu.svg
@@ -0,0 +1,85 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="14" height="2" x="0" y="0"/>
+    <filter id="filter-2" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M13 12v1H0v-1h13zm-2-3v1H0V9h11zm2-3v1H0V6h13z"/>
+    <filter id="filter-4" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-5" width="14" height="2" x="20" y="0"/>
+    <filter id="filter-6" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-7" d="M33 12v1H20v-1h13zm-2-3v1H20V9h11zm2-3v1H20V6h13z"/>
+    <filter id="filter-8" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-9" width="14" height="2" x="39" y="0"/>
+    <filter id="filter-10" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-11" d="M52 12v1H39v-1h13zm-2-3v1H39V9h11zm2-3v1H39V6h13z"/>
+    <filter id="filter-12" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-13" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_odoo_menu">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 17)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <rect width="14" height="1" class="rectangle" fill="url(#linearGradient-13)" transform="translate(0 4)"/>
+        <g class="combined_shape" transform="translate(0 3)">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
+        </g>
+        <rect width="14" height="1" class="rectangle" fill="url(#linearGradient-13)" transform="translate(20 4)"/>
+        <g class="combined_shape" transform="translate(0 3)">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+        <rect width="14" height="1" class="rectangle" fill="url(#linearGradient-13)" transform="translate(39 4)"/>
+        <g class="combined_shape" transform="translate(0 3)">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
+        </g>
+        <g class="group" transform="translate(12 22)">
+          <circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval"/>
+          <circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval" transform="translate(6)"/>
+          <circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval" transform="translate(12)"/>
+          <circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval" transform="translate(18)"/>
+          <circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval" transform="translate(24)"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_thumbnails.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_thumbnails.svg
new file mode 100644
index 00000000000..9dd3df7e6d2
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_thumbnails.svg
@@ -0,0 +1,148 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+  <rect id="path-1" width="12" height="2" x="0" y="0"/>
+  	<filter id="filter-2" width="107.7%" height="200%" x="-3.8%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-3" width="15.059" height="19.07" x="0" y="0"/>
+    <rect id="path-4" width="9.535" height="9.535" x="0" y="0"/>
+    <linearGradient id="linearGradient-5" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-6" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.279%" y2="33.212%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="38.775%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-9" width="6" height="2" x="0" y="0"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_thumbnails">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 11)">
+        <g class="image_1_border">
+          <rect width="10" height="10" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-4"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
+            <ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(12)">
+          <rect width="10" height="10" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-4"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
+            <ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(24)">
+          <rect width="10" height="10" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-4"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
+            <ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(0 15)">
+          <rect width="10" height="10" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-4"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
+            <ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(12 15)">
+          <rect width="10" height="10" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-4"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
+            <ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(24 15)">
+          <rect width="10" height="10" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-4"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
+            <ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_2_border" transform="translate(37)">
+          <rect width="16" height="20" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.47 .465)">
+            <mask id="mask-6" fill="#fff">
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-3"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-3"/>
+            <ellipse cx="9.647" cy="4.884" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="3.529" ry="3.488"/>
+            <ellipse cx="15.294" cy="20.93" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-6)" rx="11.059" ry="6.977"/>
+            <ellipse cx="-8.235" cy="21.163" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-6)" rx="17.647" ry="10.93"/>
+          </g>
+          <path fill="#FFF" d="M16 0v20H0V0h16zm-1 1H1v18h14V1z" class="rectangle_2"/>
+        </g>
+		    <g class="rectangle" transform="translate(39 23)">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+	    	<rect width="53" height="8" fill="#D8D8D8" class="rectangle_bg" opacity=".219" transform="translate(0 29)"/>
+	    	<g class="rectangle" transform="translate(6 32)">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+	    	<g class="rectangle" transform="translate(18 32)">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+	    	<g class="rectangle" transform="translate(30 32)">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+	    	<g class="rectangle" transform="translate(42 32)">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/snippets/s_mega_menu_cards/000.scss b/addons/website/static/src/snippets/s_mega_menu_cards/000.scss
new file mode 100644
index 00000000000..457987b7abe
--- /dev/null
+++ b/addons/website/static/src/snippets/s_mega_menu_cards/000.scss
@@ -0,0 +1,8 @@
+
+.s_mega_menu_cards:not([data-vcss]) {
+    .nav-link {
+        @include hover-focus {
+            background: rgba(0, 0, 0, .05);
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss b/addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss
new file mode 100644
index 00000000000..1edb8cf139a
--- /dev/null
+++ b/addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss
@@ -0,0 +1,12 @@
+
+.s_mega_menu_images_subtitles:not([data-vcss]) {
+    .media img {
+        max-width: 64px;
+    }
+
+    .nav-link {
+        @include hover-focus {
+            background: rgba(0, 0, 0, .05);
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss b/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss
new file mode 100644
index 00000000000..612fb0ef77e
--- /dev/null
+++ b/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss
@@ -0,0 +1,26 @@
+
+.s_mega_menu_little_icons:not([data-vcss]) {
+    .nav-link {
+        @include hover-focus {
+            background: rgba(0, 0, 0, .05);
+        }
+    }
+
+    .s_mega_menu_gray_area:last-child {
+        // Allow to show the grey background used in the pseudo-element
+        z-index: 1;
+
+        &:before {
+            content: '';
+            display: block;
+            width: 100vw;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: -1;
+            pointer-events: none;
+            background: rgba(0, 0, 0, .05);
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss b/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss
new file mode 100644
index 00000000000..290a17b4221
--- /dev/null
+++ b/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss
@@ -0,0 +1,25 @@
+
+.s_mega_menu_menus_logos:not([data-vcss]) {
+    .s_mega_menu_gray_area:last-child {
+        // Allow to show the grey background used in the pseudo-element
+        z-index: 1;
+
+        &:before {
+            content: '';
+            display: block;
+            width: 100vw;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: -1;
+            pointer-events: none;
+            background: rgba(0, 0, 0, .05);
+        }
+    }
+
+    .s_mega_menu_menus_logos_wrapper {
+        // Apply color transparency to match with the preset used
+        border-color: rgba(0, 0, 0, .05) !important;
+    }
+}
diff --git a/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss b/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss
new file mode 100644
index 00000000000..c1e66b14140
--- /dev/null
+++ b/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss
@@ -0,0 +1,8 @@
+
+.s_mega_menu_odoo_menu:not([data-vcss]) {
+    .s_mega_menu_odoo_menu_footer {
+        // Apply color transparency to match with the preset used
+        border-color: rgba(0, 0, 0, .05) !important;
+        background: rgba(0, 0, 0, .05) !important;
+    }
+}
diff --git a/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss b/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss
new file mode 100644
index 00000000000..23861564cc6
--- /dev/null
+++ b/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss
@@ -0,0 +1,5 @@
+.s_mega_menu_thumbnails:not([data-vcss]) {
+    .s_mega_menu_thumbnails_footer {
+        background: rgba(0, 0, 0, .05);
+    }
+}
diff --git a/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml b/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
new file mode 100644
index 00000000000..c6a27f0d764
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_big_icons_subtitles" name="Menu - Big icons &amp; subtitles">
+    <section class="s_mega_menu_big_icons_subtitles pt24 pb24" data-oe-shape-data="{'shape':'web_editor/Zigs/03','flip':[]}">
+        <div class="o_we_shape o_web_editor_Zigs_03"/>
+        <div class="container" >
+            <div class="row">
+                <div class="col-12 col-md-6 col-lg">
+                    <nav class="nav flex-column w-100">
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-user bg-o-color-1"/>
+                            <t t-set="_title">About us</t>
+                            <t t-set="_text">Discover our culture and our values</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-newspaper-o bg-o-color-2"/>
+                            <t t-set="_title">Blog</t>
+                            <t t-set="_text">Latests news and case studies</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-calendar bg-o-color-3"/>
+                            <t t-set="_title">Events</t>
+                            <t t-set="_text">Our seminars and trainings for you</t>
+                        </t>
+                    </nav>
+                </div>
+                <div class="col-12 col-md-6 col-lg">
+                    <nav class="nav flex-column w-100">
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-star bg-o-color-5"/>
+                            <t t-set="_title">Customers</t>
+                            <t t-set="_text">They trust us since years</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-handshake-o bg-o-color-3"/>
+                            <t t-set="_title">Services</t>
+                            <t t-set="_text">Find the perfect solution for you</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-paint-brush bg-o-color-2"/>
+                            <t t-set="_title">Portfolio</t>
+                            <t t-set="_text">Discover our realisations</t>
+                        </t>
+                    </nav>
+                </div>
+                <div class="col-12 col-md-6 col-lg">
+                    <nav class="nav flex-column w-100">
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-question-circle bg-o-color-1"/>
+                            <t t-set="_title">F.A.Q.</t>
+                            <t t-set="_text">All informations you need</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-shopping-basket bg-o-color-5"/>
+                            <t t-set="_title">Points of sale</t>
+                            <t t-set="_text">Find a store near you</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_big_icons_subtitles_item">
+                            <t t-set="_icon_classes" t-valuef="fa-legal bg-o-color-3"/>
+                            <t t-set="_title">Legal Notice</t>
+                            <t t-set="_text">Discover our legal notice</t>
+                        </t>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_mega_menu_big_icons_subtitles_item">
+    <a href="#" class="nav-link o_default_snippet_text px-2 my-2 rounded text-wrap" data-name="Menu Item">
+        <div class="media align-items-center">
+            <i t-attf-class="fa rounded rounded-circle mr-3 #{_icon_class}"/>
+            <div class="media-body">
+                <h4 class="mt-0 mb-0" t-esc="_title"/>
+                <span><font style="font-size: 14px;" t-esc="_text"/></span>
+            </div>
+        </div>
+    </a>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_mega_menu_cards.xml b/addons/website/views/snippets/s_mega_menu_cards.xml
new file mode 100644
index 00000000000..f8f8cbccf7f
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_cards.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_cards" name="Menu - Cards">
+    <section class="s_mega_menu_cards pt16 pb16">
+        <div class="container">
+            <nav class="row">
+                <t t-call="website.s_mega_menu_cards_item">
+                    <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_1"/>
+                    <t t-set="_title">Our team</t>
+                    <t t-set="_text">Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.</t>
+                </t>
+                <t t-call="website.s_mega_menu_cards_item">
+                    <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_2"/>
+                    <t t-set="_title">Departments</t>
+                    <t t-set="_text">Do you need specific information? Our specialists will help you with pleasure.</t>
+                </t>
+                <t t-call="website.s_mega_menu_cards_item">
+                    <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_3"/>
+                    <t t-set="_title">Products</t>
+                    <t t-set="_text">We offer tailor-made products according to your needs and your budget.</t>
+                </t>
+                <t t-call="website.s_mega_menu_cards_item">
+                    <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_4"/>
+                    <t t-set="_title">Customers</t>
+                    <t t-set="_text">Find out how we were able helping them and set in place solutions adapted to their needs.</t>
+                </t>
+
+                <div class="w-100 d-none d-md-block"/>
+
+                <t t-call="website.s_mega_menu_cards_item">
+                    <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_5"/>
+                    <t t-set="_title">Events</t>
+                    <t t-set="_text">From seminars to team building activities, we offer a wide choice of events to organize.</t>
+                </t>
+                <t t-call="website.s_mega_menu_cards_item">
+                    <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_6"/>
+                    <t t-set="_title">Blog</t>
+                    <t t-set="_text">Stay informed of our latest news and discover what will happen in the next weeks.</t>
+                </t>
+                <t t-call="website.s_mega_menu_cards_item">
+                    <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_7"/>
+                    <t t-set="_title">Deliveries</t>
+                    <t t-set="_text">Find all information about our deliveries, express deliveries and all you need to know to return a product.</t>
+                </t>
+                <t t-call="website.s_mega_menu_cards_item">
+                    <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_8"/>
+                    <t t-set="_title">Points of sale</t>
+                    <t t-set="_text">Need to pick up your order at one of our stores? Discover the nearest to you.</t>
+                </t>
+            </nav>
+        </div>
+    </section>
+</template>
+
+<template id="s_mega_menu_cards_item">
+    <div class="col-12 col-sm-6 col-md" data-name="Menu Item">
+        <a href="#" class="nav-link o_default_snippet_text rounded text-wrap text-center p-3">
+            <img t-att-src="_img_src" class="mb-3 rounded shadow img-fluid" alt=""/>
+            <h4 t-esc="_title"/>
+            <p class="o_default_snippet_text mb-0"><font style="font-size: 14px;" t-esc="_text"/></p>
+        </a>
+    </div>
+</template>
+
+<record id="website.s_mega_menu_cards_000_scss" model="ir.asset">
+    <field name="name">Menu - Cards 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website/static/src/snippets/s_mega_menu_cards/000.scss</field>
+</record>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_mega_menu_images_subtitles.xml b/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
new file mode 100644
index 00000000000..a95ecd5b059
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_images_subtitles" name="Menu - images &amp; subtitles">
+    <section class="s_mega_menu_images_subtitles pt16 pb16">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-sm-6 col-lg py-2">
+                    <nav class="nav flex-column w-100">
+                        <t t-call="website.s_mega_menu_images_subtitles_item">
+                            <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_1"/>
+                            <t t-set="_title">About us</t>
+                            <t t-set="_text">Discover our culture and our values</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_images_subtitles_item">
+                            <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_2"/>
+                            <t t-set="_title">Customers</t>
+                            <t t-set="_text">They trust us since years</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_images_subtitles_item">
+                            <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_3"/>
+                            <t t-set="_title">Services</t>
+                            <t t-set="_text">Find the perfect solution for you</t>
+                        </t>
+                    </nav>
+                </div>
+                <div class="col-12 col-sm-6 col-lg py-2">
+                    <nav class="nav flex-column w-100">
+                        <t t-call="website.s_mega_menu_images_subtitles_item">
+                            <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_4"/>
+                            <t t-set="_title">Blog</t>
+                            <t t-set="_text">Latests news and case studies</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_images_subtitles_item">
+                            <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_5"/>
+                            <t t-set="_title">Events</t>
+                            <t t-set="_text">Our seminars and trainings for you</t>
+                        </t>
+                        <t t-call="website.s_mega_menu_images_subtitles_item">
+                            <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_6"/>
+                            <t t-set="_title">Help center</t>
+                            <t t-set="_text">Contact us for any issue or question</t>
+                        </t>
+                    </nav>
+                </div>
+                <div class="col col-md-6 col-lg py-2">
+                    <img src="/web/image/website.s_mega_menu_images_subtitles_default_image_7" class="mb-3 rounded shadow img-fluid" alt=""/>
+                    <h4 class="o_default_snippet_text">The team</h4>
+                    <p class="text-muted o_default_snippet_text">
+                        <font style="font-size: 14px;">Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.</font>
+                    </p>
+                    <a href="#" class="btn btn-primary o_default_snippet_text">Discover our team</a>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_mega_menu_images_subtitles_item">
+    <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
+        <div class="media">
+            <img t-att-src="_img_src" class="mr-3 rounded shadow" alt=""/>
+            <div class="media-body">
+                <h4 class="mt-0 mb-0" t-esc="_title"/>
+                <span><font style="font-size: 14px;" t-esc="_text"/></span>
+            </div>
+        </div>
+    </a>
+</template>
+
+<record id="website.s_mega_menu_images_subtitles_000_scss" model="ir.asset">
+    <field name="name">Menu - images &amp; subtitles 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website/static/src/snippets/s_mega_menu_images_subtitles/000.scss</field>
+</record>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_mega_menu_little_icons.xml b/addons/website/views/snippets/s_mega_menu_little_icons.xml
new file mode 100644
index 00000000000..16f9ccafcec
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_little_icons.xml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_little_icons" name="Menu - Little icons">
+    <section class="s_mega_menu_little_icons overflow-hidden">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-sm py-2 d-flex align-items-center">
+                    <nav class="nav flex-column">
+                        <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-eye fa-fw mr-2"></i>
+                            <b>About us</b>
+                        </a>
+                        <a href="#" class="nav-link o_default_snippet_text px-2 text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-group fa-fw mr-2"></i>
+                            <b>Partners</b>
+                        </a>
+                        <a href="#" class="nav-link o_default_snippet_text px-2 text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-star-o fa-fw mr-2"></i>
+                            <b>Customers</b>
+                        </a>
+                    </nav>
+                </div>
+                <div class="col-12 col-sm py-2 d-flex align-items-center">
+                    <nav class="nav flex-column">
+                        <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-tags fa-fw mr-2"></i>
+                            <b>Products</b>
+                        </a>
+                        <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-handshake-o fa-fw mr-2"></i>
+                            <b>Services</b>
+                        </a>
+                        <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-headphones fa-fw mr-2"></i>
+                            <b>Help center</b>
+                        </a>
+                    </nav>
+                </div>
+                <div class="col-12 col-sm py-2 d-flex align-items-center">
+                    <nav class="nav flex-column">
+                        <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-newspaper-o fa-fw mr-2"></i>
+                            <b>Our blog</b>
+                        </a>
+                        <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-calendar fa-fw mr-2"></i>
+                            <b>Events</b>
+                        </a>
+                        <a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
+                            <i class="s_mega_menu_little_icons_icon fa fa-map-o fa-fw mr-2"></i>
+                            <b>Guides</b>
+                        </a>
+                    </nav>
+                </div>
+                <div class="col-lg-4 p-4 s_mega_menu_gray_area">
+                    <h4 class="o_default_snippet_text">The team</h4>
+                    <p class="text-muted o_default_snippet_text">
+                        <font style="font-size: 14px;">Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.</font>
+                    </p>
+                    <a href="#" class="btn btn-primary o_default_snippet_text">Discover our team</a>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<record id="website.s_mega_menu_little_icons_000_scss" model="ir.asset">
+    <field name="name">Menu - Little icons 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website/static/src/snippets/s_mega_menu_little_icons/000.scss</field>
+</record>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_mega_menu_menu_image_menu.xml b/addons/website/views/snippets/s_mega_menu_menu_image_menu.xml
index 061b30a27d2..fc99800c9fd 100644
--- a/addons/website/views/snippets/s_mega_menu_menu_image_menu.xml
+++ b/addons/website/views/snippets/s_mega_menu_menu_image_menu.xml
@@ -5,7 +5,7 @@
     <section class="s_mega_menu_menu_image_menu py-4">
         <div class="container">
             <div class="row align-items-center">
-                <div class="col-lg-4 py-2 text-center">
+                <div class="col-12 col-sm py-2 text-center">
                     <h4 class="o_default_snippet_text" >Left Menu</h4>
                     <nav class="nav flex-column">
                         <t t-foreach="3" t-as="i">
@@ -16,10 +16,10 @@
                         </t>
                     </nav>
                 </div>
-                <div class="col-lg-4 py-2 text-center">
+                <div class="col-12 col-sm py-2 text-center">
                     <img class="img-fluid" src="/web/image/website.s_mega_menu_menu_image_menu_default_image"/>
                 </div>
-                <div class="col-lg-4 py-2 text-center">
+                <div class="col-12 col-sm py-2 text-center">
                     <h4 class="o_default_snippet_text">Right Menu</h4>
                     <nav class="nav flex-column">
                         <t t-foreach="3" t-as="i">
diff --git a/addons/website/views/snippets/s_mega_menu_menus_logos.xml b/addons/website/views/snippets/s_mega_menu_menus_logos.xml
new file mode 100644
index 00000000000..b713e1b134b
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_menus_logos.xml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_menus_logos" name="Menus &amp; logos">
+    <section class="s_mega_menu_menus_logos overflow-hidden">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-lg-8">
+                    <div class="row py-3 align-items-center h-100">
+                        <div class="col-12 col-sm-6 col-md-4 col-lg py-2">
+                            <h4 class="o_default_snippet_text">Women</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Jacket</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Dresses</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Tops</a>
+                            </nav>
+                        </div>
+                        <div class="col-12 col-sm-6 col-md-4 col-lg py-2">
+                            <h4 class="o_default_snippet_text">Men</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Hoodies</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Blazers</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Jeans</a>
+                            </nav>
+                        </div>
+                        <div class="col-12 col-sm-6 col-md-4 col-lg py-2">
+                            <h4 class="o_default_snippet_text">Children</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">T-shirts</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Pants</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Shoes</a>
+                            </nav>
+                        </div>
+                        <div class="w-100 d-none d-md-block"></div>
+                        <div class="col-12 col-sm-6 col-md-4 col-lg py-2">
+                            <h4 class="o_default_snippet_text">New collection</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Women</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Men</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Children</a>
+                            </nav>
+                        </div>
+                        <div class="col-12 col-sm-6 col-md-4 col-lg py-2">
+                            <h4 class="o_default_snippet_text">Accessories</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Bags</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Watches</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Glasses</a>
+                            </nav>
+                        </div>
+                        <div class="col-12 col-sm-6 col-md-4 col-lg py-2">
+                            <h4 class="o_default_snippet_text">Promotions</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Women</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Men</a>
+                                <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Children</a>
+                            </nav>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-4 py-4 d-flex align-items-center justify-content-center s_mega_menu_gray_area">
+                    <a href="#" class="nav-link o_default_snippet_text text-center px-0" data-name="Menu Item">
+                        <img src="/web/image/website.s_mega_menu_menus_logos_default_image" class="mb-3 rounded shadow img-fluid" alt=""/>
+                        <h4 class="o_default_snippet_text">Spring collection has arrived !</h4>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="s_mega_menu_menus_logos_wrapper border-top">
+            <div class="container">
+                <div class="row py-3">
+                    <div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_1" class="img-fluid" alt=""/></div>
+                    <div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_2" class="img-fluid" alt=""/></div>
+                    <div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_3" class="img-fluid" alt=""/></div>
+                    <div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_4" class="img-fluid" alt=""/></div>
+                    <div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_5" class="img-fluid" alt=""/></div>
+                    <div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_6" class="img-fluid" alt=""/></div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<record id="website.s_mega_menu_menus_logos_000_scss" model="ir.asset">
+    <field name="name">Menus &amp; logos 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website/static/src/snippets/s_mega_menu_menus_logos/000.scss</field>
+</record>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_mega_menu_multi_menus.xml b/addons/website/views/snippets/s_mega_menu_multi_menus.xml
index 5672fb0c6e8..87177e3dd1b 100644
--- a/addons/website/views/snippets/s_mega_menu_multi_menus.xml
+++ b/addons/website/views/snippets/s_mega_menu_multi_menus.xml
@@ -10,7 +10,7 @@
                 <t t-set="menu3_title">Third Menu</t>
                 <t t-set="menu4_title">Last Menu</t>
                 <t t-foreach="[menu1_title, menu2_title, menu3_title, menu4_title]" t-as="menu_title">
-                    <div class="col-lg-3 py-2 text-center">
+                    <div class="col-12 col-sm py-2 text-center">
                         <h4 class="o_default_snippet_text" t-esc="menu_title"/>
                         <nav class="nav flex-column">
                             <t t-foreach="3" t-as="i">
diff --git a/addons/website/views/snippets/s_mega_menu_odoo_menu.xml b/addons/website/views/snippets/s_mega_menu_odoo_menu.xml
new file mode 100644
index 00000000000..d40767bb346
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_odoo_menu.xml
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_odoo_menu" name="Odoo Menu">
+    <section class="s_mega_menu_odoo_menu pt16">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 col-lg pt16 pb24">
+                    <h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Computers &amp; Devices</h4>
+                    <div class="s_hr text-left pt4 pb16 text-o-color-3">
+                        <hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
+                    </div>
+                    <nav class="nav flex-column">
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Laptops</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Desktop computers</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Components</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Tablets</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Smartphones</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">iPhone</a>
+                    </nav>
+                </div>
+                <div class="col-md-6 col-lg pt16 pb24">
+                    <h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Monitors</h4>
+                    <div class="s_hr text-left pt4 pb16 text-o-color-1">
+                        <hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
+                    </div>
+                    <nav class="nav flex-column">
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Televisions</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Office screens</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Projectors</a>
+                    </nav>
+                </div>
+                <div class="col-md-6 col-lg pt16 pb24">
+                    <h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Electronics</h4>
+                    <div class="s_hr text-left pt4 pb16 text-o-color-2">
+                        <hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
+                    </div>
+                    <nav class="nav flex-column">
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Camera</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">GPS &amp; navigation</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Accessories</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Home audio</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Office audio</a>
+                    </nav>
+                </div>
+                <div class="col-md-6 col-lg pt16 pb24">
+                    <h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Promotions</h4>
+                    <div class="s_hr text-left pt4 pb16 text-o-color-5">
+                        <hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
+                    </div>
+                    <nav class="nav flex-column">
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Computers</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Electronics</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Monitors</a>
+                        <a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Networks</a>
+                    </nav>
+                </div>
+            </div>
+        </div>
+        <div class="container-fluid border-top s_mega_menu_odoo_menu_footer">
+            <div class="row">
+                <div class="col-12 pt8 pb8">
+                    <nav class="nav justify-content-center">
+                        <a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 14px;"><i class="fa fa-fw fa-2x fa-github"></i></a>
+                        <a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-youtube-play"></i></a>
+                        <a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-twitter"></i></a>
+                        <a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-linkedin"></i></a>
+                        <a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-instagram"></i></a>
+                        <a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-facebook"></i></a>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<record id="website.s_mega_menu_odoo_menu_000_scss" model="ir.asset">
+    <field name="name">Odoo Menu 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website/static/src/snippets/s_mega_menu_odoo_menu/000.scss</field>
+</record>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_mega_menu_thumbnails.xml b/addons/website/views/snippets/s_mega_menu_thumbnails.xml
new file mode 100644
index 00000000000..c50390c8d36
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_thumbnails.xml
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_thumbnails" name="Menu - Thumbnails">
+    <section class="s_mega_menu_thumbnails pt24">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-12 col-sm col-md-12 col-lg px-0">
+                    <div class="container">
+                        <div class="row">
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_1"/>
+                                <t t-set="_text">Laptops</t>
+                            </t>
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_2"/>
+                                <t t-set="_text">Mouse</t>
+                            </t>
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_3"/>
+                                <t t-set="_text">Keyboards</t>
+                            </t>
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_4"/>
+                                <t t-set="_text">Printers</t>
+                            </t>
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_5"/>
+                                <t t-set="_text">Storage</t>
+                            </t>
+
+                            <div class="w-100 d-none d-md-block"/>
+
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_6"/>
+                                <t t-set="_text">Tablets</t>
+                            </t>
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_7"/>
+                                <t t-set="_text">Phones</t>
+                            </t>
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_8"/>
+                                <t t-set="_text">Screens</t>
+                            </t>
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_9"/>
+                                <t t-set="_text">Gaming</t>
+                            </t>
+                            <t t-call="website.s_mega_menu_thumbnails_item">
+                                <t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_10"/>
+                                <t t-set="_text">Sound</t>
+                            </t>
+                        </div>
+                    </div>
+                </div>
+                <div class="col col-sm-6 col-md-4 col-lg-3 text-center py-2">
+                    <a href="#" class="nav-link p-0 o_default_snippet_text" data-name="Menu Item">
+                        <img class="img-fluid rounded shadow" src="/web/image/website.s_mega_menu_thumbnails_default_image_11" alt=""/>
+                        <span class="d-block p-2">
+                            <b><font style="font-size:14px;">Discover our new products</font></b>
+                        </span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="s_mega_menu_thumbnails_footer px-0">
+            <div class="container row mx-auto px-0 w-100 align-items-center">
+                <div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
+                    <p class="text-muted align-middle m-0">
+                        <i class="s_mega_menu_thumbnails_icon fa fa-cube mr-2"></i> Free returns
+                    </p>
+                </div>
+                <div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
+                    <p class="text-muted align-middle m-0">
+                        <i class="s_mega_menu_thumbnails_icon fa fa-shopping-basket mr-2"></i> Pickup in store
+                    </p>
+                </div>
+                <div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
+                    <p class="text-muted align-middle m-0">
+                        <i class="s_mega_menu_thumbnails_icon fa fa-truck mr-2"></i> Express delivery
+                    </p>
+                </div>
+                <div class="col-12 col-md-6 col-lg py-2">
+                    <a href="#" class="btn btn-secondary d-block o_default_snippet_text">
+                        <i class="s_mega_menu_thumbnails_icon fa fa-comments mr-2"></i> Contact us
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_mega_menu_thumbnails_item">
+    <div class="col-6 col-sm text-center py-2">
+        <a href="#" class="nav-link o_default_snippet_text p-0" data-name="Menu Item">
+            <img class="img-fluid rounded shadow" t-att-src="_img_src" alt=""/>
+            <br/>
+            <span class="d-block p-2">
+                <b>
+                    <font style="font-size:14px;" t-esc="_text"/>
+                </b>
+            </span>
+        </a>
+    </div>
+</template>
+
+<record id="website.s_mega_menu_thumbnails_000_scss" model="ir.asset">
+    <field name="name">Menu - Thumbnails 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website/static/src/snippets/s_mega_menu_thumbnails/000.scss</field>
+</record>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 4733f0c1916..2001de4946b 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -18,6 +18,13 @@
                 <div class="o_panel_body">
                     <t t-snippet="website.s_mega_menu_multi_menus" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg"/>
                     <t t-snippet="website.s_mega_menu_menu_image_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg"/>
+                    <t t-snippet="website.s_mega_menu_odoo_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_odoo_menu.svg"/>
+                    <t t-snippet="website.s_mega_menu_little_icons" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_little_icons.svg"/>
+                    <t t-snippet="website.s_mega_menu_big_icons_subtitles" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_big_icons_subtitles.svg"/>
+                    <t t-snippet="website.s_mega_menu_images_subtitles" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_images_subtitles.svg"/>
+                    <t t-snippet="website.s_mega_menu_menus_logos" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_menus_logos.svg"/>
+                    <t t-snippet="website.s_mega_menu_thumbnails" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_thumbnails.svg"/>
+                    <t t-snippet="website.s_mega_menu_cards" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_cards.svg"/>
                 </div>
             </div>
 
@@ -1000,7 +1007,7 @@
         </we-select>
     </div>
 
-    <div data-selector=".o_mega_menu .nav-link"
+    <div data-selector=".o_mega_menu .nav > .nav-link"
          data-drop-in=".o_mega_menu nav"
          data-drop-near=".o_mega_menu .nav-link"/>