diff --git a/src/app/core/models/content-view/content-view.helper.ts b/src/app/core/models/content-view/content-view.helper.ts
index cd83ca406d..c858baef62 100644
--- a/src/app/core/models/content-view/content-view.helper.ts
+++ b/src/app/core/models/content-view/content-view.helper.ts
@@ -17,7 +17,7 @@ export class ContentViewHelper {
   }
 
   /**
-   * determine whether the a given configuration parameter of the given configuration parameter container
+   * determine whether the given configuration parameter of the given configuration parameter container
    * contains a link value that is supposed to be handled as a routerLink or not (external link)
    *
    * @param configParamView
diff --git a/src/app/shared/cms/cms.module.ts b/src/app/shared/cms/cms.module.ts
index d6c8feec0e..672ee5408a 100644
--- a/src/app/shared/cms/cms.module.ts
+++ b/src/app/shared/cms/cms.module.ts
@@ -6,6 +6,7 @@ import { CMSDialogComponent } from './components/cms-dialog/cms-dialog.component
 import { CMSFreestyleComponent } from './components/cms-freestyle/cms-freestyle.component';
 import { CMSImageEnhancedComponent } from './components/cms-image-enhanced/cms-image-enhanced.component';
 import { CMSImageComponent } from './components/cms-image/cms-image.component';
+import { CMSNavigationLinkComponent } from './components/cms-navigation-link/cms-navigation-link.component';
 import { CMSProductListCategoryComponent } from './components/cms-product-list-category/cms-product-list-category.component';
 import { CMSProductListFilterComponent } from './components/cms-product-list-filter/cms-product-list-filter.component';
 import { CMSProductListManualComponent } from './components/cms-product-list-manual/cms-product-list-manual.component';
@@ -130,6 +131,14 @@ import { CMS_COMPONENT } from './configurations/injection-keys';
       },
       multi: true,
     },
+    {
+      provide: CMS_COMPONENT,
+      useValue: {
+        definitionQualifiedName: 'app_sf_base_cm:component.navigation.link.pagelet2-Component',
+        class: CMSNavigationLinkComponent,
+      },
+      multi: true,
+    },
   ],
 })
 export class CMSModule {}
diff --git a/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.html b/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.html
new file mode 100644
index 0000000000..7e004049b7
--- /dev/null
+++ b/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.html
@@ -0,0 +1,41 @@
+<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
+<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
+<ng-container *ngIf="pagelet?.hasParam('Link')">
+  <li
+    #subMenu
+    [class]="'dropdown ' + pagelet.stringParam('CSSClass', '')"
+    [ngClass]="{ open: opened }"
+    (mouseenter)="subMenuShow(subMenu)"
+    (mouseleave)="subMenuHide(subMenu)"
+    (click)="subMenuHide(subMenu)"
+  >
+    <ng-container *ngIf="isRouterLink(pagelet, 'Link'); else externalLink">
+      <a
+        [routerLink]="routerLink(pagelet, 'Link')"
+        [ngStyle]="{ width: !pagelet.hasParam('SubNavigationHTML') ? '100%' : '' }"
+      >
+        {{ pagelet.stringParam('LinkText') }}
+      </a>
+    </ng-container>
+    <ng-template #externalLink>
+      <a
+        [href]="pagelet.stringParam('Link')"
+        [ngStyle]="{ width: !pagelet.hasParam('SubNavigationHTML') ? '100%' : '' }"
+      >
+        {{ pagelet.stringParam('LinkText') }}
+      </a>
+    </ng-template>
+
+    <ng-container *ngIf="pagelet.hasParam('SubNavigationHTML')">
+      <a class="dropdown-toggle" (click)="toggleOpen()">
+        <fa-icon *ngIf="opened; else closed" [icon]="['fas', 'minus']" />
+        <ng-template #closed><fa-icon [icon]="['fas', 'plus']" /></ng-template>
+      </a>
+      <ul class="category-level1 dropdown-menu">
+        <li class="sub-navigation-content">
+          <div [ishServerHtml]="pagelet.stringParam('SubNavigationHTML')"></div>
+        </li>
+      </ul>
+    </ng-container>
+  </li>
+</ng-container>
diff --git a/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.spec.ts b/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.spec.ts
new file mode 100644
index 0000000000..ac64378e43
--- /dev/null
+++ b/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.spec.ts
@@ -0,0 +1,82 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MockComponent, MockDirective } from 'ng-mocks';
+
+import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
+import { createContentPageletView } from 'ish-core/models/content-view/content-view.model';
+
+import { CMSNavigationLinkComponent } from './cms-navigation-link.component';
+
+describe('Cms Navigation Link Component', () => {
+  let component: CMSNavigationLinkComponent;
+  let fixture: ComponentFixture<CMSNavigationLinkComponent>;
+  let element: HTMLElement;
+
+  const pagelet = {
+    definitionQualifiedName: 'dqn',
+    id: 'id',
+    displayName: 'name',
+    domain: 'domain',
+    configurationParameters: {
+      Link: 'route://home',
+      LinkText: 'Home',
+      CSSClass: 'nav-link',
+    },
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [CMSNavigationLinkComponent, MockComponent(FaIconComponent), MockDirective(ServerHtmlDirective)],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CMSNavigationLinkComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    component.pagelet = createContentPageletView(pagelet);
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+    expect(element).toMatchInlineSnapshot(`
+      <li class="dropdown nav-link">
+        <a ng-reflect-router-link="/home" style="width: 100%" href="/home"> Home </a>
+      </li>
+    `);
+  });
+
+  it('should render external link if set', () => {
+    component.pagelet = createContentPageletView({
+      ...pagelet,
+      configurationParameters: { ...pagelet.configurationParameters, Link: 'https://test.com', LinkText: 'External' },
+    });
+    fixture.detectChanges();
+    expect(element).toMatchInlineSnapshot(
+      `<li class="dropdown nav-link"><a href="https://test.com" style="width: 100%"> External </a></li>`
+    );
+  });
+
+  it('should render Sub Navigation HTML if set', () => {
+    component.pagelet = createContentPageletView({
+      ...pagelet,
+      configurationParameters: { ...pagelet.configurationParameters, SubNavigationHTML: '<span>Hello World</span>' },
+    });
+    fixture.detectChanges();
+    expect(element).toMatchInlineSnapshot(`
+      <li class="dropdown nav-link">
+        <a ng-reflect-router-link="/home" href="/home"> Home </a
+        ><a class="dropdown-toggle"><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a>
+        <ul class="category-level1 dropdown-menu">
+          <li class="sub-navigation-content">
+            <div ng-reflect-ish-server-html="<span>Hello World</span>"></div>
+          </li>
+        </ul>
+      </li>
+    `);
+  });
+});
diff --git a/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.ts b/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.ts
new file mode 100644
index 0000000000..2006e386c4
--- /dev/null
+++ b/src/app/shared/cms/components/cms-navigation-link/cms-navigation-link.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { ContentViewHelper } from 'ish-core/models/content-view/content-view.helper';
+import { ContentPageletView } from 'ish-core/models/content-view/content-view.model';
+import { CMSComponent } from 'ish-shared/cms/models/cms-component/cms-component.model';
+
+@Component({
+  selector: 'ish-cms-navigation-link',
+  templateUrl: './cms-navigation-link.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CMSNavigationLinkComponent implements CMSComponent {
+  @Input({ required: true }) pagelet: ContentPageletView;
+
+  opened = false;
+
+  isRouterLink = ContentViewHelper.isRouterLink;
+  routerLink = ContentViewHelper.getRouterLink;
+
+  subMenuShow(subMenu: HTMLElement) {
+    subMenu.classList.add('hover');
+  }
+
+  subMenuHide(subMenu: HTMLElement) {
+    subMenu.classList.remove('hover');
+  }
+
+  toggleOpen() {
+    this.opened = !this.opened;
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 6ba87008da..5a79715933 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -45,6 +45,7 @@ import { CMSDialogComponent } from './cms/components/cms-dialog/cms-dialog.compo
 import { CMSFreestyleComponent } from './cms/components/cms-freestyle/cms-freestyle.component';
 import { CMSImageEnhancedComponent } from './cms/components/cms-image-enhanced/cms-image-enhanced.component';
 import { CMSImageComponent } from './cms/components/cms-image/cms-image.component';
+import { CMSNavigationLinkComponent } from './cms/components/cms-navigation-link/cms-navigation-link.component';
 import { CMSProductListCategoryComponent } from './cms/components/cms-product-list-category/cms-product-list-category.component';
 import { CMSProductListFilterComponent } from './cms/components/cms-product-list-filter/cms-product-list-filter.component';
 import { CMSProductListManualComponent } from './cms/components/cms-product-list-manual/cms-product-list-manual.component';
@@ -199,6 +200,7 @@ const declaredComponents = [
   CMSFreestyleComponent,
   CMSImageComponent,
   CMSImageEnhancedComponent,
+  CMSNavigationLinkComponent,
   CMSProductListCategoryComponent,
   CMSProductListFilterComponent,
   CMSProductListManualComponent,