diff --git a/projects/design-angular-kit/assets/i18n/en.json b/projects/design-angular-kit/assets/i18n/en.json
index 4741ab60..850f7461 100644
--- a/projects/design-angular-kit/assets/i18n/en.json
+++ b/projects/design-angular-kit/assets/i18n/en.json
@@ -98,6 +98,11 @@
       "website-search": "Search in the site",
       "navigation-path": "Navigation path"
     },
+    "navbar": {
+      "aria-label-main": "Main navigation",
+      "aria-label-toggle": "Show/Hide navigation",
+      "hide": "Hide navigation"
+    },
     "utils": {
       "selected": "Selected",
       "language-selection": "Language selection: {{lang}}",
diff --git a/projects/design-angular-kit/assets/i18n/it.json b/projects/design-angular-kit/assets/i18n/it.json
index 2a5b998b..5b9479d9 100644
--- a/projects/design-angular-kit/assets/i18n/it.json
+++ b/projects/design-angular-kit/assets/i18n/it.json
@@ -98,6 +98,11 @@
       "website-search": "Cerca nel sito",
       "navigation-path": "Percorso di navigazione"
     },
+    "navbar": {
+      "aria-label-main": "Navigazione principale",
+      "aria-label-toggle": "Mostra/Nascondi la navigazione",
+      "hide": "Nascondi la navigazione"
+    },
     "utils": {
       "selected": "Selezionata",
       "language-selection": "Selezione lingua: {{lang}}",
diff --git a/projects/design-angular-kit/src/lib/components/components.module.ts b/projects/design-angular-kit/src/lib/components/components.module.ts
index 1c91b736..ad252426 100644
--- a/projects/design-angular-kit/src/lib/components/components.module.ts
+++ b/projects/design-angular-kit/src/lib/components/components.module.ts
@@ -32,6 +32,7 @@ import { ItBreadcrumbsModule } from './navigation/breadcrumbs/breadcrumbs.module
 import { ItHeaderComponent } from './navigation/header/header.component';
 import { ItIconComponent } from './utils/icon/icon.component';
 import { ItLanguageSwitcherComponent } from './utils/language-switcher/language-switcher.component';
+import { ItNavBarModule } from './navigation/navbar/navbar.module';
 import { ItErrorPageComponent } from './utils/error-page/error-page.component';
 import { ItChipComponent } from './core/chip/chip.component';
 import { ItForwardDirective } from './core/forward/forward.directive';
@@ -84,7 +85,8 @@ const navigation = [
   ItBackButtonComponent,
   ItBackToTopComponent,
   ItBreadcrumbsModule,
-  ItHeaderComponent
+  ItHeaderComponent,
+  ItNavBarModule
 ];
 
 /**
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 de9b080a..272e3ec3 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
@@ -1,4 +1,4 @@
-<header class="it-header-wrapper">
+<header #headerWrapper  class="it-header-wrapper" [class.it-header-sticky]="sticky" data-bs-position-type="fixed" data-bs-sticky-class-name="is-sticky">
   <div *ngIf="showSlim" class="it-header-slim-wrapper" [class.theme-light]="light">
     <div class="container">
       <div class="row">
@@ -60,7 +60,16 @@
         </div>
       </div>
     </div>
-
-    <!-- TODO: complete header -->
+    <div class="it-header-navbar-wrapper" [class.theme-light-desk]="light">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <it-navbar>
+              <ng-content navItems select="[navItems]"></ng-content>
+            </it-navbar>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </header>
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 d0bafd7a..0d0e2a24 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
@@ -1,10 +1,13 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { ItAbstractComponent } from '../../../abstracts/abstract.component';
 import { NgIf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { ItIconComponent } from '../../utils/icon/icon.component';
+import { ItNavBarModule } from '../../navigation/navbar/navbar.module';
+
 import { ItButtonDirective } from '../../core/button/button.directive';
 import { inputToBoolean } from '../../../utils/coercion';
+import { HeaderSticky } from 'bootstrap-italia';
 
 @Component({
   standalone: true,
@@ -12,29 +15,33 @@ import { inputToBoolean } from '../../../utils/coercion';
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, TranslateModule, ItIconComponent, ItButtonDirective]
+  imports: [NgIf, TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule]
 })
 export class ItHeaderComponent extends ItAbstractComponent {
 
   @Input({ transform: inputToBoolean }) light?: boolean;
 
-  @Input({ transform: inputToBoolean }) showSlim?: boolean = true;
+  @Input({ transform: inputToBoolean }) sticky?: boolean;
 
-  @Input() slimTitle: string | undefined;
-
-  @Input() loginStyle: 'none' | 'default' | 'full' = 'none';
+  @Input({ transform: inputToBoolean }) showSlim?: boolean = true;
 
   @Input({ transform: inputToBoolean }) smallHeader?: boolean = true;
 
   @Input({ transform: inputToBoolean }) showSearch?: boolean = true;
 
+  @Input() slimTitle: string | undefined;
+
+  @Input() loginStyle: 'none' | 'default' | 'full' = 'none';
+
   @Output() loginClick: EventEmitter<Event>;
 
   @Output() searchClick: EventEmitter<Event>;
 
-  /**
-   * TODO: complete header
-   */
+  @ViewChild('headerWrapper') private headerWrapper?: ElementRef<HTMLButtonElement>;
+
+  private stickyHeader?: HeaderSticky;
+
+
   constructor() {
     super();
 
@@ -42,4 +49,28 @@ export class ItHeaderComponent extends ItAbstractComponent {
     this.searchClick = new EventEmitter<Event>();
   }
 
+  override ngAfterViewInit() {
+    super.ngAfterViewInit();
+    this.updateListeners()
+  }
+
+  override ngOnChanges(changes: SimpleChanges): void {
+    console.log(changes['sticky'])
+    if (changes['sticky'] && changes['sticky'].currentValue == true && !changes['sticky'].firstChange) {
+      this.updateListeners();
+    }
+    if (changes['sticky'] && changes['sticky'].currentValue == false){
+      this.stickyHeader?._elementObj?.dispose()
+      delete this.stickyHeader;
+      this.stickyHeader = undefined;
+    }
+    super.ngOnChanges(changes);
+  }
+
+  updateListeners() {
+    if (!this.stickyHeader && this.headerWrapper && this.sticky) {
+      this.stickyHeader = HeaderSticky.getOrCreateInstance(this.headerWrapper.nativeElement);
+    }
+  }
+
 }
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.html b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.html
new file mode 100644
index 00000000..17864cd1
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.html
@@ -0,0 +1,3 @@
+<li class="nav-item">
+  <ng-content></ng-content>
+</li>
\ No newline at end of file
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.scss b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.ts b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.ts
new file mode 100644
index 00000000..5bb5446d
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar-item/navbar-item.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  standalone: true,
+  selector: 'it-navbar-item',
+  templateUrl: './navbar-item.component.html',
+  styleUrls: ['./navbar-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIf, TranslateModule]
+})
+export class ItNavBarItemComponent extends ItAbstractComponent {
+
+  constructor() {
+    super();
+  }
+
+}
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar.module.ts b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar.module.ts
new file mode 100644
index 00000000..5912ef96
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItNavBarComponent } from './navbar/navbar.component';
+import { ItNavBarItemComponent } from './navbar-item/navbar-item.component';
+
+const navbarComponents = [ItNavBarComponent, ItNavBarItemComponent];
+
+@NgModule({
+  imports: navbarComponents,
+  exports: navbarComponents
+})
+export class ItNavBarModule { }
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.html b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.html
new file mode 100644
index 00000000..95ba9ca1
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.html
@@ -0,0 +1,19 @@
+<nav class="navbar" [class.navbar-expand-lg]="expand" [class.has-megamenu]="megamenu" [attr.aria-label]="'it.navbar.aria-label-main'|translate">
+  <button (click)="toggleCollapse()" #collapseButton class="custom-navbar-toggler" type="button" [attr.aria-label]="'it.navbar.aria-label-toggle'|translate">
+    <it-icon name="burger"></it-icon>
+  </button>
+  <div #collapseView class="navbar-collapsable" style="display: none;">
+    <div class="overlay" style="display: none;"></div>
+    <div class="close-div">
+      <button class="btn close-menu" type="button">
+        <span class="visually-hidden">{{'it.navbar.hide'|translate}}</span>
+        <it-icon name="close-big"></it-icon>
+      </button>
+    </div>
+    <div class="menu-wrapper">
+      <ul class="navbar-nav">
+        <ng-content select="[navItems]"></ng-content>
+      </ul>
+    </div>
+  </div>
+</nav>
\ No newline at end of file
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.scss b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.ts b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.ts
new file mode 100644
index 00000000..de9b9031
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navbar/navbar/navbar.component.ts
@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { ItButtonDirective } from '../../../core/button/button.directive';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+import { NavBarCollapsible } from 'bootstrap-italia';
+
+@Component({
+  standalone: true,
+  selector: 'it-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIf, TranslateModule, ItIconComponent, ItButtonDirective]
+})
+export class ItNavBarComponent extends ItAbstractComponent {
+
+  private navbar?: NavBarCollapsible;
+  @Input({ transform: inputToBoolean }) megamenu?: boolean;
+  @Input({ transform: inputToBoolean }) expand?: boolean = true;
+  @ViewChild('collapseButton') private collapseButton?: ElementRef<HTMLButtonElement>;
+  @ViewChild('collapseView') private collapseView?: ElementRef<HTMLButtonElement>;
+
+
+  constructor() {
+    super();
+  }
+
+  override ngAfterViewInit() {
+    super.ngAfterViewInit();
+    if (this.collapseButton && this.collapseView) {
+      this.navbar = NavBarCollapsible.getOrCreateInstance(this.collapseView.nativeElement);
+    }
+  }
+
+  toggleCollapse() {
+    this.navbar?.toggle(this.collapseButton?.nativeElement)
+  }
+
+}
diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts
index 2bd18a57..d7294d4b 100644
--- a/projects/design-angular-kit/src/public_api.ts
+++ b/projects/design-angular-kit/src/public_api.ts
@@ -87,6 +87,10 @@ 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/navbar/navbar/navbar.component';
+export * from './lib/components/navigation/navbar/navbar-item/navbar-item.component';
+export * from './lib/components/navigation/navbar/navbar.module';
+
 
 // Utils components
 export * from './lib/components/utils/error-page/error-page.component';
diff --git a/src/app/header/header-example/header-example.component.html b/src/app/header/header-example/header-example.component.html
index 004d24d9..a7cb3119 100644
--- a/src/app/header/header-example/header-example.component.html
+++ b/src/app/header/header-example/header-example.component.html
@@ -1,18 +1,12 @@
 <h3>Componente Header</h3>
 <div class="bd-example">
-  <it-header slimTitle="Ente di appartenenza" [loginStyle]="login" [light]="light" [showSearch]="search">
+  <it-header slimTitle="Ente di appartenenza" [loginStyle]="login" [light]="light" [showSearch]="search" [sticky]="sticky">
     <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>
     </ul>
     <ng-container slimRightZone>
-      <it-dropdown mode="nav">
-        <span button>ITA</span>
-        <ng-container list>
-          <it-dropdown-item>ITA</it-dropdown-item>
-          <it-dropdown-item>ENG</it-dropdown-item>
-        </ng-container>
-      </it-dropdown>
+      <it-language-switcher mode="nav"></it-language-switcher>
     </ng-container>
     <ng-container brand>
       <a href="#">
@@ -43,22 +37,37 @@ <h3>Componente Header</h3>
         </li>
       </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>
+        <it-dropdown mode="nav">
+          <span button>Menu dropdown</span>
+          <ng-container list>
+            <it-dropdown-item>Link lista 1</it-dropdown-item>
+            <it-dropdown-item>Link lista 2</it-dropdown-item>
+          </ng-container>
+        </it-dropdown>
+      </it-navbar-item>
+    </ng-container>
   </it-header>
-</div>
-
-<div class="row">
-  <div class="form-check col-12 col-md-3">
-    <h5>Opzioni</h5>
-    <it-checkbox [(ngModel)]="light" label="Tema chiaro"></it-checkbox>
-    <it-checkbox [(ngModel)]="search" label="Visualizza ricerca"></it-checkbox>
-  </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>
+  <div class="row">
+    <div class="form-check col-12 col-md-3">
+      <h5>Opzioni</h5>
+      <it-checkbox [(ngModel)]="light" label="Tema chiaro"></it-checkbox>
+      <it-checkbox [(ngModel)]="search" label="Visualizza ricerca"></it-checkbox>
+      <it-checkbox [(ngModel)]="sticky" label="Header sticky"></it-checkbox>
+    </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>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/header/header-example/header-example.component.ts b/src/app/header/header-example/header-example.component.ts
index f42ca972..de14b294 100644
--- a/src/app/header/header-example/header-example.component.ts
+++ b/src/app/header/header-example/header-example.component.ts
@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
 })
 export class HeaderExampleComponent {
   light = false;
+  sticky = false;
   search = false;
   login = 'none';
 }