diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
index 5239109527b..4f860dd94ab 100644
--- a/packages/angular-test-app/src/app/app-routing.module.ts
+++ b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -73,7 +73,7 @@ import { Toast } from 'src/preview-examples/toast';
 import { ToastCustom } from 'src/preview-examples/toast-custom';
 import { Toggle } from 'src/preview-examples/toggle';
 import { ToggleColor } from 'src/preview-examples/toggle-color';
-import { ToggleCustomDisabled } from 'src/preview-examples/toggle-custom-disable';
+import { ToggleCustomDisabled } from 'src/preview-examples/toggle-disabled';
 import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
 import { Tree } from 'src/preview-examples/tree';
 import { TreeCustom } from 'src/preview-examples/tree-custom';
@@ -84,6 +84,7 @@ import { VerticalTabsWithAvatar } from 'src/preview-examples/vertical-tabs-with-
 import { Workflow } from 'src/preview-examples/workflow';
 import { WorkflowVertical } from 'src/preview-examples/workflow-vertical';
 import { NavigationTestComponent } from './components/navigation-test.component';
+import { MapNavigationOverlay } from 'src/preview-examples/map-navigation-overlay';
 
 const routes: Routes = [
   {
@@ -252,7 +253,7 @@ const routes: Routes = [
       { path: 'tile', component: Tile },
       { path: 'timepicker', component: Timepicker },
       { path: 'toggle-color', component: ToggleColor },
-      { path: 'toggle-custom-disabled', component: ToggleCustomDisabled },
+      { path: 'toggle-disabled', component: ToggleCustomDisabled },
       { path: 'toggle-custom-label', component: ToggleCustomLabel },
       { path: 'toggle', component: Toggle },
       { path: 'upload', component: Upload },
@@ -262,6 +263,7 @@ const routes: Routes = [
       { path: 'workflow', component: Workflow },
       { path: 'workflow-vertical', component: WorkflowVertical },
       { path: 'map-navigation', component: MapNavigation },
+      { path: 'map-navigation-overlay', component: MapNavigationOverlay },
     ],
   },
 ];
diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
index 3a0de055ab3..a73997d903f 100644
--- a/packages/angular-test-app/src/app/app.module.ts
+++ b/packages/angular-test-app/src/app/app.module.ts
@@ -57,6 +57,7 @@ import { InputReadonly } from 'src/preview-examples/input-readonly';
 import { InputWithIcon } from 'src/preview-examples/input-with-icon';
 import { Kpi } from 'src/preview-examples/kpi';
 import { MapNavigation } from 'src/preview-examples/map-navigation';
+import { MapNavigationOverlay } from 'src/preview-examples/map-navigation-overlay';
 import { MessageBar } from 'src/preview-examples/message-bar';
 import { Modal } from 'src/preview-examples/modal';
 import { Pill } from 'src/preview-examples/pill';
@@ -81,7 +82,7 @@ import { Toast } from 'src/preview-examples/toast';
 import { ToastCustom } from 'src/preview-examples/toast-custom';
 import { Toggle } from 'src/preview-examples/toggle';
 import { ToggleColor } from 'src/preview-examples/toggle-color';
-import { ToggleCustomDisabled } from 'src/preview-examples/toggle-custom-disable';
+import { ToggleCustomDisabled } from 'src/preview-examples/toggle-disabled';
 import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
 import { Tree } from 'src/preview-examples/tree';
 import { TreeCustom } from 'src/preview-examples/tree-custom';
@@ -169,6 +170,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     Workflow,
     WorkflowVertical,
     MapNavigation,
+    MapNavigationOverlay,
     TabsRounded,
     DatepickerRange,
   ],
diff --git a/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts b/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts
new file mode 100644
index 00000000000..97ef474df3f
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts
@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-map-navigation-overlay',
+  template: `
+    <ix-map-navigation
+      application-name="Test Application"
+      navigation-title="Some other content"
+    >
+      <ix-icon name="rocket" slot="logo"></ix-icon>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+      </ix-menu>
+      <div slot="sidebar-content">Sidebar content</div>
+      <ix-button (click)="showOverlay = true">Show overlay</ix-button>
+      <ix-map-navigation-overlay
+        *ngIf="showOverlay"
+        name="Custom overlay title"
+        icon="bulb"
+        slot="overlay"
+        (closeClick)="showOverlay = false"
+      ></ix-map-navigation-overlay>
+    </ix-map-navigation>
+  `,
+})
+export class MapNavigationOverlay {
+  showOverlay = true;
+}
diff --git a/packages/angular-test-app/src/preview-examples/toggle-custom-disable.ts b/packages/angular-test-app/src/preview-examples/toggle-disabled.ts
similarity index 89%
rename from packages/angular-test-app/src/preview-examples/toggle-custom-disable.ts
rename to packages/angular-test-app/src/preview-examples/toggle-disabled.ts
index a055ac14c46..35278e72058 100644
--- a/packages/angular-test-app/src/preview-examples/toggle-custom-disable.ts
+++ b/packages/angular-test-app/src/preview-examples/toggle-disabled.ts
@@ -10,7 +10,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-toggle-custom-disabled',
+  selector: 'app-toggle-disabled',
   template: ` <ix-toggle disabled></ix-toggle> `,
 })
 export class ToggleCustomDisabled {}
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index 5ec4df7dc76..23b13bfa638 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -4371,7 +4371,13 @@
           "signature": "closeOverlay() => Promise<void>",
           "parameters": [],
           "docs": "Close current shown overlay",
-          "docsTags": []
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "will get removed with next major release in favor of slot based approach"
+            }
+          ],
+          "deprecation": "will get removed with next major release in favor of slot based approach"
         },
         {
           "name": "openOverlay",
@@ -4383,6 +4389,10 @@
           "parameters": [],
           "docs": "Open a overlay inside content area",
           "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "will get removed with next major release in favor of slot based approach"
+            },
             {
               "name": "param",
               "text": "name"
@@ -4399,7 +4409,8 @@
               "name": "param",
               "text": "color"
             }
-          ]
+          ],
+          "deprecation": "will get removed with next major release in favor of slot based approach"
         }
       ],
       "events": [
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 629560dc8c5..8c8e4df5aa2 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -705,6 +705,7 @@ export namespace Components {
         "applicationName": string;
         /**
           * Close current shown overlay
+          * @deprecated will get removed with next major release in favor of slot based approach
          */
         "closeOverlay": () => Promise<void>;
         /**
@@ -717,6 +718,7 @@ export namespace Components {
         "navigationTitle": string;
         /**
           * Open a overlay inside content area
+          * @deprecated will get removed with next major release in favor of slot based approach
           * @param name
           * @param component
           * @param icon
diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
index 4fba3726fe3..4dee23faa55 100644
--- a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
+++ b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
@@ -16,6 +16,7 @@
   width: 100%;
   height: 100%;
   z-index: 2;
+  top: 0;
 
   background-color: var(--theme-overlay--background);
 
diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
index a48c1be255f..61b5ec53932 100644
--- a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
+++ b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
@@ -7,7 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+} from '@stencil/core';
+import anime from 'animejs';
 
 @Component({
   tag: 'ix-map-navigation-overlay',
@@ -15,6 +24,10 @@ import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
   scoped: true,
 })
 export class MapNavigationOverlay {
+  private static readonly slowTime = 500;
+
+  @Element() hostElement: HTMLIxMapNavigationOverlayElement;
+
   /**
    * Title of overlay
    */
@@ -35,6 +48,31 @@ export class MapNavigationOverlay {
    */
   @Event() closeClick: EventEmitter;
 
+  componentWillLoad() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: [0, 'blur(1rem)'],
+      translateX: ['-4rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+    });
+  }
+
+  private closeOverlay() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: ['blur(1rem)', 0],
+      translateX: [0, '-4rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        this.closeClick.emit();
+      },
+    });
+  }
+
   render() {
     return (
       <Host>
@@ -61,7 +99,7 @@ export class MapNavigationOverlay {
             invisible
             icon="close"
             size="24"
-            onClick={() => this.closeClick.emit()}
+            onClick={() => this.closeOverlay()}
           ></ix-icon-button>
         </div>
 
diff --git a/packages/core/src/components/map-navigation-overlay/test/basic/index.html b/packages/core/src/components/map-navigation-overlay/test/basic/index.html
new file mode 100644
index 00000000000..72cb52d19fc
--- /dev/null
+++ b/packages/core/src/components/map-navigation-overlay/test/basic/index.html
@@ -0,0 +1,24 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-map-navigation>
+      <ix-map-navigation-overlay name="Title" icon="bulb" color="color-info">
+        Lorem ipsum
+      </ix-map-navigation-overlay>
+    </ix-map-navigation>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts
new file mode 100644
index 00000000000..2b3e2387002
--- /dev/null
+++ b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('map-navigation-overlay', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto(`map-navigation-overlay/test/basic`);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..31ff27d21ef
Binary files /dev/null and b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..233c23e34c1
Binary files /dev/null and b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/components/map-navigation/map-navigation.scss b/packages/core/src/components/map-navigation/map-navigation.scss
index 5b3a64c56bf..f91585f992b 100644
--- a/packages/core/src/components/map-navigation/map-navigation.scss
+++ b/packages/core/src/components/map-navigation/map-navigation.scss
@@ -126,12 +126,4 @@
     overflow: hidden;
     z-index: calc(var(--theme-z-index-sticky) - 1);
   }
-
-  #overlay {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    z-index: calc(#{var(--theme-z-index-sticky)} + 1);
-  }
 }
diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
index ff6d6fa9a8c..cb4126b6b98 100644
--- a/packages/core/src/components/map-navigation/map-navigation.tsx
+++ b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -8,15 +8,15 @@
  */
 
 import {
-    Component,
-    Element,
-    Event,
-    EventEmitter,
-    h,
-    Host,
-    Method,
-    Prop,
-    State
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
 } from '@stencil/core';
 import anime from 'animejs';
 
@@ -48,7 +48,6 @@ export class MapNavigation {
 
   @State() isSidebarOpen = true;
 
-
   /**
    * Navigation toggled
    */
@@ -81,7 +80,6 @@ export class MapNavigation {
 
   componentDidRender() {
     this.appendMenu();
-    // this.openOverlay('Test', document.createElement('ix-breadcrumb'), 'info', 'color-warning');
     this.closeOverlay();
   }
 
@@ -142,6 +140,7 @@ export class MapNavigation {
 
   /**
    * Open a overlay inside content area
+   * @deprecated will get removed with next major release in favor of slot based approach
    *
    * @param name
    * @param component
@@ -178,6 +177,7 @@ export class MapNavigation {
 
   /**
    * Close current shown overlay
+   * @deprecated will get removed with next major release in favor of slot based approach
    */
   @Method()
   async closeOverlay() {
@@ -189,6 +189,9 @@ export class MapNavigation {
       opacity: [1, 0],
       easing: 'easeInSine',
       complete: () => {
+        if (!this.overlay) {
+          return;
+        }
         this.overlay.firstChild?.remove();
         this.overlay.classList.add('d-none');
       },
@@ -236,7 +239,6 @@ export class MapNavigation {
             <main>
               <slot></slot>
             </main>
-            <div id="overlay"></div>
           </div>
         </div>
       </Host>
diff --git a/packages/core/src/components/map-navigation/readme.md b/packages/core/src/components/map-navigation/readme.md
index 0a29c367e89..581608e2910 100644
--- a/packages/core/src/components/map-navigation/readme.md
+++ b/packages/core/src/components/map-navigation/readme.md
@@ -30,7 +30,7 @@ SPDX-License-Identifier: MIT
 
 ### `closeOverlay() => Promise<void>`
 
-Close current shown overlay
+<span style="color:red">**[DEPRECATED]**</span> will get removed with next major release in favor of slot based approach<br/><br/>Close current shown overlay
 
 #### Returns
 
@@ -40,7 +40,7 @@ Type: `Promise<void>`
 
 ### `openOverlay(name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>`
 
-Open a overlay inside content area
+<span style="color:red">**[DEPRECATED]**</span> will get removed with next major release in favor of slot based approach<br/><br/>Open a overlay inside content area
 
 #### Returns
 
diff --git a/packages/documentation/docs/controls/navigation/map-navigation.md b/packages/documentation/docs/controls/navigation/map-navigation.md
index 2fdc9735699..5c9ee98f4bb 100644
--- a/packages/documentation/docs/controls/navigation/map-navigation.md
+++ b/packages/documentation/docs/controls/navigation/map-navigation.md
@@ -16,6 +16,10 @@ import SourceWebComponent from './../../auto-generated/previews/web-component/ma
 import ReactComponent from './../../auto-generated/previews/react/map-navigation.md'
 import AngularComponent from './../../auto-generated/previews/angular/map-navigation.md'
 
+import OverlayWebComponent from './../../auto-generated/previews/web-component/map-navigation-overlay.md'
+import OverlayReactComponent from './../../auto-generated/previews/react/map-navigation-overlay.md'
+import OverlayAngularComponent from './../../auto-generated/previews/angular/map-navigation-overlay.md'
+
 ## Usage
 
 <Preview name="map-navigation" height="35rem" noMargin>
@@ -30,6 +34,20 @@ import AngularComponent from './../../auto-generated/previews/angular/map-naviga
   </TabItem>
 </Preview>
 
+## Custom overlay
+
+<Preview name="map-navigation-overlay" height="35rem" noMargin>
+  <TabItem value="javascript">
+    <OverlayWebComponent />
+  </TabItem>
+  <TabItem value="react">
+    <OverlayReactComponent />
+  </TabItem>
+  <TabItem value="angular">
+    <OverlayAngularComponent />
+  </TabItem>
+</Preview>
+
 ## Properties (ix-map-navigation)
 
 #### Props
diff --git a/packages/documentation/docs/controls/toggle.md b/packages/documentation/docs/controls/toggle.md
index f2b4ac7bc36..e8812b0b921 100644
--- a/packages/documentation/docs/controls/toggle.md
+++ b/packages/documentation/docs/controls/toggle.md
@@ -7,17 +7,17 @@ import Events from './../auto-generated/ix-toggle/events.md';
 import SourceToggle from './../auto-generated/previews/web-component/toggle.md';
 import SourceToggleLabel from './../auto-generated/previews/web-component/toggle-custom-label.md';
 import SourceToggleColor from './../auto-generated/previews/web-component/toggle-color.md';
-import SourceToggleDisbaled from './../auto-generated/previews/web-component/toggle-custom-disable.md';
+import SourceToggleDisbaled from './../auto-generated/previews/web-component/toggle-disabled.md';
 
 import SourceReactToggle from './../auto-generated/previews/react/toggle.md';
 import SourceReactToggleLabel from './../auto-generated/previews/react/toggle-custom-label.md';
 import SourceReactToggleColor from './../auto-generated/previews/react/toggle-color.md';
-import SourceReactToggleDisbaled from './../auto-generated/previews/react/toggle-custom-disable.md';
+import SourceReactToggleDisbaled from './../auto-generated/previews/react/toggle-disabled.md';
 
 import SourceAngularToggle from './../auto-generated/previews/angular/toggle.md';
 import SourceAngularToggleLabel from './../auto-generated/previews/angular/toggle-custom-label.md';
 import SourceAngularToggleColor from './../auto-generated/previews/angular/toggle-color.md';
-import SourceAngularToggleDisbaled from './../auto-generated/previews/angular/toggle-custom-disable.md';
+import SourceAngularToggleDisbaled from './../auto-generated/previews/angular/toggle-disabled.md';
 
 # Toggle
 
diff --git a/packages/html-test-app/src/preview-examples/map-navigation-overlay.html b/packages/html-test-app/src/preview-examples/map-navigation-overlay.html
new file mode 100644
index 00000000000..a2f59545fa0
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/map-navigation-overlay.html
@@ -0,0 +1,46 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Map navigation example</title>
+    <link rel="stylesheet" href="./example.css" />
+  </head>
+  <body class="theme-classic-dark">
+    <!-- Preview code -->
+    <ix-map-navigation
+      application-name="Test Application"
+      navigation-title="Some other content"
+    >
+      <ix-icon name="rocket" slot="logo"></ix-icon>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+      </ix-menu>
+      <ix-button id="btn-open-overlay">Open overlay</ix-button>
+    </ix-map-navigation>
+
+    <script type="module">
+      const mapNav = document.querySelector('ix-map-navigation');
+      const buttonOpenOverlay = document.getElementById('btn-open-overlay');
+
+      buttonOpenOverlay.addEventListener('click', () => {
+        const overlay = document.createElement('ix-map-navigation-overlay');
+        overlay.slot = 'overlay';
+        overlay.name = 'Custom overlay';
+        overlay.icon = 'bulb';
+        mapNav.appendChild(overlay);
+
+        overlay.addEventListener('closeClick', (e) => {
+          overlay.parentNode.removeChild(overlay);
+        });
+      });
+    </script>
+
+    <!-- Preview code -->
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
diff --git a/packages/html-test-app/src/preview-examples/toggle-custom-disable.html b/packages/html-test-app/src/preview-examples/toggle-disabled.html
similarity index 86%
rename from packages/html-test-app/src/preview-examples/toggle-custom-disable.html
rename to packages/html-test-app/src/preview-examples/toggle-disabled.html
index d257dd8aeca..9924087852b 100644
--- a/packages/html-test-app/src/preview-examples/toggle-custom-disable.html
+++ b/packages/html-test-app/src/preview-examples/toggle-disabled.html
@@ -7,7 +7,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Toggle custom disable example</title>
+    <title>Toggle disabled example</title>
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx
index 17ab9c632db..f130a49df77 100644
--- a/packages/react-test-app/src/main.tsx
+++ b/packages/react-test-app/src/main.tsx
@@ -78,7 +78,7 @@ import { Toast } from './preview-examples/toast';
 import { ToastCustom } from './preview-examples/toast-custom';
 import { Toggle } from './preview-examples/toggle';
 import { ToggleColor } from './preview-examples/toggle-color';
-import { ToggleDisabled } from './preview-examples/toggle-custom-disable';
+import { ToggleDisabled } from './preview-examples/toggle-disabled';
 import { ToggleCustomLabel } from './preview-examples/toggle-custom-label';
 import { Tree } from './preview-examples/tree';
 import { TreeCustom } from './preview-examples/tree-custom';
@@ -87,6 +87,7 @@ import { Workflow } from './preview-examples/workflow';
 import { WorkflowVertical } from './preview-examples/workflow-vertical';
 import reportWebVitals from './reportWebVitals';
 import { NavigationTest } from './testing/NavigationTest';
+import { MapNavigationOverlay } from './preview-examples/map-navigation-overlay';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <BrowserRouter>
@@ -219,6 +220,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         element={<BasicNavigationWithoutHeader />}
       />
       <Route path="/preview/map-navigation" element={<MapNavigation />} />
+      <Route path="/preview/map-navigation-overlay" element={<MapNavigationOverlay />} />
       <Route path="/testing">
         <Route path="navigation" element={<NavigationTest />}>
           <Route
diff --git a/packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx b/packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx
new file mode 100644
index 00000000000..dafda46f7a9
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx
@@ -0,0 +1,57 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState } from 'react';
+import {
+  IxButton,
+  IxMapNavigation,
+  IxMapNavigationOverlay,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-react';
+
+export const MapNavigationOverlay: React.FC = () => {
+  const [overlay, setOverlay] = useState(false);
+
+  function openOverlay() {
+    setOverlay(true);
+  }
+
+  function closeOverlay() {
+    setOverlay(false);
+  }
+
+  return (
+    <IxMapNavigation>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+        <IxMenuItem>Item 3</IxMenuItem>
+      </IxMenu>
+      <IxButton
+        onClick={() => {
+          openOverlay();
+        }}
+      >
+        Open overlay
+      </IxButton>
+      <div>
+        {overlay ? (
+          <IxMapNavigationOverlay
+            name="Custom overlay title"
+            icon="bulb"
+            onCloseClick={() => closeOverlay()}
+          >
+            Lorem ipsum
+          </IxMapNavigationOverlay>
+        ) : null}
+      </div>
+    </IxMapNavigation>
+  );
+};
diff --git a/packages/react-test-app/src/preview-examples/toggle-custom-disable.tsx b/packages/react-test-app/src/preview-examples/toggle-disabled.tsx
similarity index 100%
rename from packages/react-test-app/src/preview-examples/toggle-custom-disable.tsx
rename to packages/react-test-app/src/preview-examples/toggle-disabled.tsx