From 0da7bee896c6ab37590d21b8625e67ecaf9f27a1 Mon Sep 17 00:00:00 2001
From: Andrea Stagi <stagi.andrea@gmail.com>
Date: Thu, 8 Feb 2024 15:41:49 +0100
Subject: [PATCH] feat: add megamenu component

---
 .../dropdown/dropdown/dropdown.component.html |   2 +-
 .../dropdown/dropdown/dropdown.component.ts   |   6 +
 .../navigation/header/header.component.html   |   4 +-
 .../navigation/header/header.component.ts     |   3 +
 .../megamenu/megamenu.component.html          |  34 +++++
 .../megamenu/megamenu.component.scss          |   5 +
 .../navigation/megamenu/megamenu.component.ts |  30 +++++
 .../src/lib/design-angular-kit.module.ts      |  10 +-
 projects/design-angular-kit/src/public_api.ts |   1 +
 src/app/app-routing.module.ts                 | 120 ++++++++++--------
 .../header-example.component.html             |  95 ++++++++++++--
 .../megamenu-cta-bottom.component.html        |  93 ++++++++++++++
 .../megamenu-cta-bottom.component.scss        |   0
 .../megamenu-cta-bottom.component.spec.ts     |  22 ++++
 .../megamenu-cta-bottom.component.ts          |   8 ++
 .../megamenu-cta-right.component.html         |  77 +++++++++++
 .../megamenu-cta-right.component.scss         |   0
 .../megamenu-cta-right.component.spec.ts      |  22 ++++
 .../megamenu-cta-right.component.ts           |   8 ++
 .../megamenu-example.component.html           |  67 ++++++++++
 .../megamenu-example.component.spec.ts        |  22 ++++
 .../megamenu-example.component.ts             |   7 +
 .../megamenu-examples.component.spec.ts       |  22 ++++
 .../megamenu-examples.component.tpl           |  40 ++++++
 .../megamenu-examples.component.ts            |   7 +
 .../megamenu-index.component.html             |  12 ++
 .../megamenu-index.component.ts               |  15 +++
 src/app/megamenu/megamenu-routing.module.ts   |  11 ++
 src/app/megamenu/megamenu.module.ts           |  21 +++
 src/assets/table-of-content.json              |   4 +
 src/styles.scss                               |   2 +-
 31 files changed, 700 insertions(+), 70 deletions(-)
 create mode 100644 projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html
 create mode 100644 projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.scss
 create mode 100644 projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.ts
 create mode 100644 src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.html
 create mode 100644 src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.scss
 create mode 100644 src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.spec.ts
 create mode 100644 src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.ts
 create mode 100644 src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.html
 create mode 100644 src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.scss
 create mode 100644 src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.spec.ts
 create mode 100644 src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.ts
 create mode 100644 src/app/megamenu/megamenu-example/megamenu-example.component.html
 create mode 100644 src/app/megamenu/megamenu-example/megamenu-example.component.spec.ts
 create mode 100644 src/app/megamenu/megamenu-example/megamenu-example.component.ts
 create mode 100644 src/app/megamenu/megamenu-examples/megamenu-examples.component.spec.ts
 create mode 100644 src/app/megamenu/megamenu-examples/megamenu-examples.component.tpl
 create mode 100644 src/app/megamenu/megamenu-examples/megamenu-examples.component.ts
 create mode 100644 src/app/megamenu/megamenu-index/megamenu-index.component.html
 create mode 100644 src/app/megamenu/megamenu-index/megamenu-index.component.ts
 create mode 100644 src/app/megamenu/megamenu-routing.module.ts
 create mode 100644 src/app/megamenu/megamenu.module.ts

diff --git a/projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.html b/projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.html
index cddf70d0..171461f5 100644
--- a/projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.html
@@ -1,4 +1,4 @@
-<div class="dropdown {{ direction }}" [class.nav-item]="mode === 'nav'">
+<div class="dropdown {{ direction }}" [class.nav-item]="mode === 'nav'" [class.megamenu]="megamenu">
   @if (mode === 'button') {
     <button
       #dropdownButton
diff --git a/projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.ts b/projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.ts
index 2f108df6..10a14119 100644
--- a/projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.ts
@@ -54,6 +54,12 @@ export class ItDropdownComponent extends ItAbstractComponent implements AfterVie
    */
   @Input({ transform: inputToBoolean }) fullWidth?: boolean;
 
+  /**
+   * Contains a Megamenu element
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) megamenu?: boolean;
+
   /**
    * Dark menu style
    * @default false
diff --git a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html
index cd872de2..3db2cf23 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html
+++ b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html
@@ -54,7 +54,7 @@
   }
   <div class="it-nav-wrapper">
     <div class="it-header-center-wrapper" [class.it-small-header]="smallHeader" [class.theme-light]="light">
-      <div class="container-fluid">
+      <div class="container">
         <div class="row">
           <div class="col-12">
             <div class="it-header-center-content-wrapper">
@@ -86,7 +86,7 @@
       <div class="container">
         <div class="row">
           <div class="col-12">
-            <it-navbar>
+            <it-navbar [megamenu]="megamenu" [expand]="expand">
               <ng-container navItems>
                 <ng-content select="[navItems]"></ng-content>
               </ng-container>
diff --git a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts
index f53c4ba3..7850f6d3 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts
+++ b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts
@@ -47,6 +47,9 @@ export class ItHeaderComponent implements AfterViewInit, OnChanges {
 
   @ViewChild('headerWrapper') private headerWrapper?: ElementRef<HTMLButtonElement>;
 
+  @Input({ transform: inputToBoolean }) megamenu?: boolean;
+  @Input({ transform: inputToBoolean }) expand?: boolean = true;
+
   private stickyHeader?: HeaderSticky;
 
   constructor() {
diff --git a/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html b/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html
new file mode 100644
index 00000000..5a915052
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html
@@ -0,0 +1,34 @@
+<div class="megamenu pb-5 pt-3 py-lg-0">
+  <div class="row">
+    @if (mode === 'left-section') {
+      <div class="col-xs-12 col-lg-4 px-0">
+        <div class="row">
+          <div class="col-12 it-vertical it-description pb-lg-3">
+            <div class="description-content ps-4 ps-sm-5 ms-3">
+              <ng-content select="[megamenuLeftZone]"></ng-content>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+    <div class="col-12" [class.col-lg-8]="mode !== 'normal'">
+      @if (header) {
+        <div class="it-heading-link-wrapper">
+          <ng-content select="[megamenuHeadingLink]"></ng-content>
+        </div>
+      }
+      <div class="row">
+        <ng-content select="[megamenuLinkList]"></ng-content>
+      </div>
+    </div>
+    @if (footer || mode === 'right-section') {
+      <div [class.col-xs-12]="mode === 'right-section'" [class.col-lg-4]="mode === 'right-section'" [class.px-0]="mode === 'right-section'">
+        <div [class.it-footer-link-wrapper]="footer" [class.it-footer-link-wrapper-vertical]="mode === 'right-section'">
+          <div class="d-flex flex-column justify-content-around" [class.flex-lg-row]="mode !== 'right-section'">
+            <ng-content select="[megamenuFooter]"></ng-content>
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+</div>
diff --git a/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.scss b/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.scss
new file mode 100644
index 00000000..7374c3e7
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.scss
@@ -0,0 +1,5 @@
+::ng-deep .theme-light-desk {
+  .nav-link::before {
+    background-color: #06c;
+  }
+}
diff --git a/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.ts b/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.ts
new file mode 100644
index 00000000..15209893
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.ts
@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-megamenu',
+  templateUrl: './megamenu.component.html',
+  styleUrls: ['./megamenu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet],
+})
+export class ItMegamenuComponent {
+  /**
+   * Megamenu mode
+   */
+  @Input() mode: 'right-section' | 'left-section' | 'normal' = 'normal';
+
+  /**
+   * To show Megamenu header
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) header?: boolean;
+
+  /**
+   * To show Megamenu footer
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) footer?: boolean;
+}
diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
index 5b81fc23..4b164832 100644
--- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
+++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
@@ -16,6 +16,7 @@ import { ItDropdownModule } from './components/core/dropdown/dropdown.module';
 import { ItForwardDirective } from './components/core/forward/forward.directive';
 import { ItLinkComponent } from './components/core/link/link.component';
 import { ItListModule } from './components/core/list/list.module';
+import { ItMegamenuComponent } from './components/navigation/megamenu/megamenu.component';
 import { ItModalComponent } from './components/core/modal/modal.component';
 import { ItNotificationsComponent } from './components/core/notifications/notifications.component';
 import { ItPaginationComponent } from './components/core/pagination/pagination.component';
@@ -75,7 +76,14 @@ const core = [
 /**
  * Navigation Components
  */
-const navigation = [ItBackButtonComponent, ItBackToTopComponent, ItBreadcrumbsModule, ItHeaderComponent, ItNavBarModule];
+const navigation = [
+  ItBackButtonComponent,
+  ItBackToTopComponent,
+  ItBreadcrumbsModule,
+  ItHeaderComponent,
+  ItNavBarModule,
+  ItMegamenuComponent,
+];
 
 /**
  * Utils components
diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts
index e969cf27..e0c2095f 100644
--- a/projects/design-angular-kit/src/public_api.ts
+++ b/projects/design-angular-kit/src/public_api.ts
@@ -88,6 +88,7 @@ export * from './lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.com
 export * from './lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component';
 
 export * from './lib/components/navigation/header/header.component';
+export * from './lib/components/navigation/megamenu/megamenu.component';
 
 export * from './lib/components/navigation/navbar/navbar.module';
 export * from './lib/components/navigation/navbar/navbar/navbar.component';
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 04bdbaab..74c1fb21 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,65 +3,79 @@ import { Routes, RouterModule } from '@angular/router';
 import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher.component';
 import { ItErrorPageComponent } from 'design-angular-kit/components/utils/error-page/error-page.component';
 
-
 const routes: Routes = [
   { path: '', redirectTo: 'info', pathMatch: 'full' },
-  { path: 'info', component: RouterDispatcherComponent, children: [
-    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
-    { path: 'welcome', loadChildren: () => import('src/app/welcome/welcome.module').then(m => m.WelcomeModule) }
-  ]},
-  { path: 'componenti', component: RouterDispatcherComponent, children: [
-    { path: '', redirectTo: 'badge', pathMatch: 'full' },
-    { path: 'avatar', loadChildren: () => import('src/app/avatar/avatar.module').then(m => m.AvatarModule) },
-    { path: 'badge', loadChildren: () => import('src/app/badge/badge.module').then(m => m.BadgeModule) },
-    { path: 'checkbox', loadChildren: () => import('src/app/checkbox/checkbox.module').then(m => m.CheckboxModule) },
-    { path: 'progress-bar', loadChildren: () => import('src/app/progress-bar/progress-bar.module').then(m => m.ProgressBarModule) },
-    { path: 'toggle', loadChildren: () => import('src/app/toggle/toggle.module').then(m => m.ToggleModule) },
-    { path: 'popover', loadChildren: () => import('src/app/popover/popover.module').then(m => m.PopoverModule) },
-    { path: 'radio', loadChildren: () => import('src/app/radio/radio.module').then(m => m.RadioModule) },
-    { path: 'breadcrumb', loadChildren: () => import('src/app/breadcrumb/breadcrumb.module').then(m => m.BreadcrumbModule) },
-    { path: 'tabs', loadChildren: () => import('src/app/tabs/tabs.module').then(m => m.TabsModule) },
-    { path: 'tooltip', loadChildren: () => import('src/app/tooltip/tooltip.module').then(m => m.TooltipModule) },
-    { path: 'button', loadChildren: () => import('src/app/button/button.module').then(m => m.ButtonModule) },
-    { path: 'header', loadChildren: () => import('src/app/header/header.module').then(m => m.HeaderModule) },
-    { path: 'collapse', loadChildren: () => import('src/app/collapse/collapse.module').then(m => m.CollapseModule) },
-    { path: 'form-input', loadChildren: () => import('src/app/form-input/form-input.module').then(m => m.FormInputModule) },
-    { path: 'dropdown', loadChildren: () => import('src/app/dropdown/dropdown.module').then(m => m.DropdownModule) },
-    { path: 'back-button', loadChildren: () => import('src/app/back-button/back-button.module').then(m => m.BackButtonModule) },
-    { path: 'back-to-top', loadChildren: () => import('src/app/back-to-top/back-to-top.module').then(m => m.BackToTopModule) },
-    { path: 'chip', loadChildren: () => import('src/app/chip/chip.module').then(m => m.ChipModule) },
-    { path: 'forward', loadChildren: () => import('src/app/forward/forward.module').then(m => m.ForwardModule) },
-    { path: 'dimmer', loadChildren: () => import('src/app/dimmer/dimmer.module').then(m => m.DimmerModule) },
-    { path: 'list', loadChildren: () => import('src/app/list/list.module').then(m => m.ListModule) },
-    { path: 'callout', loadChildren: () => import('src/app/callout/callout.module').then(m => m.CalloutModule) },
-    { path: 'upload', loadChildren: () => import('src/app/upload/upload.module').then(m => m.UploadModule) },
-    { path: 'steppers', loadChildren: () => import('src/app/steppers/steppers.module').then(m => m.SteppersModule) },
-    { path: 'select', loadChildren: () => import('src/app/select/select.module').then(m => m.SelectModule) },
-    { path: 'notifications', loadChildren: () => import('src/app/notifications/notifications.module').then(m => m.NotificationsModule) },
-    { path: 'rating', loadChildren: () => import('src/app/rating/rating.module').then(m => m.RatingModule) },
-    { path: 'pagination', loadChildren: () => import('src/app/pagination/pagination.module').then(m => m.PaginationModule) },
-    { path: 'table', loadChildren: () => import('src/app/table/table.module').then(m => m.TableModule) },
-    { path: 'textarea', loadChildren: () => import('src/app/textarea/textarea.module').then(m => m.TextareaModule) },
-    { path: 'alert', loadChildren: () => import('src/app/alert/alert.module').then(m => m.AlertModule) },
-    { path: 'spinner', loadChildren: () => import('src/app/spinner/spinner.module').then(m => m.SpinnerModule) },
-    { path: 'icon', loadChildren: () => import('src/app/icon/icon.module').then(m => m.IconModule) },
-    { path: 'error-page', loadChildren: () => import('src/app/error-page/error-page.module').then(m => m.ErrorPageModule) },
-    { path: 'modal', loadChildren: () => import('src/app/modal/modal.module').then(m => m.ModalModule) },
-    { path: 'language-switcher', loadChildren: () => import('src/app/language-switcher/language-switcher.module').then(m => m.LanguageSwitcherModule) },
-    { path: 'password-input', loadChildren: () => import('src/app/password-input/password-input.module').then(m => m.PasswordInputModule) },
-    { path: 'carousel', loadChildren: () => import('src/app/carousel/carousel.module').then(m => m.CarouselModule) },
-    { path: 'card', loadChildren: () => import('src/app/card/card.module').then(m => m.CardModule) },
-    { path: 'range', loadChildren: () => import('src/app/range/range.module').then(m => m.RangeModule) },
-    { path: 'autocomplete', loadChildren: () => import('src/app/autocomplete/autocomplete.module').then(m => m.AutocompleteModule) },
-  ]},
+  {
+    path: 'info',
+    component: RouterDispatcherComponent,
+    children: [
+      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
+      { path: 'welcome', loadChildren: () => import('src/app/welcome/welcome.module').then(m => m.WelcomeModule) },
+    ],
+  },
+  {
+    path: 'componenti',
+    component: RouterDispatcherComponent,
+    children: [
+      { path: '', redirectTo: 'badge', pathMatch: 'full' },
+      { path: 'avatar', loadChildren: () => import('src/app/avatar/avatar.module').then(m => m.AvatarModule) },
+      { path: 'badge', loadChildren: () => import('src/app/badge/badge.module').then(m => m.BadgeModule) },
+      { path: 'checkbox', loadChildren: () => import('src/app/checkbox/checkbox.module').then(m => m.CheckboxModule) },
+      { path: 'progress-bar', loadChildren: () => import('src/app/progress-bar/progress-bar.module').then(m => m.ProgressBarModule) },
+      { path: 'toggle', loadChildren: () => import('src/app/toggle/toggle.module').then(m => m.ToggleModule) },
+      { path: 'popover', loadChildren: () => import('src/app/popover/popover.module').then(m => m.PopoverModule) },
+      { path: 'radio', loadChildren: () => import('src/app/radio/radio.module').then(m => m.RadioModule) },
+      { path: 'breadcrumb', loadChildren: () => import('src/app/breadcrumb/breadcrumb.module').then(m => m.BreadcrumbModule) },
+      { path: 'tabs', loadChildren: () => import('src/app/tabs/tabs.module').then(m => m.TabsModule) },
+      { path: 'tooltip', loadChildren: () => import('src/app/tooltip/tooltip.module').then(m => m.TooltipModule) },
+      { path: 'button', loadChildren: () => import('src/app/button/button.module').then(m => m.ButtonModule) },
+      { path: 'header', loadChildren: () => import('src/app/header/header.module').then(m => m.HeaderModule) },
+      { path: 'collapse', loadChildren: () => import('src/app/collapse/collapse.module').then(m => m.CollapseModule) },
+      { path: 'form-input', loadChildren: () => import('src/app/form-input/form-input.module').then(m => m.FormInputModule) },
+      { path: 'dropdown', loadChildren: () => import('src/app/dropdown/dropdown.module').then(m => m.DropdownModule) },
+      { path: 'back-button', loadChildren: () => import('src/app/back-button/back-button.module').then(m => m.BackButtonModule) },
+      { path: 'back-to-top', loadChildren: () => import('src/app/back-to-top/back-to-top.module').then(m => m.BackToTopModule) },
+      { path: 'chip', loadChildren: () => import('src/app/chip/chip.module').then(m => m.ChipModule) },
+      { path: 'forward', loadChildren: () => import('src/app/forward/forward.module').then(m => m.ForwardModule) },
+      { path: 'dimmer', loadChildren: () => import('src/app/dimmer/dimmer.module').then(m => m.DimmerModule) },
+      { path: 'list', loadChildren: () => import('src/app/list/list.module').then(m => m.ListModule) },
+      { path: 'megamenu', loadChildren: () => import('src/app/megamenu/megamenu.module').then(m => m.MegamenuModule) },
+      { path: 'callout', loadChildren: () => import('src/app/callout/callout.module').then(m => m.CalloutModule) },
+      { path: 'upload', loadChildren: () => import('src/app/upload/upload.module').then(m => m.UploadModule) },
+      { path: 'steppers', loadChildren: () => import('src/app/steppers/steppers.module').then(m => m.SteppersModule) },
+      { path: 'select', loadChildren: () => import('src/app/select/select.module').then(m => m.SelectModule) },
+      { path: 'notifications', loadChildren: () => import('src/app/notifications/notifications.module').then(m => m.NotificationsModule) },
+      { path: 'rating', loadChildren: () => import('src/app/rating/rating.module').then(m => m.RatingModule) },
+      { path: 'pagination', loadChildren: () => import('src/app/pagination/pagination.module').then(m => m.PaginationModule) },
+      { path: 'table', loadChildren: () => import('src/app/table/table.module').then(m => m.TableModule) },
+      { path: 'textarea', loadChildren: () => import('src/app/textarea/textarea.module').then(m => m.TextareaModule) },
+      { path: 'alert', loadChildren: () => import('src/app/alert/alert.module').then(m => m.AlertModule) },
+      { path: 'spinner', loadChildren: () => import('src/app/spinner/spinner.module').then(m => m.SpinnerModule) },
+      { path: 'icon', loadChildren: () => import('src/app/icon/icon.module').then(m => m.IconModule) },
+      { path: 'error-page', loadChildren: () => import('src/app/error-page/error-page.module').then(m => m.ErrorPageModule) },
+      { path: 'modal', loadChildren: () => import('src/app/modal/modal.module').then(m => m.ModalModule) },
+      {
+        path: 'language-switcher',
+        loadChildren: () => import('src/app/language-switcher/language-switcher.module').then(m => m.LanguageSwitcherModule),
+      },
+      {
+        path: 'password-input',
+        loadChildren: () => import('src/app/password-input/password-input.module').then(m => m.PasswordInputModule),
+      },
+      { path: 'carousel', loadChildren: () => import('src/app/carousel/carousel.module').then(m => m.CarouselModule) },
+      { path: 'card', loadChildren: () => import('src/app/card/card.module').then(m => m.CardModule) },
+      { path: 'range', loadChildren: () => import('src/app/range/range.module').then(m => m.RangeModule) },
+      { path: 'autocomplete', loadChildren: () => import('src/app/autocomplete/autocomplete.module').then(m => m.AutocompleteModule) },
+    ],
+  },
   { path: 'error/not-found', component: ItErrorPageComponent, data: { errorCode: 404 } },
   { path: 'error/forbidden', component: ItErrorPageComponent, data: { errorCode: 403 } },
   { path: 'error/server-error', component: ItErrorPageComponent, data: { errorCode: 500 } },
-  { path: '**', redirectTo: 'error/not-found'  }
+  { path: '**', redirectTo: 'error/not-found' },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, {useHash: true, scrollPositionRestoration: 'enabled'})],
-  exports: [RouterModule]
+  imports: [RouterModule.forRoot(routes, { useHash: true, scrollPositionRestoration: 'enabled' })],
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
diff --git a/src/app/header/header-example/header-example.component.html b/src/app/header/header-example/header-example.component.html
index a7cb3119..188b5046 100644
--- a/src/app/header/header-example/header-example.component.html
+++ b/src/app/header/header-example/header-example.component.html
@@ -1,6 +1,12 @@
 <h3>Componente Header</h3>
 <div class="bd-example">
-  <it-header slimTitle="Ente di appartenenza" [loginStyle]="login" [light]="light" [showSearch]="search" [sticky]="sticky">
+  <it-header
+    slimTitle="Ente di appartenenza"
+    [loginStyle]="login"
+    [light]="light"
+    [showSearch]="search"
+    [sticky]="sticky"
+    [megamenu]="true">
     <ul class="link-list" slimLinkList>
       <li><a class="dropdown-item list-item" href="#">Link 1</a></li>
       <li><a class="list-item active" href="#" aria-current="page">Link 2 (Attivo)</a></li>
@@ -38,10 +44,18 @@ <h3>Componente Header</h3>
       </ul>
     </div>
     <ng-container navItems>
-      <it-navbar-item><a class="nav-link active" href="#" aria-current="page"><span>Link 1 (attivo)</span></a></it-navbar-item>
-      <it-navbar-item><a class="nav-link disabled" href="#" aria-disabled="true"><span>Link 2 (disabilitato)</span></a></it-navbar-item>
-      <it-navbar-item><a class="nav-link" href="#"><span>Link 3</span></a></it-navbar-item>
-      <it-navbar-item><a class="nav-link" href="#"><span>Link 4</span></a></it-navbar-item>
+      <it-navbar-item
+        ><a class="nav-link active" href="#" aria-current="page"><span>Link 1 (attivo)</span></a></it-navbar-item
+      >
+      <it-navbar-item
+        ><a class="nav-link disabled" href="#" aria-disabled="true"><span>Link 2 (disabilitato)</span></a></it-navbar-item
+      >
+      <it-navbar-item
+        ><a class="nav-link" href="#"><span>Link 3</span></a></it-navbar-item
+      >
+      <it-navbar-item
+        ><a class="nav-link" href="#"><span>Link 4</span></a></it-navbar-item
+      >
       <it-navbar-item>
         <it-dropdown mode="nav">
           <span button>Menu dropdown</span>
@@ -51,6 +65,66 @@ <h3>Componente Header</h3>
           </ng-container>
         </it-dropdown>
       </it-navbar-item>
+      <it-navbar-item>
+        <it-dropdown mode="nav" [megamenu]="true">
+          <span button>Megamenu</span>
+          <ng-container list>
+            <it-megamenu [header]="true" [mode]="'left-section'">
+              <ng-container megamenuLeftZone>
+                <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
+                  <figure class="figure">
+                    <img
+                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      class="figure-img img-fluid rounded"
+                      alt="Segnaposto" />
+                  </figure>
+                </div>
+                <p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu 1</strong>.</p>
+              </ng-container>
+              <ng-container megamenuHeadingLink>
+                <a class="it-heading-link" href="#"
+                  ><it-icon name="arrow-right-triangle"></it-icon>
+                  <span>Esplora la sezione megamenu 1</span>
+                </a>
+              </ng-container>
+              <ng-container megamenuLinkList>
+                <div class="col-12 col-lg-6">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 1</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 2</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 3</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+                <div class="col-12 col-lg-6">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 4</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 5</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 6</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+              </ng-container>
+            </it-megamenu>
+          </ng-container>
+        </it-dropdown>
+      </it-navbar-item>
     </ng-container>
   </it-header>
   <div class="row">
@@ -62,12 +136,9 @@ <h5>Opzioni</h5>
     </div>
     <div class="form-check col-12 col-md-3">
       <h5>Tipologia di login</h5>
-      <it-radio-button name="default" [(ngModel)]="login" value="none"
-                       label="Nessuno"></it-radio-button>
-      <it-radio-button name="dropup" [(ngModel)]="login" value="default"
-                       label="Default"></it-radio-button>
-      <it-radio-button name="dropstart" [(ngModel)]="login" value="full"
-                       label="Pulsante largo"></it-radio-button>
+      <it-radio-button name="default" [(ngModel)]="login" value="none" label="Nessuno"></it-radio-button>
+      <it-radio-button name="dropup" [(ngModel)]="login" value="default" label="Default"></it-radio-button>
+      <it-radio-button name="dropstart" [(ngModel)]="login" value="full" label="Pulsante largo"></it-radio-button>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.html b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.html
new file mode 100644
index 00000000..7787d48e
--- /dev/null
+++ b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.html
@@ -0,0 +1,93 @@
+<h3>Componente Megamenu con CTA in basso</h3>
+<div class="bd-example">
+  <it-navbar [megamenu]="true" [expand]="true">
+    <ng-container navItems>
+      <it-navbar-item>
+        <it-dropdown mode="nav" [megamenu]="true">
+          <span button>Megamenu</span>
+          <ng-container list>
+            <it-megamenu [footer]="true">
+              <ng-container megamenuLeftZone>
+                <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
+                  <figure class="figure">
+                    <img
+                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      class="figure-img img-fluid rounded"
+                      alt="Segnaposto" />
+                  </figure>
+                </div>
+                <p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu 1</strong>.</p>
+              </ng-container>
+              <ng-container megamenuHeadingLink>
+                <a class="it-heading-link" href="#"
+                  ><it-icon name="arrow-right-triangle"></it-icon>
+                  <span>Esplora la sezione megamenu 1</span>
+                </a>
+              </ng-container>
+              <ng-container megamenuLinkList>
+                <div class="col-12 col-lg-4">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 1</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 2</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 3</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+                <div class="col-12 col-lg-4">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 4</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 5</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 6</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+                <div class="col-12 col-lg-4">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 7</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 8</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 9</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+              </ng-container>
+              <ng-container megamenuFooter>
+                <a class="it-footer-link" href="#">
+                  <it-icon name="bookmark"></it-icon>
+                  <span>Call to action 1</span>
+                </a>
+                <a class="it-footer-link" href="#">
+                  <it-icon name="bookmark"></it-icon>
+                  <span>Call to action 2</span>
+                </a>
+              </ng-container>
+            </it-megamenu>
+          </ng-container>
+        </it-dropdown>
+      </it-navbar-item>
+    </ng-container>
+  </it-navbar>
+</div>
diff --git a/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.scss b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.spec.ts b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.spec.ts
new file mode 100644
index 00000000..77a3ccf0
--- /dev/null
+++ b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MegamenuCtaBottomComponent } from './megamenu-cta-bottom.component';
+
+describe('MegamenuCtaBottomComponent', () => {
+  let component: MegamenuCtaBottomComponent;
+  let fixture: ComponentFixture<MegamenuCtaBottomComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MegamenuCtaBottomComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MegamenuCtaBottomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.ts b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.ts
new file mode 100644
index 00000000..28c089c4
--- /dev/null
+++ b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-megamenu-cta-bottom',
+  templateUrl: './megamenu-cta-bottom.component.html',
+  styleUrl: './megamenu-cta-bottom.component.scss',
+})
+export class MegamenuCtaBottomComponent {}
diff --git a/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.html b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.html
new file mode 100644
index 00000000..83b16ef4
--- /dev/null
+++ b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.html
@@ -0,0 +1,77 @@
+<h3>Componente Megamenu con CTA a destra</h3>
+<div class="bd-example">
+  <it-navbar [megamenu]="true" [expand]="true">
+    <ng-container navItems>
+      <it-navbar-item>
+        <it-dropdown mode="nav" [megamenu]="true">
+          <span button>Megamenu</span>
+          <ng-container list>
+            <it-megamenu [mode]="'right-section'">
+              <ng-container megamenuLeftZone>
+                <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
+                  <figure class="figure">
+                    <img
+                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      class="figure-img img-fluid rounded"
+                      alt="Segnaposto" />
+                  </figure>
+                </div>
+                <p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu 1</strong>.</p>
+              </ng-container>
+              <ng-container megamenuHeadingLink>
+                <a class="it-heading-link" href="#"
+                  ><it-icon name="arrow-right-triangle"></it-icon>
+                  <span>Esplora la sezione megamenu 1</span>
+                </a>
+              </ng-container>
+              <ng-container megamenuLinkList>
+                <div class="col-12 col-lg-6">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 1</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 2</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 3</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+                <div class="col-12 col-lg-6">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 4</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 5</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 6</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+              </ng-container>
+              <ng-container megamenuFooter>
+                <a class="it-footer-link" href="#">
+                  <it-icon name="bookmark"></it-icon>
+                  <span>Call to action 1</span>
+                </a>
+                <a class="it-footer-link" href="#">
+                  <it-icon name="bookmark"></it-icon>
+                  <span>Call to action 2</span>
+                </a>
+              </ng-container>
+            </it-megamenu>
+          </ng-container>
+        </it-dropdown>
+      </it-navbar-item>
+    </ng-container>
+  </it-navbar>
+</div>
diff --git a/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.scss b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.spec.ts b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.spec.ts
new file mode 100644
index 00000000..b54b17b2
--- /dev/null
+++ b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MegamenuCtaRightComponent } from './megamenu-cta-right.component';
+
+describe('MegamenuCtaRightComponent', () => {
+  let component: MegamenuCtaRightComponent;
+  let fixture: ComponentFixture<MegamenuCtaRightComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MegamenuCtaRightComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MegamenuCtaRightComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.ts b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.ts
new file mode 100644
index 00000000..23133e07
--- /dev/null
+++ b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-megamenu-cta-right',
+  templateUrl: './megamenu-cta-right.component.html',
+  styleUrl: './megamenu-cta-right.component.scss',
+})
+export class MegamenuCtaRightComponent {}
diff --git a/src/app/megamenu/megamenu-example/megamenu-example.component.html b/src/app/megamenu/megamenu-example/megamenu-example.component.html
new file mode 100644
index 00000000..35f0dfd1
--- /dev/null
+++ b/src/app/megamenu/megamenu-example/megamenu-example.component.html
@@ -0,0 +1,67 @@
+<h3>Componente Megamenu completo</h3>
+<div class="bd-example">
+  <it-navbar [megamenu]="true" [expand]="true">
+    <ng-container navItems>
+      <it-navbar-item>
+        <it-dropdown mode="nav" [megamenu]="true">
+          <span button>Megamenu</span>
+          <ng-container list>
+            <it-megamenu [mode]="'left-section'" [header]="true">
+              <ng-container megamenuLeftZone>
+                <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
+                  <figure class="figure">
+                    <img
+                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      class="figure-img img-fluid rounded"
+                      alt="Segnaposto" />
+                  </figure>
+                </div>
+                <p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu 1</strong>.</p>
+              </ng-container>
+              <ng-container megamenuHeadingLink>
+                <a class="it-heading-link" href="#"
+                  ><it-icon name="arrow-right-triangle"></it-icon>
+                  <span>Esplora la sezione megamenu 1</span>
+                </a>
+              </ng-container>
+              <ng-container megamenuLinkList>
+                <div class="col-12 col-lg-6">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 1</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 2</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 3</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+                <div class="col-12 col-lg-6">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 4</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 5</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 6</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+              </ng-container>
+            </it-megamenu>
+          </ng-container>
+        </it-dropdown>
+      </it-navbar-item>
+    </ng-container>
+  </it-navbar>
+</div>
diff --git a/src/app/megamenu/megamenu-example/megamenu-example.component.spec.ts b/src/app/megamenu/megamenu-example/megamenu-example.component.spec.ts
new file mode 100644
index 00000000..aaad7f58
--- /dev/null
+++ b/src/app/megamenu/megamenu-example/megamenu-example.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MegamenuExampleComponent } from './megamenu-example.component';
+
+describe('MegamenuExampleComponent', () => {
+  let component: MegamenuExampleComponent;
+  let fixture: ComponentFixture<MegamenuExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MegamenuExampleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MegamenuExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/megamenu/megamenu-example/megamenu-example.component.ts b/src/app/megamenu/megamenu-example/megamenu-example.component.ts
new file mode 100644
index 00000000..6d34c4d6
--- /dev/null
+++ b/src/app/megamenu/megamenu-example/megamenu-example.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-megamenu-example',
+  templateUrl: './megamenu-example.component.html',
+})
+export class MegamenuExampleComponent {}
diff --git a/src/app/megamenu/megamenu-examples/megamenu-examples.component.spec.ts b/src/app/megamenu/megamenu-examples/megamenu-examples.component.spec.ts
new file mode 100644
index 00000000..a2506ca7
--- /dev/null
+++ b/src/app/megamenu/megamenu-examples/megamenu-examples.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MegamenuExamplesComponent } from './megamenu-examples.component';
+
+describe('MegamenuExamplesComponent', () => {
+  let component: MegamenuExamplesComponent;
+  let fixture: ComponentFixture<MegamenuExamplesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MegamenuExamplesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MegamenuExamplesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/megamenu/megamenu-examples/megamenu-examples.component.tpl b/src/app/megamenu/megamenu-examples/megamenu-examples.component.tpl
new file mode 100644
index 00000000..b8126630
--- /dev/null
+++ b/src/app/megamenu/megamenu-examples/megamenu-examples.component.tpl
@@ -0,0 +1,40 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set htmlExample %}
+  {% include "../megamenu-example/megamenu-example.component.html" %}
+{% endset %}
+
+{% set typescriptExample %}
+  {% include "../megamenu-example/megamenu-example.component.ts" %}
+{% endset %}
+
+<it-megamenu-example></it-megamenu-example>
+
+<it-source-display html="{$ sanitize(htmlExample) $}" typescript="{$ sanitize(typescriptExample) $}" >
+</it-source-display>
+
+{% set htmlCTABottom %}
+  {% include "../megamenu-cta-bottom/megamenu-cta-bottom.component.html" %}
+{% endset %}
+
+{% set typescriptCTABottom %}
+  {% include "../megamenu-cta-bottom/megamenu-cta-bottom.component.ts" %}
+{% endset %}
+
+<it-megamenu-cta-bottom></it-megamenu-cta-bottom>
+
+<it-source-display html="{$ sanitize(htmlCTABottom) $}" typescript="{$ sanitize(typescriptCTABottom) $}" >
+</it-source-display>
+
+{% set htmlCTAright %}
+  {% include "../megamenu-cta-right/megamenu-cta-right.component.html" %}
+{% endset %}
+
+{% set typescriptCTAright %}
+  {% include "../megamenu-cta-right/megamenu-cta-right.component.ts" %}
+{% endset %}
+
+<it-megamenu-cta-right></it-megamenu-cta-right>
+
+<it-source-display html="{$ sanitize(htmlCTAright) $}" typescript="{$ sanitize(typescriptCTAright) $}" >
+</it-source-display>
\ No newline at end of file
diff --git a/src/app/megamenu/megamenu-examples/megamenu-examples.component.ts b/src/app/megamenu/megamenu-examples/megamenu-examples.component.ts
new file mode 100644
index 00000000..564f58e8
--- /dev/null
+++ b/src/app/megamenu/megamenu-examples/megamenu-examples.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-megamenu-examples',
+  templateUrl: './megamenu-examples.component.html',
+})
+export class MegamenuExamplesComponent {}
diff --git a/src/app/megamenu/megamenu-index/megamenu-index.component.html b/src/app/megamenu/megamenu-index/megamenu-index.component.html
new file mode 100644
index 00000000..3c1be236
--- /dev/null
+++ b/src/app/megamenu/megamenu-index/megamenu-index.component.html
@@ -0,0 +1,12 @@
+<h1 class="bd-title">Megamenu</h1>
+<p class="bd-lead">Consente agli utenti di creare dei Megamenu.</p>
+<div [innerHTML]="component.description"></div>
+<it-tab-container>
+  <it-tab-item label="Esempi" active="true" class="pt-3">
+    <it-megamenu-examples></it-megamenu-examples>
+  </it-tab-item>
+  <it-tab-item label="API" class="pt-3">
+    <h2>Megamenu</h2>
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>
diff --git a/src/app/megamenu/megamenu-index/megamenu-index.component.ts b/src/app/megamenu/megamenu-index/megamenu-index.component.ts
new file mode 100644
index 00000000..a25b24ab
--- /dev/null
+++ b/src/app/megamenu/megamenu-index/megamenu-index.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-megamenu-index',
+  templateUrl: './megamenu-index.component.html',
+})
+export class MegamenuIndexComponent {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: any;
+
+  constructor() {
+    this.component = Documentation.components.find(component => component.name === 'ItMegamenuComponent');
+  }
+}
diff --git a/src/app/megamenu/megamenu-routing.module.ts b/src/app/megamenu/megamenu-routing.module.ts
new file mode 100644
index 00000000..2f8ffb30
--- /dev/null
+++ b/src/app/megamenu/megamenu-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MegamenuIndexComponent } from './megamenu-index/megamenu-index.component';
+
+const routes: Routes = [{ path: '', component: MegamenuIndexComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MegamenuRoutingModule {}
diff --git a/src/app/megamenu/megamenu.module.ts b/src/app/megamenu/megamenu.module.ts
new file mode 100644
index 00000000..14a20396
--- /dev/null
+++ b/src/app/megamenu/megamenu.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { MegamenuIndexComponent } from './megamenu-index/megamenu-index.component';
+import { MegamenuExampleComponent } from './megamenu-example/megamenu-example.component';
+import { MegamenuExamplesComponent } from './megamenu-examples/megamenu-examples.component';
+import { MegamenuCtaRightComponent } from './megamenu-cta-right/megamenu-cta-right.component';
+import { MegamenuCtaBottomComponent } from './megamenu-cta-bottom/megamenu-cta-bottom.component';
+import { MegamenuRoutingModule } from './megamenu-routing.module';
+
+@NgModule({
+  declarations: [
+    MegamenuExampleComponent,
+    MegamenuExamplesComponent,
+    MegamenuIndexComponent,
+    MegamenuCtaRightComponent,
+    MegamenuCtaBottomComponent,
+  ],
+  imports: [SharedModule, CommonModule, MegamenuRoutingModule],
+})
+export class MegamenuModule {}
diff --git a/src/assets/table-of-content.json b/src/assets/table-of-content.json
index 1899b6bb..a098a0e2 100644
--- a/src/assets/table-of-content.json
+++ b/src/assets/table-of-content.json
@@ -115,6 +115,10 @@
           "label": "Select",
           "link": "/componenti/select"
         },
+        {
+          "label": "Megamenu",
+          "link": "/componenti/megamenu"
+        },
         {
           "label": "Notifications",
           "link": "/componenti/notifications"
diff --git a/src/styles.scss b/src/styles.scss
index da1af78d..7582b240 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -14,7 +14,7 @@
 
 .bd-navbar {
   min-height: 5rem;
-  z-index: 1070;
+  z-index: 1;
 }
 
 .bd-logo-title {