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 fe14fe1012f..e2912257092 100644
--- a/packages/angular-test-app/src/app/app-routing.module.ts
+++ b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -146,8 +146,12 @@ import Loading from '../preview-examples/loading';
 import MapNavigation from '../preview-examples/map-navigation';
 import MapNavigationOverlay from '../preview-examples/map-navigation-overlay';
 import MenuCategory from '../preview-examples/menu-category';
+import MenuWithBottomTabs from '../preview-examples/menu-with-bottom-tabs';
+import Message from '../preview-examples/message';
 import MessageBar from '../preview-examples/message-bar';
 import ModalByInstance from '../preview-examples/modal-by-instance';
+import ModalByInstanceContent from '../preview-examples/modal-by-instance-content';
+import ModalByTemplate from '../preview-examples/modal-by-template';
 import ModalSizes from '../preview-examples/modal-sizes';
 import NumberInput from '../preview-examples/number-input';
 import NumberInputDisabled from '../preview-examples/number-input-disabled';
@@ -156,6 +160,7 @@ import NumberInputReadonly from '../preview-examples/number-input-readonly';
 import NumberInputStepperButton from '../preview-examples/number-input-stepper-button';
 import NumberInputValidation from '../preview-examples/number-input-validation';
 import Pagination from '../preview-examples/pagination';
+import PaginationAdvanced from '../preview-examples/pagination-advanced';
 import Pane from '../preview-examples/pane';
 import PaneLayout from '../preview-examples/pane-layout';
 import Pill from '../preview-examples/pill';
@@ -204,8 +209,10 @@ import ToggleButtonPrimaryOutline from '../preview-examples/toggle-button-primar
 import ToggleButtonSecondary from '../preview-examples/toggle-button-secondary';
 import ToggleButtonSecondaryGhost from '../preview-examples/toggle-button-secondary-ghost';
 import ToggleButtonSecondaryOutline from '../preview-examples/toggle-button-secondary-outline';
+import ToggleChecked from '../preview-examples/toggle-checked';
 import ToggleCustomLabel from '../preview-examples/toggle-custom-label';
 import ToggleDisabled from '../preview-examples/toggle-disabled';
+import ToggleIndeterminate from '../preview-examples/toggle-indeterminate';
 import ToggleNgModel from '../preview-examples/toggle-ng-model';
 import Tooltip from '../preview-examples/tooltip';
 import Tree from '../preview-examples/tree';
@@ -217,14 +224,8 @@ import VerticalTabs from '../preview-examples/vertical-tabs';
 import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar';
 import Workflow from '../preview-examples/workflow';
 import WorkflowVertical from '../preview-examples/workflow-vertical';
-
-import MenuWithBottomTabs from '../preview-examples/menu-with-bottom-tabs';
-import Message from '../preview-examples/message';
-import ModalByInstanceContent from '../preview-examples/modal-by-instance-content';
-import ModalByTemplate from '../preview-examples/modal-by-template';
-import PaginationAdvanced from '../preview-examples/pagination-advanced';
-import ToggleChecked from '../preview-examples/toggle-checked';
-import ToggleIndeterminate from '../preview-examples/toggle-indeterminate';
+import MapNavigationMigration from '../preview-examples/map-navigation-migration';
+import BasicNavigationMigration from '../preview-examples/basic-navigation-migration';
 
 const routes: Routes = [
   {
@@ -298,6 +299,10 @@ const routes: Routes = [
         path: 'basic-navigation',
         component: BasicNavigation,
       },
+      {
+        path: 'basic-navigation-migration',
+        component: BasicNavigationMigration,
+      },
       {
         path: 'blind-header-actions',
         component: BlindHeaderActions,
@@ -893,6 +898,7 @@ const routes: Routes = [
       { path: 'workflow-vertical', component: WorkflowVertical },
       { path: 'map-navigation', component: MapNavigation },
       { path: 'map-navigation-overlay', component: MapNavigationOverlay },
+      { path: 'map-navigation-migration', component: MapNavigationMigration },
       { path: 'number-input', component: NumberInput },
       { path: 'number-input-disabled', component: NumberInputDisabled },
       { path: 'number-input-label', component: NumberInputLabel },
diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
index fa36d9be771..29f1de8a262 100644
--- a/packages/angular-test-app/src/app/app.module.ts
+++ b/packages/angular-test-app/src/app/app.module.ts
@@ -30,6 +30,7 @@ import Avatar from '../preview-examples/avatar';
 import AvatarImage from '../preview-examples/avatar-image';
 import AvatarInitials from '../preview-examples/avatar-initials';
 import BasicNavigation from '../preview-examples/basic-navigation';
+import BasicNavigationMigration from '../preview-examples/basic-navigation-migration';
 import BasicNavigationWithoutHeader from '../preview-examples/basic-navigation-without-header';
 import Blind from '../preview-examples/blind';
 import BlindHeaderActions from '../preview-examples/blind-header-actions';
@@ -233,6 +234,7 @@ import VerticalTabs from '../preview-examples/vertical-tabs';
 import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar';
 import Workflow from '../preview-examples/workflow';
 import WorkflowVertical from '../preview-examples/workflow-vertical';
+import MapNavigationMigration from '../preview-examples/map-navigation-migration';
 
 @NgModule({
   declarations: [
@@ -253,6 +255,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     Avatar,
     BasicNavigationWithoutHeader,
     BasicNavigation,
+    BasicNavigationMigration,
     BlindHeaderActions,
     BlindVariants,
     Blind,
@@ -445,6 +448,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     WorkflowVertical,
     MapNavigation,
     MapNavigationOverlay,
+    MapNavigationMigration,
     NumberInput,
     NumberInputDisabled,
     NumberInputLabel,
diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.html b/packages/angular-test-app/src/preview-examples/application-app-switch.html
index c353f462681..5b985ac7d93 100644
--- a/packages/angular-test-app/src/preview-examples/application-app-switch.html
+++ b/packages/angular-test-app/src/preview-examples/application-app-switch.html
@@ -10,7 +10,20 @@
 <ix-application [appSwitchConfig]="appSwitchConfig">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
+
+    <ix-dropdown-button variant="secondary" label="Select config" ghost>
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+
+    <ix-avatar>
+      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+    </ix-avatar>
   </ix-application-header>
+
   <ix-menu>
     <ix-menu-item>Item 1</ix-menu-item>
     <ix-menu-item>Item 2</ix-menu-item>
diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.html b/packages/angular-test-app/src/preview-examples/application-breakpoints.html
index cd2013728fc..2f7cec63d48 100644
--- a/packages/angular-test-app/src/preview-examples/application-breakpoints.html
+++ b/packages/angular-test-app/src/preview-examples/application-breakpoints.html
@@ -28,6 +28,7 @@
     <ix-menu-item>Item 1</ix-menu-item>
     <ix-menu-item>Item 2</ix-menu-item>
   </ix-menu>
+
   <ix-content>
     <ix-content-header slot="header" header-title="Choose breakpoint">
     </ix-content-header>
diff --git a/packages/angular-test-app/src/preview-examples/application.html b/packages/angular-test-app/src/preview-examples/application.html
index 2b8fc58eea2..1bea2aeeca9 100644
--- a/packages/angular-test-app/src/preview-examples/application.html
+++ b/packages/angular-test-app/src/preview-examples/application.html
@@ -11,6 +11,7 @@
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
   </ix-application-header>
+
   <ix-menu>
     <ix-menu-item>Item 1</ix-menu-item>
     <ix-menu-item>Item 2</ix-menu-item>
diff --git a/packages/angular-test-app/src/preview-examples/basic-navigation-migration.css b/packages/angular-test-app/src/preview-examples/basic-navigation-migration.css
new file mode 100644
index 00000000000..a726a2876a5
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/basic-navigation-migration.css
@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/packages/angular-test-app/src/preview-examples/basic-navigation-migration.html b/packages/angular-test-app/src/preview-examples/basic-navigation-migration.html
new file mode 100644
index 00000000000..1b72db81684
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/basic-navigation-migration.html
@@ -0,0 +1,20 @@
+<!--
+SPDX-FileCopyrightText: 2024 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.
+-->
+
+<ix-application>
+  <!--{KEEP} Compare hideHeader property -->
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+</ix-application>
diff --git a/packages/angular-test-app/src/preview-examples/basic-navigation-migration.ts b/packages/angular-test-app/src/preview-examples/basic-navigation-migration.ts
new file mode 100644
index 00000000000..87c356962da
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/basic-navigation-migration.ts
@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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-example',
+  templateUrl: './basic-navigation-migration.html',
+  styleUrls: ['./basic-navigation-migration.css'],
+})
+export default class BasicNavigationMigration {}
diff --git a/packages/angular-test-app/src/preview-examples/map-navigation-migration.css b/packages/angular-test-app/src/preview-examples/map-navigation-migration.css
new file mode 100644
index 00000000000..c4c74416732
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/map-navigation-migration.css
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+.application {
+  height: 100vh;
+  width: 100vw;
+
+  .overlay {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
+
+  .content {
+    box-sizing: border-box;
+  }
+}
diff --git a/packages/angular-test-app/src/preview-examples/map-navigation-migration.html b/packages/angular-test-app/src/preview-examples/map-navigation-migration.html
new file mode 100644
index 00000000000..60f06c175dc
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/map-navigation-migration.html
@@ -0,0 +1,46 @@
+<ix-application class="application">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+
+    <!--{KEEP} Compare context menu -->
+    <ix-dropdown-button variant="secondary" label="Select config" ghost>
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+  </ix-application-header>
+
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+
+  <!--{KEEP} Compare overlay -->
+  <ix-pane
+    class="overlay"
+    composition="right"
+    heading="Custom overlay"
+    icon="bulb"
+    size="320px"
+    variant="floating"
+    hide-on-collapse
+    [expanded]="expanded"
+    (expandedChanged)="resetExpanded($event)"
+  >
+    Overlay content
+  </ix-pane>
+
+  <ix-pane-layout>
+    <!--{KEEP} Compare sidebar -->
+    <ix-pane slot="left" heading="Navigation title" size="320px" expanded>
+      Sidebar content
+    </ix-pane>
+
+    <ix-content class="content">
+      <ix-content-header slot="header" header-title="My Content Page">
+      </ix-content-header>
+
+      <ix-button (click)="toggleOverlay()">Open overlay</ix-button>
+    </ix-content>
+  </ix-pane-layout>
+</ix-application>
diff --git a/packages/angular-test-app/src/preview-examples/map-navigation-migration.ts b/packages/angular-test-app/src/preview-examples/map-navigation-migration.ts
new file mode 100644
index 00000000000..4f6ddf3fb00
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/map-navigation-migration.ts
@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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-example',
+  templateUrl: './map-navigation-migration.html',
+  styleUrls: ['./map-navigation-migration.css'],
+})
+export default class MapNavigationMigration {
+  expanded = false;
+
+  resetExpanded(event: Event) {
+    requestAnimationFrame(() => {
+      this.expanded = (event as CustomEvent).detail.expanded;
+    });
+  }
+
+  toggleOverlay() {
+    this.expanded = !this.expanded;
+  }
+}
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
index 6101d9043de..c2e25c29c92 100644
--- a/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts
+++ b/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts
@@ -13,24 +13,37 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <ix-map-navigation
-      application-name="Test Application"
-      navigation-title="Some other content"
+      application-name="My Application"
+      navigation-title="Navigation title"
+      hide-context-menu="false"
     >
       <div class="placeholder-logo" slot="logo"></div>
+
       <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-content slot="sidebar-content">Sidebar content</ix-content>
+
+      <ix-content>
+        <ix-content-header
+          slot="header"
+          header-title="My Content Page"
+        ></ix-content-header>
+
+        <ix-button (click)="showOverlay = true">Show overlay</ix-button>
+      </ix-content>
+
       <ix-map-navigation-overlay
         *ngIf="showOverlay"
-        name="Custom overlay title"
-        icon="bulb"
         slot="overlay"
+        name="Custom overlay"
+        icon="bulb"
         (closeClick)="showOverlay = false"
-      ></ix-map-navigation-overlay>
+      >
+        <ix-content>Overlay content</ix-content>
+      </ix-map-navigation-overlay>
     </ix-map-navigation>
   `,
 })
diff --git a/packages/angular-test-app/src/preview-examples/map-navigation.ts b/packages/angular-test-app/src/preview-examples/map-navigation.ts
index f2c189499c0..987dddd8fc5 100644
--- a/packages/angular-test-app/src/preview-examples/map-navigation.ts
+++ b/packages/angular-test-app/src/preview-examples/map-navigation.ts
@@ -13,17 +13,25 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <ix-map-navigation
-      application-name="Test Application"
-      navigation-title="Some other content"
+      application-name="My Application"
+      navigation-title="Navigation title"
+      hide-context-menu="false"
     >
       <div class="placeholder-logo" slot="logo"></div>
+
       <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>
-      <div>Content</div>
+
+      <ix-content slot="sidebar-content">Sidebar content</ix-content>
+
+      <ix-content>
+        <ix-content-header
+          slot="header"
+          header-title="My Content Page"
+        ></ix-content-header>
+      </ix-content>
     </ix-map-navigation>
   `,
 })
diff --git a/packages/documentation/docs/controls/_breadcrumb_styleguide.md b/packages/documentation/docs/controls/_breadcrumb_styleguide.md
index f4c32f0d05b..92aacfd4753 100644
--- a/packages/documentation/docs/controls/_breadcrumb_styleguide.md
+++ b/packages/documentation/docs/controls/_breadcrumb_styleguide.md
@@ -46,6 +46,6 @@ Interactive items can take one of four states: Default, hover, active and focuse
 ### Related patterns:
 
 - [Dropdown](dropdown.md)
-- [Basic navigation](application-frame/basic-navigation.md)
-- [Map navigation](application-frame/map-navigation.md)
+- [Basic navigation](../legacy/basic-navigation.md)
+- [Map navigation](../legacy/map-navigation.md)
 - [Workflow](workflow.md)
diff --git a/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md b/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md
index db220c8e859..d91909db7b6 100644
--- a/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md
+++ b/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md
@@ -10,7 +10,7 @@
 
 #### Application switch
 
-Use the application switch (see [application](./application.md)) to allow users to navigate across applications. When clicking the application switch (1), a modal with a list of available applications opens.
+Use the application switch (see [application](./application.mdx)) to allow users to navigate across applications. When clicking the application switch (1), a modal with a list of available applications opens.
 
 #### Brand logo
 
@@ -36,7 +36,7 @@ We typically use the slot for:
 
 #### Avatar
 
-With the new modular application frame we moved the avatar from the navigation menu to the application header. This ensures the avatar has security-relevant information available at all breakpoints. Nonetheless, if you still use the [basic navigation](./basic-navigation.md) or the [map navigation](./map-navigation.md), the avatar is still in the navigation menu for compatibility reasons.
+With the new modular application frame we moved the avatar from the navigation menu to the application header. This ensures the avatar has security-relevant information available at all breakpoints. Nonetheless, if you still use the [basic navigation](../../legacy/basic-navigation.md) or the [map navigation](../../legacy/map-navigation.md), the avatar is still in the navigation menu for compatibility reasons.
 
 ![Avatar and avatar dropdown](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1635-60462&mode=design&t=UPXhDWuRHtygtfFI-11)
 
@@ -62,7 +62,7 @@ If the application is hosted inside a framework that comes with its own header,
 
 ### Behavior
 
-The header automatically adapts the breakpoints defined in the [application](./application.md).
+The header automatically adapts the breakpoints defined in the [application](./application.mdx).
 
 ![Application header at breakpoints lg/md and sm](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1636-62980&mode=design&t=4XzscFw57dE7McUX-11)
 
diff --git a/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md b/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md
index 18b59411afc..f07eb0b597e 100644
--- a/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md
+++ b/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md
@@ -6,14 +6,14 @@ The navigation menu is an essential part of your application. It offers a way to
 
 1. Expand/collapse icon button: Expands and collapses the navigation menu.
 2. [Avatar button](#avatar-button,): Shows the logged-in user and provides access to user-related actions (optional)  
-   **Please note:** Only basic navigation and map navigation still use the avatar at this position. The new [application](./application.md) frame uses the avatar inside the [application header](./application-header.md).
+   **Please note:** Only basic navigation and map navigation still use the avatar at this position. The new [application](./application.mdx) frame uses the avatar inside the [application header](./application-header.md).
 3. Navigation section: Navigates through the main parts of an application.
 4. [Bottom section](#bottom-section): Hosts infrastructural actions and additional content but does not navigate away from the selected main part.
 
 ### Avatar button
 
 The avatar button is optional. It shows information about the logged-in user. When collapsed it shows only the avatar, and when expanded it shows additional user information. A dropdown menu with user-related actions appears when selecting (note the available actions are specific to each application). The log out item is available by default.  
-**Please note:** Only basic navigation and map navigation still use the avatar in the navigation menu. The new [application](./application.md) frame uses the avatar inside the [application header](./application-header.md).
+**Please note:** Only basic navigation and map navigation still use the avatar in the navigation menu. The new [application](./application.mdx) frame uses the avatar inside the [application header](./application-header.md).
 
 ![Avatar dropdown menu](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1013-70909&mode=design&t=Ch2wsi2EtQ3sPBpS-11)
 
@@ -64,7 +64,7 @@ Items in this section do not navigate away from the current content. They either
 2. Toggle theme: Toggles between light and dark themes.
 3. Custom item
 4. About & legal information: Opens the [about & legal](./about-and-legal.md) overlay to display legal information, release notes, license information, etc.
-5. Collapse/expand side panel: Only relevant for [map navigation](./map-navigation.md).
+5. Collapse/expand side panel: Only relevant for [map navigation](../../legacy/map-navigation.md).
 
 <br></br>
 
@@ -72,7 +72,7 @@ Items in this section do not navigate away from the current content. They either
 
 - **enableSettings `default: true`:** Shows the settings icon (gear wheel) in the bottom section, it opens the [settings](./settings.md) overlay and the content can be freely defined.
 - **enableToggleTheme `default: false`:** Shows the theme toggle icon, offers an easy and direct way to toggle between light and dark themes. We don’t typically use this when dedicated theme settings are available elsewhere, e.g. in the settings overlay.
-- **enableMapExpand `default: false`:** Only relevant for [map navigation](./map-navigation.md), shows an icon that expands/collapses the side panel of the map navigation.
+- **enableMapExpand `default: false`:** Only relevant for [map navigation](../../legacy/map-navigation.md), shows an icon that expands/collapses the side panel of the map navigation.
 
 See the code tab for more information and other options available.
 
diff --git a/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md b/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md
deleted file mode 100644
index d65d8a80b59..00000000000
--- a/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md
+++ /dev/null
@@ -1,37 +0,0 @@
-import Props from './../../auto-generated/ix-basic-navigation/props.md';
-import Events from './../../auto-generated/ix-basic-navigation/events.md';
-
-import Playground from '@site/src/components/PlaygroundV3';
-
-## Development
-
-### Examples
-
-#### Basic
-
-<Playground
-name="basic-navigation"
-height="30rem"
-noMargin
-
-> </Playground>
-
-#### Without header
-
-<Playground
-name="basic-navigation-without-header"
-height="30rem"
-noMargin
-hideInitalCodePreview
-
-> </Playground>
-
-### API
-
-#### Properties
-
-<Props />
-
-#### Events
-
-<Events />
diff --git a/packages/documentation/docs/controls/application-frame/_map-navigation_code.md b/packages/documentation/docs/controls/application-frame/_map-navigation_code.md
deleted file mode 100644
index c777e33f382..00000000000
--- a/packages/documentation/docs/controls/application-frame/_map-navigation_code.md
+++ /dev/null
@@ -1,50 +0,0 @@
-import Props from './../../auto-generated/ix-map-navigation/props.md';
-import Events from './../../auto-generated/ix-map-navigation/events.md';
-import PropsOverlay from './../../auto-generated/ix-map-navigation-overlay/props.md';
-import EventsOverlay from './../../auto-generated/ix-map-navigation-overlay/events.md';
-
-import Playground from '@site/src/components/PlaygroundV3';
-
-## Development
-
-### Examples
-
-#### Basic
-
-<Playground
-name="map-navigation"
-height="35rem"
-oMargin
-hideInitalCodePreview
-
-> </Playground>
-
-#### Custom overlay
-
-<Playground
-name="map-navigation-overlay"
-height="35rem"
-noMargin
-hideInitalCodePreview
-
-> </Playground>
-
-### API (ix-map-navigation)
-
-#### Properties
-
-<Props />
-
-#### Events
-
-<Events />
-
-### API (ix-map-navigation-overlay)
-
-#### Properties
-
-<PropsOverlay/>
-
-#### Events
-
-<EventsOverlay/>
diff --git a/packages/documentation/docs/controls/application-frame/_map-navigation_styleguide.md b/packages/documentation/docs/controls/application-frame/_map-navigation_styleguide.md
deleted file mode 100644
index f0f9094d022..00000000000
--- a/packages/documentation/docs/controls/application-frame/_map-navigation_styleguide.md
+++ /dev/null
@@ -1,28 +0,0 @@
-## Guidelines
-
-Map navigation is a combination of infrastructural components that form a layout structure to present map-like content (geographical maps, P&I diagrams or other plans). It is supported by a collapsible context panel and an overlay can temporarily present additional information. Map navigation does not offer all features the [basic navigation](./basic-navigation.md) offers.  
-The new [application](./application.md) component released February 2024 is even more flexible, has a modular approach and introduces new features. Hence, we highly recommend using the new application frame.
-
-![Map navigation layout](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1020-71241&mode=design&t=Ntzn8IlSOlPey8s5-11)
-
-1. [App header](#app-header): Included in the context pane
-2. [Navigation menu](./application-menu.md)
-3. Context pane: Hosts additional information and elements to control the map content
-4. Map content: Shows map-like content, P&I diagrams or other plans
-5. Context pane icon: Expands and collapses the context pane
-6. Overlay: Shows detailed information of selected objects
-
-#### Application header
-
-The application header (1) hosts the brand logo and the application name. As this space is limited, we recommend short application names without further information. The application header is placed inside the context panel which means it appears and disappears with the context pane.
-<br></br>
-
-### Behavior
-
-Map navigation does not adapt to breakpoints and should only be used on large screens (desktop size).
-The navigation menu provides a control at the bottom (5) to expand and collapse the context pane. The overlay’s (6) background appears semi-transparent with background blur to emphasize the overlay character.
-
-### Dos and Don’ts
-
-- Don't use map navigation for typical main-detail use cases, instead use [application](./application.md) frame
-- Don't use map navigation if you want to support mobile use cases
diff --git a/packages/documentation/docs/controls/application-frame/application.md b/packages/documentation/docs/controls/application-frame/application.md
deleted file mode 100644
index 8d4123abd19..00000000000
--- a/packages/documentation/docs/controls/application-frame/application.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-sidebar_position: 0
----
-
-import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
-
-import DocsUx from './\_application_styleguide.md';
-import DocsCode from './\_application_code.md';
-
-import Tags from './../../auto-generated/ix-application/tags.md';
-
-# Application
-
-<Tags />
-
-<br/>
-<br/>
-
-<LinkableDocsTabs>
-  <DocsUx />
-  <DocsCode />
-</LinkableDocsTabs>
diff --git a/packages/documentation/docs/controls/application-frame/application.mdx b/packages/documentation/docs/controls/application-frame/application.mdx
new file mode 100644
index 00000000000..96256017266
--- /dev/null
+++ b/packages/documentation/docs/controls/application-frame/application.mdx
@@ -0,0 +1,35 @@
+---
+sidebar_position: 0
+---
+
+import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
+import LatestTags from '@site/src/components/Tags';
+
+import DocsUx from './_application_styleguide.md';
+import DocsCode from './_application_code.md';
+
+import Tags from './../../auto-generated/ix-application/tags.md';
+
+# Application
+
+<div className="d-flex gap-2 align-items-center">
+  <Tags />
+  <LatestTags
+    url={'/docs/legacy/basic-navigation'}
+    hasDeprecatedAncestor={true}
+    ancestorName="Basic Navigation"
+  ></LatestTags>
+  <LatestTags
+    url={'/docs/legacy/map-navigation'}
+    hasDeprecatedAncestor={true}
+    ancestorName="Map Navigation"
+  ></LatestTags>
+</div>
+
+<br />
+<br />
+
+<LinkableDocsTabs>
+  <DocsUx />
+  <DocsCode />
+</LinkableDocsTabs>
diff --git a/packages/documentation/docs/controls/application-frame/basic-navigation.md b/packages/documentation/docs/controls/application-frame/basic-navigation.md
deleted file mode 100644
index de717dfa19c..00000000000
--- a/packages/documentation/docs/controls/application-frame/basic-navigation.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-sidebar_position: 10
----
-
-import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
-
-import DocsUx from './\_basic-navigation_styleguide.md';
-import DocsCode from './\_basic-navigation_code.md';
-
-import Tags from './../../auto-generated/ix-basic-navigation/tags.md';
-
-# Basic Navigation
-
-<Tags />
-
-<LinkableDocsTabs>
-  <DocsUx />
-  <DocsCode />
-</LinkableDocsTabs>
diff --git a/packages/documentation/docs/controls/application-frame/map-navigation.md b/packages/documentation/docs/controls/application-frame/map-navigation.md
deleted file mode 100644
index ffb0dee94da..00000000000
--- a/packages/documentation/docs/controls/application-frame/map-navigation.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-sidebar_position: 11
----
-
-import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
-
-import DocsUx from './\_map-navigation_styleguide.md';
-import DocsCode from './\_map-navigation_code.md';
-
-import Tags from './../../auto-generated/ix-map-navigation/tags.md';
-
-# Map Navigation
-
-<Tags />
-
-<LinkableDocsTabs>
-  <DocsUx />
-  <DocsCode />
-</LinkableDocsTabs>
diff --git a/packages/documentation/docs/legacy/_basic-navigation_code.md b/packages/documentation/docs/legacy/_basic-navigation_code.md
new file mode 100644
index 00000000000..ce30e1de5c8
--- /dev/null
+++ b/packages/documentation/docs/legacy/_basic-navigation_code.md
@@ -0,0 +1,47 @@
+import Props from './../auto-generated/ix-basic-navigation/props.md';
+import Events from './../auto-generated/ix-basic-navigation/events.md';
+
+import Playground from '@site/src/components/PlaygroundV3';
+
+## Development
+
+### Migration
+
+The following example demonstrates how to translate the functionalities of the deprecated `ix-basic-navigation` to the new `ix-application` component.
+
+<Playground
+name="basic-navigation-migration"
+height="35rem"
+noMargin>
+</Playground>
+
+### Legacy Examples
+
+#### Basic
+
+<Playground
+name="basic-navigation"
+height="30rem"
+noMargin
+
+> </Playground>
+
+#### Without header
+
+<Playground
+name="basic-navigation-without-header"
+height="30rem"
+noMargin
+hideInitalCodePreview
+
+> </Playground>
+
+### API
+
+#### Properties
+
+<Props />
+
+#### Events
+
+<Events />
diff --git a/packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md b/packages/documentation/docs/legacy/_basic-navigation_styleguide.md
similarity index 90%
rename from packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md
rename to packages/documentation/docs/legacy/_basic-navigation_styleguide.md
index 20ee1344917..e0c1c2e288f 100644
--- a/packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md
+++ b/packages/documentation/docs/legacy/_basic-navigation_styleguide.md
@@ -4,14 +4,14 @@ import Playground from '@site/src/components/Demo';
 ## Guidelines
 
 Basic navigation is a combination of essential infrastructure components forming the basic application layout structure. Alternatively, the [map navigation](./map-navigation.md) offers an additional but less flexible layout.  
-The new [application](./application.md) component released February 2024 is even more flexible, has a modular approach and introduces new features. Hence, we highly recommend using the new application frame.
+The new [application](./../controls/application-frame/application.mdx) component released February 2024 is even more flexible, has a modular approach and introduces new features. Hence, we highly recommend using the new application frame.
 
 ![Basic navigation overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=984-33226&mode=design&t=SxUA6AcHswBAiIzi-11)
 
 Basic navigation has:
 
 1. Application header
-2. [Navigation menu](./application-menu.md)
+2. [Navigation menu](./../controls/application-frame/application-menu.md)
 3. Application content
 
 #### Application header
diff --git a/packages/documentation/docs/legacy/_map-navigation_code.md b/packages/documentation/docs/legacy/_map-navigation_code.md
new file mode 100644
index 00000000000..8acdd8708bb
--- /dev/null
+++ b/packages/documentation/docs/legacy/_map-navigation_code.md
@@ -0,0 +1,56 @@
+import Props from './../auto-generated/ix-map-navigation/props.md';
+import Events from './../auto-generated/ix-map-navigation/events.md';
+import PropsOverlay from './../auto-generated/ix-map-navigation-overlay/props.md';
+import EventsOverlay from './../auto-generated/ix-map-navigation-overlay/events.md';
+
+import Playground from '@site/src/components/PlaygroundV3';
+
+## Development
+
+### Migration
+
+The following example demonstrates how to translate the functionalities of the deprecated `ix-map-navigation` to the new `ix-application` component.
+
+<Playground
+name="map-navigation-migration"
+height="35rem"
+noMargin>
+</Playground>
+
+### Legacy Examples
+
+#### Basic
+
+<Playground
+name="map-navigation"
+height="35rem"
+noMargin>
+</Playground>
+
+#### Custom overlay
+
+<Playground
+name="map-navigation-overlay"
+height="35rem"
+noMargin>
+</Playground>
+
+### API (ix-map-navigation)
+
+#### Properties
+
+<Props />
+
+#### Events
+
+<Events />
+
+### API (ix-map-navigation-overlay)
+
+#### Properties
+
+<PropsOverlay/>
+
+#### Events
+
+<EventsOverlay/>
diff --git a/packages/documentation/docs/legacy/_map-navigation_styleguide.md b/packages/documentation/docs/legacy/_map-navigation_styleguide.md
new file mode 100644
index 00000000000..03812a5c382
--- /dev/null
+++ b/packages/documentation/docs/legacy/_map-navigation_styleguide.md
@@ -0,0 +1,28 @@
+## Guidelines
+
+Map navigation is a combination of infrastructural components that form a layout structure to present map-like content (geographical maps, P&I diagrams or other plans). It is supported by a collapsible sidebar and an overlay can temporarily present additional information. Map navigation does not offer all features the [basic navigation](./basic-navigation.md) offers.  
+The new [application](../controls/application-frame/application.mdx) component released February 2024 is even more flexible, has a modular approach and introduces new features. Hence, we highly recommend using the new application frame.
+
+![Map navigation layout](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1020-71241&mode=design&t=Ntzn8IlSOlPey8s5-11)
+
+1. [App header](#application-header): Included in the sidebar
+2. [Navigation menu](../controls/application-frame/application-menu.md)
+3. Sidebar: Hosts additional information and elements to control the map content
+4. Content: Shows map-like content, P&I diagrams or other plans
+5. Sidebar icon: Expands and collapses the sidebar
+6. Overlay: Shows detailed information of selected objects
+
+#### Application header
+
+The application header (1) hosts the brand logo and the application name. As this space is limited, we recommend short application names without further information. The application header is placed inside the sidebar which means it appears and disappears with the sidebar.
+<br></br>
+
+### Behavior
+
+Map navigation does not adapt to breakpoints and should only be used on large screens (desktop size).
+The navigation menu provides a control at the bottom (5) to expand and collapse the sidebar. The overlay’s (6) background appears semi-transparent with background blur to emphasize the overlay character.
+
+### Dos and Don’ts
+
+- Don't use map navigation for typical main-detail use cases, instead use [application](../controls/application-frame/application.mdx) frame
+- Don't use map navigation if you want to support mobile use cases
diff --git a/packages/documentation/docs/legacy/basic-navigation.md b/packages/documentation/docs/legacy/basic-navigation.md
new file mode 100644
index 00000000000..edffd10c74c
--- /dev/null
+++ b/packages/documentation/docs/legacy/basic-navigation.md
@@ -0,0 +1,23 @@
+---
+unlisted: true
+---
+
+import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
+import LatestTags from '@site/src/components/Tags';
+
+import DocsUx from './\_basic-navigation_styleguide.md';
+import DocsCode from './\_basic-navigation_code.md';
+
+import Tags from './../auto-generated/ix-basic-navigation/tags.md';
+
+# Basic Navigation
+
+<LatestTags url={'/docs/controls/application-frame/application'} hasDeprecatedAncestor={false} deprecationVersion='3.0.0'></LatestTags>
+
+<br />
+<br />
+
+<LinkableDocsTabs>
+  <DocsUx />
+  <DocsCode />
+</LinkableDocsTabs>
diff --git a/packages/documentation/docs/legacy/checkbox.mdx b/packages/documentation/docs/legacy/checkbox.mdx
index db2681f962d..02ce8b4652e 100644
--- a/packages/documentation/docs/legacy/checkbox.mdx
+++ b/packages/documentation/docs/legacy/checkbox.mdx
@@ -7,22 +7,18 @@ import LatestTags from '@site/src/components/Tags';
 
 # Checkbox
 
-<LatestTags url={'/docs/controls/checkbox'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+<LatestTags
+  url={'/docs/controls/checkbox'}
+  hasDeprecatedAncestor={false}
+  deprecationVersion="2.6.0"
+></LatestTags>
 
-## Examples
+## Legacy Examples
 
 ### Basic
 
-<Playground
-  name="checkbox"
-  height="8rem"
-/>
+<Playground name="checkbox" height="8rem" />
 
 ### Indeterminate
 
-<Playground
-  name="checkbox-indeterminate"
-  height="8rem"
-  hideInitalCodePreview
-/>
-
+<Playground name="checkbox-indeterminate" height="8rem" hideInitalCodePreview />
diff --git a/packages/documentation/docs/legacy/input.mdx b/packages/documentation/docs/legacy/input.mdx
index f02e1b25702..5bd25a8123e 100644
--- a/packages/documentation/docs/legacy/input.mdx
+++ b/packages/documentation/docs/legacy/input.mdx
@@ -7,54 +7,38 @@ import Playground from '@site/src/components/PlaygroundV3';
 
 # Input
 
-<LatestTags url={'/docs/controls/input'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+<LatestTags
+  url={'/docs/controls/input'}
+  hasDeprecatedAncestor={false}
+  deprecationVersion="2.6.0"
+></LatestTags>
 
-## Examples
+## Legacy Examples
 
 ### Basic
 
 <Playground name="input-legacy" />
 
-
 ### Disabled
 
-<Playground
-  name="input-legacy-disabled"
-  hideInitalCodePreview
-/>
+<Playground name="input-legacy-disabled" hideInitalCodePreview />
 
 ### Readonly
 
-<Playground
-  name="input-legacy-readonly"
-  hideInitalCodePreview
-/>
+<Playground name="input-legacy-readonly" hideInitalCodePreview />
 
 ### With icon
 
-<Playground
-  name="input-legacy-with-icon"
-  hideInitalCodePreview
-/>
+<Playground name="input-legacy-with-icon" hideInitalCodePreview />
 
 ### Label placement
 
-<Playground
-  name="input-legacy-labels"
-  hideInitalCodePreview
-/>
+<Playground name="input-legacy-labels" hideInitalCodePreview />
 
 ### Input types
 
-<Playground
-  name="input-legacy-types"
-  height="15rem"
-  hideInitalCodePreview
-/>
+<Playground name="input-legacy-types" height="15rem" hideInitalCodePreview />
 
 ### Search
 
-<Playground
-  name="input-legacy-search"
-  hideInitalCodePreview
-/>
+<Playground name="input-legacy-search" hideInitalCodePreview />
diff --git a/packages/documentation/docs/legacy/map-navigation.md b/packages/documentation/docs/legacy/map-navigation.md
new file mode 100644
index 00000000000..90649a53bc1
--- /dev/null
+++ b/packages/documentation/docs/legacy/map-navigation.md
@@ -0,0 +1,77 @@
+---
+unlisted: true
+---
+
+import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
+import NoteBlock from '@site/src/components/NoteBlock';
+import LatestTags from '@site/src/components/Tags';
+
+import DocsUx from './\_map-navigation_styleguide.md';
+import DocsCode from './\_map-navigation_code.md';
+
+import Tags from './../auto-generated/ix-map-navigation/tags.md';
+
+# Map Navigation
+
+<LatestTags url={'/docs/controls/application-frame/application'} hasDeprecatedAncestor={false} deprecationVersion='3.0.0'></LatestTags>
+
+<br />
+
+<NoteBlock>
+  Map navigation is deprecated. Elements can be replaced by the
+  following components:<br></br>
+  <ul>
+    <li>
+      App header: replace with
+      <a
+        target="_blank"
+        href="application-frame/application-header"
+      >
+        application header
+      </a>
+    </li>
+    <li>
+      Navigation menu: replace with application
+      <a
+        target="_blank"
+        href="application-frame/application-menu"
+      >
+        menu
+      </a>
+    </li>
+    <li>
+      Sidebar: replace with left inline
+      <a target="_blank" href="panes">
+        pane
+      </a>
+    </li>
+    <li>
+      Sidebar icon: automatically replaced with collapse/expand from
+      inline
+      <a target="_blank" href="panes">
+        pane
+      </a>
+    </li>
+    <li>
+      Overlay: replace with floating
+      <a target="_blank" href="panes">
+        pane
+      </a>
+      or replace the
+      <a
+        target="_blank"
+        href="application-frame/content"
+      >
+        content
+      </a>
+      with the original overlay content
+    </li>
+  </ul>
+</NoteBlock>
+
+<br />
+
+<LinkableDocsTabs>
+  <DocsUx />
+  <DocsCode />
+</LinkableDocsTabs>
diff --git a/packages/documentation/docs/legacy/radiobutton.mdx b/packages/documentation/docs/legacy/radiobutton.mdx
index 5dccb54b1d4..a44bbc88896 100644
--- a/packages/documentation/docs/legacy/radiobutton.mdx
+++ b/packages/documentation/docs/legacy/radiobutton.mdx
@@ -7,12 +7,14 @@ import LatestTags from '@site/src/components/Tags';
 
 # Radio button
 
-<LatestTags url={'/docs/controls/radio'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+<LatestTags
+  url={'/docs/controls/radio'}
+  hasDeprecatedAncestor={false}
+  deprecationVersion="2.6.0"
+></LatestTags>
 
-## Examples
+## Legacy Examples
 
 ### Basic
 
-<Playground
-  name="radio-button"
-/>
+<Playground name="radio-button" />
diff --git a/packages/documentation/docs/legacy/textarea.mdx b/packages/documentation/docs/legacy/textarea.mdx
index 49895875126..c7ee76d1ca4 100644
--- a/packages/documentation/docs/legacy/textarea.mdx
+++ b/packages/documentation/docs/legacy/textarea.mdx
@@ -7,27 +7,20 @@ import LatestTags from '@site/src/components/Tags';
 
 # Textarea
 
-<LatestTags url={'/docs/controls/textarea'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+<LatestTags
+  url={'/docs/controls/textarea'}
+  hasDeprecatedAncestor={false}
+  deprecationVersion="2.6.0"
+></LatestTags>
 
-## Examples
+## Legacy Examples
 
 ### Basic
 
-<Playground
-  name="textarea"
-  height="12rem"
-/>
+<Playground name="textarea" height="12rem" />
 ### Disabled
 
-<Playground
-  name="textarea-disabled"
-  height="12rem"
-  hideInitalCodePreview
-/>
+<Playground name="textarea-disabled" height="12rem" hideInitalCodePreview />
 ### Readonly
 
-<Playground
-  name="textarea-readonly"
-  height="12rem"
-  hideInitalCodePreview
-/>
+<Playground name="textarea-readonly" height="12rem" hideInitalCodePreview />
diff --git a/packages/documentation/docs/legacy/validation.mdx b/packages/documentation/docs/legacy/validation.mdx
index d511eda80de..9884e073c4e 100644
--- a/packages/documentation/docs/legacy/validation.mdx
+++ b/packages/documentation/docs/legacy/validation.mdx
@@ -10,24 +10,25 @@ import Props from './../auto-generated/ix-validation-tooltip/props.md';
 
 # Form validation
 
-<LatestTags url={'/docs/controls/forms/forms-validation'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+<LatestTags
+  url={'/docs/controls/forms/forms-validation'}
+  hasDeprecatedAncestor={false}
+  deprecationVersion="2.6.0"
+></LatestTags>
 
-<br/>
-<br/>
+<br />
+<br />
 
 For the validation `@siemens/ix` use the validation concept of [bootstrap](https://getbootstrap.com/docs/5.2/forms/validation/).
 The difference is that the validation tooltip is implemented as `@siemens/ix` [tooltip](#properties-tooltip)
 
 In the following examples section you will find different implementations of a form validation.
 
-## Examples
+## Legacy Examples
 
 ### Basic
 
-<Playground
-  name="validation"
-  height="22rem"
-/>
+<Playground name="validation" height="22rem" />
 
 ## API
 
diff --git a/packages/documentation/docs/mobile/mobile-app-dev.md b/packages/documentation/docs/mobile/mobile-app-dev.md
index 21a1add5e89..d36fba5484a 100644
--- a/packages/documentation/docs/mobile/mobile-app-dev.md
+++ b/packages/documentation/docs/mobile/mobile-app-dev.md
@@ -146,7 +146,7 @@ Use the defined variables to ensure that the pages of your application displayin
 
 ### Application frame layout
 
-By default, the [Application Frame](./../controls/application-frame/application.md) provides three default layouts (`sm`, `md`, `lg`) that are automatically applied depending on the size of the screen.
+By default, the [Application Frame](./../controls/application-frame/application.mdx) provides three default layouts (`sm`, `md`, `lg`) that are automatically applied depending on the size of the screen.
 
 If you intend to implement an app for both phones and tablets (e.g. iPhone and iPad), it may be necessary to configure the layouts which the application frame can pick from.
 
diff --git a/packages/documentation/docusaurus.config.ts b/packages/documentation/docusaurus.config.ts
index 2ea2442adf2..d83d1f1efbd 100644
--- a/packages/documentation/docusaurus.config.ts
+++ b/packages/documentation/docusaurus.config.ts
@@ -39,6 +39,14 @@ const plugins: PluginConfig[] = [
           to: '/docs/controls/forms/forms-validation',
           from: '/docs/controls/validation',
         },
+        {
+          to: '/docs/legacy/basic-navigation',
+          from: '/docs/controls/application-frame/basic-navigation',
+        },
+        {
+          to: '/docs/legacy/map-navigation',
+          from: '/docs/controls/application-frame/map-navigation',
+        },
       ]
     }
   ]
diff --git a/packages/documentation/src/components/NoteBlock/NoteBlock.scss b/packages/documentation/src/components/NoteBlock/NoteBlock.scss
new file mode 100644
index 00000000000..b23a343eaf1
--- /dev/null
+++ b/packages/documentation/src/components/NoteBlock/NoteBlock.scss
@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+
+.NoteBlock {
+  background-color: var(--theme-color-dynamic);
+  color: var(--theme-color-primary--contrast);
+  border-radius: var(--theme-default-border-radius);
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.NoteBlock__Header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 0.375rem;
+  gap: 0.5rem;
+}
+
+.NoteBlock__Content {
+  height: fit-content;
+
+  ul {
+    margin-bottom: 0rem;
+  }
+
+  li {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+
+    &::before {
+      content: '•';
+      position: absolute;
+      left: 1rem;
+      margin-top: 0.2rem;
+      font-size: large;
+    }
+  }
+
+  p {
+    margin: 0 !important;
+  }
+
+  a {
+    color: var(--theme-color-primary--contrast);
+    font-weight: bold;
+
+    &:hover {
+      color: var(--theme-color-primary--contrast) !important;
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/packages/documentation/src/components/NoteBlock/index.tsx b/packages/documentation/src/components/NoteBlock/index.tsx
new file mode 100644
index 00000000000..73ddd50d3ea
--- /dev/null
+++ b/packages/documentation/src/components/NoteBlock/index.tsx
@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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, { ReactNode, isValidElement, cloneElement } from 'react';
+import { IxIcon, IxTypography } from '@siemens/ix-react';
+import { iconInfo } from '@siemens/ix-icons/icons';
+
+import './NoteBlock.scss';
+
+function prependHref(node: ReactNode): ReactNode {
+  if (isValidElement(node)) {
+    if (node.props.href) {
+      return cloneElement(node, {
+        href: `./../../../docs/controls/${node.props.href}`,
+        children: React.Children.map(node.props.children, prependHref),
+      });
+    }
+    return cloneElement(node, {
+      children: React.Children.map(node.props.children, prependHref),
+    });
+  }
+  return node;
+}
+
+interface NoteBlockProps {
+  readonly children: React.ReactNode;
+}
+
+export default function NoteBlock(props: NoteBlockProps) {
+  const modifiedChildren = React.Children.map(props.children, prependHref);
+
+  return (
+    <div className="NoteBlock">
+      <div className="NoteBlock__Header">
+        <IxIcon name={iconInfo} size="16"></IxIcon>
+        <IxTypography format="label-lg" bold>
+          NOTE
+        </IxTypography>
+      </div>
+      <div className="NoteBlock__Content">
+        <IxTypography format="label-lg">{modifiedChildren}</IxTypography>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/documentation/src/components/PlaygroundV2/utils.ts b/packages/documentation/src/components/PlaygroundV2/utils.ts
index a83b24fc1c6..8601c355fe9 100644
--- a/packages/documentation/src/components/PlaygroundV2/utils.ts
+++ b/packages/documentation/src/components/PlaygroundV2/utils.ts
@@ -34,10 +34,16 @@ export function getBranchPath(framework: TargetFramework) {
 }
 
 export function stripComments(code: string) {
-  return code
-    .replace(/\/\*[^]*?\*\//gs, '')
-    .replace(/<!--[^]*?-->/gs, '')
+  const trimmedCode = code
+    .replace(/\/\*[^]*?\*\//gs, (match) => {
+      return match.includes('{KEEP}') ? match.replace('{KEEP}', '') : '';
+    })
+    .replace(/<!--[^]*?-->/gs, (match) => {
+      return match.includes('{KEEP}') ? match.replace('{KEEP}', '') : '';
+    })
     .trim();
+
+  return trimmedCode;
 }
 
 export type SourceFile = {
diff --git a/packages/documentation/src/components/PlaygroundV3/angular-snippets.ts b/packages/documentation/src/components/PlaygroundV3/angular-snippets.ts
index fea2a313392..ddc6fdf3809 100644
--- a/packages/documentation/src/components/PlaygroundV3/angular-snippets.ts
+++ b/packages/documentation/src/components/PlaygroundV3/angular-snippets.ts
@@ -13,10 +13,11 @@ import { docusaurusFetch } from './fetching';
 async function fetchFile(
   snippets: Record<string, string>,
   url: string,
-  fileName: string
+  fileName: string,
+  removeComments?: boolean
 ) {
   try {
-    const file = await docusaurusFetch(url);
+    const file = await docusaurusFetch(url, removeComments);
 
     if (file) {
       snippets[fileName] = file;
@@ -24,14 +25,28 @@ async function fetchFile(
   } catch (e) {}
 }
 
-export async function fetchSourceForAngular(baseUrl: string, name: string) {
+export async function fetchSourceForAngular(
+  baseUrl: string,
+  name: string,
+  removeComments?: boolean
+) {
   const snippets: Record<string, string> = {};
 
-  await fetchFile(snippets, `${baseUrl}/${name}.html`, `${name}.html`);
+  await fetchFile(
+    snippets,
+    `${baseUrl}/${name}.html`,
+    `${name}.html`,
+    removeComments
+  );
 
   await Promise.all([
-    fetchFile(snippets, `${baseUrl}/${name}.ts`, `${name}.ts`),
-    fetchFile(snippets, `${baseUrl}/${name}.css`, `${name}.css`),
+    fetchFile(snippets, `${baseUrl}/${name}.ts`, `${name}.ts`, removeComments),
+    fetchFile(
+      snippets,
+      `${baseUrl}/${name}.css`,
+      `${name}.css`,
+      removeComments
+    ),
   ]);
 
   return snippets;
diff --git a/packages/documentation/src/components/PlaygroundV3/html-snippets.ts b/packages/documentation/src/components/PlaygroundV3/html-snippets.ts
index 527b8bac5a9..e8841be1cdf 100644
--- a/packages/documentation/src/components/PlaygroundV3/html-snippets.ts
+++ b/packages/documentation/src/components/PlaygroundV3/html-snippets.ts
@@ -10,14 +10,24 @@ import { TargetFramework } from '../PlaygroundV2/framework-types';
 import { getBranchPath } from '../PlaygroundV2/utils';
 import { docusaurusFetch } from './fetching';
 
-export async function fetchSourceForHtml(baseUrl: string, name: string) {
+export async function fetchSourceForHtml(
+  baseUrl: string,
+  name: string,
+  removeComments?: boolean
+) {
   const snippets: Record<string, string> = {};
-  const htmlFile = await docusaurusFetch(`${baseUrl}/${name}.html`, true);
+  const htmlFile = await docusaurusFetch(
+    `${baseUrl}/${name}.html`,
+    removeComments
+  );
 
   snippets[`${name}.html`] = htmlFile;
 
   try {
-    const styleFile = await docusaurusFetch(`${baseUrl}/${name}.css`);
+    const styleFile = await docusaurusFetch(
+      `${baseUrl}/${name}.css`,
+      removeComments
+    );
 
     if (styleFile) {
       snippets[`./${name}.css`] = styleFile;
diff --git a/packages/documentation/src/components/PlaygroundV3/index.tsx b/packages/documentation/src/components/PlaygroundV3/index.tsx
index 462ecfce109..5e88b5239ba 100644
--- a/packages/documentation/src/components/PlaygroundV3/index.tsx
+++ b/packages/documentation/src/components/PlaygroundV3/index.tsx
@@ -16,23 +16,14 @@ import {
 } from '@siemens/ix-react';
 import { useTheme } from '@site/src/utils/hooks/useTheme';
 import CodeBlock from '@theme/CodeBlock';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Demo, { DemoProps } from '../Demo';
 import { getDisplay, TargetFramework } from '../PlaygroundV2/framework-types';
-import {
-  fetchSourceForAngular,
-  getAngularTestAppGithubPath,
-} from './angular-snippets';
-import {
-  fetchSourceForHtml,
-  getJavascriptTestAppGithubPath,
-} from './html-snippets';
+import { fetchSourceForAngular } from './angular-snippets';
+import { fetchSourceForHtml } from './html-snippets';
 import './playground.css';
-import {
-  fetchSourceForReact,
-  getReactTestAppGithubPath,
-} from './react-snippets';
-import { fetchSourceForVue, getVueTestAppGithubPath } from './vue-snippets';
+import { fetchSourceForReact } from './react-snippets';
+import { fetchSourceForVue } from './vue-snippets';
 import { docusaurusFetch } from './fetching';
 import { openStackBlitz } from '../../utils/stackblitz';
 
@@ -71,7 +62,8 @@ function useSnippetFetcher(
   activeFramework: TargetFramework,
   name: string,
   alternativeSnippets?: Record<TargetFramework, string[]>,
-  preventDefaultExample?: boolean
+  preventDefaultExample?: boolean,
+  removeComments?: boolean
 ): {
   isFetching: boolean;
   hasError: boolean;
@@ -93,19 +85,19 @@ function useSnippetFetcher(
 
     if (!preventDefaultExample && url) {
       if (activeFramework === TargetFramework.ANGULAR) {
-        fetchExamplePreview$ = fetchSourceForAngular(url, name);
+        fetchExamplePreview$ = fetchSourceForAngular(url, name, removeComments);
       }
 
       if (activeFramework === TargetFramework.REACT) {
-        fetchExamplePreview$ = fetchSourceForReact(url, name);
+        fetchExamplePreview$ = fetchSourceForReact(url, name, removeComments);
       }
 
       if (activeFramework === TargetFramework.VUE) {
-        fetchExamplePreview$ = fetchSourceForVue(url, name);
+        fetchExamplePreview$ = fetchSourceForVue(url, name, removeComments);
       }
 
       if (activeFramework === TargetFramework.JAVASCRIPT) {
-        fetchExamplePreview$ = fetchSourceForHtml(url, name);
+        fetchExamplePreview$ = fetchSourceForHtml(url, name, removeComments);
       }
 
       if (!fetchExamplePreview$) {
@@ -119,7 +111,10 @@ function useSnippetFetcher(
         Promise.all(
           alternativeSnippets[activeFramework].map(async (file) => {
             try {
-              const data = await docusaurusFetch(`${url}/${file}`);
+              const data = await docusaurusFetch(
+                `${url}/${file}`,
+                removeComments
+              );
               _snippets[file] = data;
             } catch (error) {
               reject(error);
@@ -152,7 +147,6 @@ function useSnippetFetcher(
 }
 
 function SnippetPreview(props: { snippets: Record<string, string> }) {
-  const baseUrl = useBaseUrl('/');
   const [activeFile, setActiveFile] = useState<string | null>(
     Object.keys(props.snippets)[0]
   );
@@ -212,7 +206,7 @@ function ToolbarButtons(props: {
   const theme = useTheme();
   const baseUrl = useBaseUrl('/');
   const baseUrlAssets = useBaseUrl('/img');
-  const stackblizAssetUrl = `${baseUrlAssets}/stackblitz.svg`;
+  const stackblitzAssetUrl = `${baseUrlAssets}/stackblitz.svg`;
   const iframe = useBaseUrl('/webcomponent-examples/dist/preview-examples');
 
   return (
@@ -244,7 +238,7 @@ function ToolbarButtons(props: {
               })
             }
             className="Stackblitz"
-            icon={stackblizAssetUrl}
+            icon={stackblitzAssetUrl}
             outline
             //@ts-ignore
             iconSize="16"
@@ -277,6 +271,7 @@ export type PlaygroundV3Props = {
   preventDefaultExample?: boolean;
   additionalFiles?: Record<TargetFramework, string[]>;
   deviantRootFileName?: string;
+  removeComments?: boolean;
 } & DemoProps;
 
 export default function PlaygroundV3(props: PlaygroundV3Props) {
@@ -288,15 +283,14 @@ export default function PlaygroundV3(props: PlaygroundV3Props) {
     activeFramework,
     props.name,
     props.additionalFiles,
-    props.preventDefaultExample
+    props.preventDefaultExample,
+    props.removeComments
   );
 
   function onActiveFrameworkChange(framework: TargetFramework) {
     setActiveFramework(framework);
   }
 
-  const showCode = activeFramework !== TargetFramework.PREVIEW;
-
   return (
     <div className="Playground">
       <div className="Toolbar">
@@ -339,7 +333,7 @@ export default function PlaygroundV3(props: PlaygroundV3Props) {
           name={props.name}
           deviantRootFileName={props.deviantRootFileName}
           activeFramework={activeFramework}
-          noMargin={false}
+          noMargin={props.noMargin}
           snippets={snippets}
         ></ToolbarButtons>
       </div>
diff --git a/packages/documentation/src/components/PlaygroundV3/react-snippets.ts b/packages/documentation/src/components/PlaygroundV3/react-snippets.ts
index 1831872fabe..4124dcc3b0e 100644
--- a/packages/documentation/src/components/PlaygroundV3/react-snippets.ts
+++ b/packages/documentation/src/components/PlaygroundV3/react-snippets.ts
@@ -10,14 +10,24 @@ import { TargetFramework } from '../PlaygroundV2/framework-types';
 import { getBranchPath } from '../PlaygroundV2/utils';
 import { docusaurusFetch } from './fetching';
 
-export async function fetchSourceForReact(baseUrl: string, name: string) {
+export async function fetchSourceForReact(
+  baseUrl: string,
+  name: string,
+  removeComments?: boolean
+) {
   const snippets: Record<string, string> = {};
-  const tsFile = await docusaurusFetch(`${baseUrl}/${name}.tsx`);
+  const tsFile = await docusaurusFetch(
+    `${baseUrl}/${name}.tsx`,
+    removeComments
+  );
 
   snippets[`${name}.tsx`] = tsFile;
 
   try {
-    const styleFile = await docusaurusFetch(`${baseUrl}/${name}.css`);
+    const styleFile = await docusaurusFetch(
+      `${baseUrl}/${name}.css`,
+      removeComments
+    );
     if (styleFile) {
       snippets[`./${name}.css`] = styleFile;
     }
diff --git a/packages/documentation/src/components/PlaygroundV3/vue-snippets.ts b/packages/documentation/src/components/PlaygroundV3/vue-snippets.ts
index 004e6b4ae66..4fbbebd38cd 100644
--- a/packages/documentation/src/components/PlaygroundV3/vue-snippets.ts
+++ b/packages/documentation/src/components/PlaygroundV3/vue-snippets.ts
@@ -10,14 +10,24 @@ import { TargetFramework } from '../PlaygroundV2/framework-types';
 import { getBranchPath } from '../PlaygroundV2/utils';
 import { docusaurusFetch } from './fetching';
 
-export async function fetchSourceForVue(baseUrl: string, name: string) {
+export async function fetchSourceForVue(
+  baseUrl: string,
+  name: string,
+  removeComments?: boolean
+) {
   const snippets: Record<string, string> = {};
-  const tsFile = await docusaurusFetch(`${baseUrl}/${name}.vue`);
+  const tsFile = await docusaurusFetch(
+    `${baseUrl}/${name}.vue`,
+    removeComments
+  );
 
   snippets[`${name}.vue`] = tsFile;
 
   try {
-    const styleFile = await docusaurusFetch(`${baseUrl}/${name}.css`);
+    const styleFile = await docusaurusFetch(
+      `${baseUrl}/${name}.css`,
+      removeComments
+    );
     if (styleFile) {
       snippets[`./${name}.css`] = styleFile;
     }
diff --git a/packages/documentation/src/components/Tags/index.tsx b/packages/documentation/src/components/Tags/index.tsx
index c5fcdecce0d..7df2945a6b3 100644
--- a/packages/documentation/src/components/Tags/index.tsx
+++ b/packages/documentation/src/components/Tags/index.tsx
@@ -6,6 +6,7 @@ export default function LegacyTag(
     url: string;
     hasDeprecatedAncestor: boolean;
     deprecationVersion?: string;
+    ancestorName?: string;
   }>
 ) {
   return (
@@ -18,7 +19,7 @@ export default function LegacyTag(
       <a href={props.url} target="_blank" className="TagContainer">
         <IxIcon name="open-external" color="color-primary" size="16"></IxIcon>
         {props.hasDeprecatedAncestor
-          ? 'Show deprecated version'
+          ? 'Show deprecated ' + (props.ancestorName || 'version')
           : 'Show latest version'}
       </a>
     </div>
diff --git a/packages/html-test-app/src/preview-examples/application-app-switch.html b/packages/html-test-app/src/preview-examples/application-app-switch.html
index 30d00109eb6..d1d13ba9217 100644
--- a/packages/html-test-app/src/preview-examples/application-app-switch.html
+++ b/packages/html-test-app/src/preview-examples/application-app-switch.html
@@ -18,7 +18,20 @@
     <ix-application>
       <ix-application-header name="Calculator App">
         <placeholder-logo slot="logo"></placeholder-logo>
+
+        <ix-dropdown-button variant="secondary" label="Select config" ghost>
+          <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+          <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+          <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+        </ix-dropdown-button>
+
+        <ix-avatar>
+          <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+          <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+          <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+        </ix-avatar>
       </ix-application-header>
+
       <ix-menu>
         <ix-menu-item>Item 1</ix-menu-item>
         <ix-menu-item>Item 2</ix-menu-item>
diff --git a/packages/html-test-app/src/preview-examples/application-breakpoints.html b/packages/html-test-app/src/preview-examples/application-breakpoints.html
index e975752563c..7c8ae7f3175 100644
--- a/packages/html-test-app/src/preview-examples/application-breakpoints.html
+++ b/packages/html-test-app/src/preview-examples/application-breakpoints.html
@@ -31,10 +31,12 @@
           <ix-dropdown-item label="Action 3"></ix-dropdown-item>
         </ix-avatar>
       </ix-application-header>
+
       <ix-menu>
         <ix-menu-item>Item 1</ix-menu-item>
         <ix-menu-item>Item 2</ix-menu-item>
       </ix-menu>
+
       <ix-content>
         <ix-content-header slot="header" header-title="Choose breakpoint">
         </ix-content-header>
diff --git a/packages/html-test-app/src/preview-examples/application.html b/packages/html-test-app/src/preview-examples/application.html
index 2654080a16d..97520569d76 100644
--- a/packages/html-test-app/src/preview-examples/application.html
+++ b/packages/html-test-app/src/preview-examples/application.html
@@ -19,6 +19,7 @@
       <ix-application-header name="My Application">
         <div class="placeholder-logo" slot="logo"></div>
       </ix-application-header>
+
       <ix-menu>
         <ix-menu-item>Item 1</ix-menu-item>
         <ix-menu-item>Item 2</ix-menu-item>
diff --git a/packages/html-test-app/src/preview-examples/basic-navigation-migration.css b/packages/html-test-app/src/preview-examples/basic-navigation-migration.css
new file mode 100644
index 00000000000..a726a2876a5
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/basic-navigation-migration.css
@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/packages/html-test-app/src/preview-examples/basic-navigation-migration.html b/packages/html-test-app/src/preview-examples/basic-navigation-migration.html
new file mode 100644
index 00000000000..85d7f0dd867
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/basic-navigation-migration.html
@@ -0,0 +1,33 @@
+<!--
+SPDX-FileCopyrightText: 2024 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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Basic navigation migration example</title>
+    <link rel="stylesheet" href="./basic-navigation-migration.css" />
+  </head>
+  <body>
+    <ix-application>
+      <!--{KEEP} Compare hideHeader property -->
+      <ix-application-header name="My Application">
+        <div class="placeholder-logo" slot="logo"></div>
+      </ix-application-header>
+
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+      </ix-menu>
+    </ix-application>
+
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
diff --git a/packages/html-test-app/src/preview-examples/map-navigation-migration.css b/packages/html-test-app/src/preview-examples/map-navigation-migration.css
new file mode 100644
index 00000000000..c4c74416732
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/map-navigation-migration.css
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+.application {
+  height: 100vh;
+  width: 100vw;
+
+  .overlay {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
+
+  .content {
+    box-sizing: border-box;
+  }
+}
diff --git a/packages/html-test-app/src/preview-examples/map-navigation-migration.html b/packages/html-test-app/src/preview-examples/map-navigation-migration.html
new file mode 100644
index 00000000000..402e13fcc11
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/map-navigation-migration.html
@@ -0,0 +1,83 @@
+<!--
+SPDX-FileCopyrightText: 2024 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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Map navigation migration example</title>
+    <link rel="stylesheet" href="./map-navigation-migration.css" />
+  </head>
+  <body>
+    <ix-application class="application">
+      <ix-application-header name="My Application">
+        <div class="placeholder-logo" slot="logo"></div>
+
+        <!--{KEEP} Compare context menu -->
+        <ix-dropdown-button variant="secondary" label="Select config" ghost>
+          <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+          <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+          <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+        </ix-dropdown-button>
+      </ix-application-header>
+
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+      </ix-menu>
+
+      <!--{KEEP} Compare overlay -->
+      <ix-pane
+        id="overlay"
+        class="overlay"
+        composition="right"
+        heading="Custom overlay"
+        icon="bulb"
+        size="320px"
+        variant="floating"
+        hide-on-collapse
+        expanded="false"
+      >
+        Overlay content
+      </ix-pane>
+
+      <ix-pane-layout>
+        <!--{KEEP} Compare sidebar -->
+        <ix-pane slot="left" heading="Navigation title" size="320px" expanded>
+          Sidebar content
+        </ix-pane>
+
+        <ix-content class="content">
+          <ix-content-header slot="header" header-title="My Content Page">
+          </ix-content-header>
+
+          <ix-button id="btn-open-overlay">Open overlay</ix-button>
+        </ix-content>
+      </ix-pane-layout>
+    </ix-application>
+
+    <script type="module">
+      const overlay = document.getElementById('overlay');
+      const buttonOpenOverlay = document.getElementById('btn-open-overlay');
+
+      let expanded = overlay.getAttribute('expanded') === 'true';
+
+      overlay.addEventListener('expandedChanged', (e) => {
+        expanded = e.detail.expanded;
+      });
+      buttonOpenOverlay.addEventListener('click', () => {
+        expanded = !expanded;
+        overlay.setAttribute('expanded', expanded);
+      });
+    </script>
+
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
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
index b4a65578b9c..e98c1d61e7a 100644
--- a/packages/html-test-app/src/preview-examples/map-navigation-overlay.html
+++ b/packages/html-test-app/src/preview-examples/map-navigation-overlay.html
@@ -16,14 +16,27 @@
   </head>
   <body>
     <ix-map-navigation
-      application-name="Test Application"
-      navigation-title="Some other content"
+      application-name="My Application"
+      navigation-title="Navigation title"
+      hide-context-menu="false"
     >
       <div class="placeholder-logo" slot="logo"></div>
+
       <ix-menu>
         <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
       </ix-menu>
-      <ix-button id="btn-open-overlay">Open overlay</ix-button>
+
+      <ix-content slot="sidebar-content">Sidebar content</ix-content>
+
+      <ix-content>
+        <ix-content-header
+          slot="header"
+          header-title="My Content Page"
+        ></ix-content-header>
+
+        <ix-button id="btn-open-overlay">Open overlay</ix-button>
+      </ix-content>
     </ix-map-navigation>
 
     <script type="module">
@@ -35,6 +48,11 @@
         overlay.slot = 'overlay';
         overlay.name = 'Custom overlay';
         overlay.icon = 'bulb';
+
+        const overlayContent = document.createElement('ix-content');
+        overlayContent.textContent = 'Overlay content';
+
+        overlay.appendChild(overlayContent);
         mapNav.appendChild(overlay);
 
         overlay.addEventListener('closeClick', (e) => {
diff --git a/packages/html-test-app/src/preview-examples/map-navigation.html b/packages/html-test-app/src/preview-examples/map-navigation.html
index 2ec92bbcfeb..c625637c894 100644
--- a/packages/html-test-app/src/preview-examples/map-navigation.html
+++ b/packages/html-test-app/src/preview-examples/map-navigation.html
@@ -16,17 +16,25 @@
   </head>
   <body>
     <ix-map-navigation
-      application-name="Test Application"
-      navigation-title="Some other content"
+      application-name="My Application"
+      navigation-title="Navigation title"
+      hide-context-menu="false"
     >
       <div class="placeholder-logo" slot="logo"></div>
+
       <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>
-      <div>Content</div>
+
+      <ix-content slot="sidebar-content">Sidebar content</ix-content>
+
+      <ix-content>
+        <ix-content-header
+          slot="header"
+          header-title="My Content Page"
+        ></ix-content-header>
+      </ix-content>
     </ix-map-navigation>
     <script type="module" src="./init.js"></script>
   </body>
diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx
index 778af5ab9ab..bdd3d731a96 100644
--- a/packages/react-test-app/src/main.tsx
+++ b/packages/react-test-app/src/main.tsx
@@ -218,6 +218,8 @@ import LayoutAutoCustom from './preview-examples/layout-auto-custom';
 import FormCheckboxGroupIndeterminate from './preview-examples/form-checkbox-group-indeterminate';
 import FormLayoutAuto from './preview-examples/form-layout-auto';
 import FormLayoutGrid from './preview-examples/form-layout-grid';
+import MapNavigationMigration from './preview-examples/map-navigation-migration';
+import BasicNavigationMigration from './preview-examples/basic-navigation-migration';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <IxApplicationContext>
@@ -251,6 +253,10 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
           element={<BasicNavigationWithoutHeader />}
         />
         <Route path="/preview/basic-navigation" element={<BasicNavigation />} />
+        <Route
+          path="/preview/basic-navigation-migration"
+          element={<BasicNavigationMigration />}
+        />
         <Route
           path="/preview/blind-header-actions"
           element={<BlindHeaderActions />}
@@ -518,6 +524,10 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
           element={<MapNavigationOverlay />}
         />
         <Route path="/preview/map-navigation" element={<MapNavigation />} />
+        <Route
+          path="/preview/map-navigation-migration"
+          element={<MapNavigationMigration />}
+        />
         <Route path="/preview/menu-category" element={<MenuCategory />} />
         <Route
           path="/preview/menu-with-bottom-tabs"
diff --git a/packages/react-test-app/src/preview-examples/application-app-switch.tsx b/packages/react-test-app/src/preview-examples/application-app-switch.tsx
index 0235f96086d..55cafad8474 100644
--- a/packages/react-test-app/src/preview-examples/application-app-switch.tsx
+++ b/packages/react-test-app/src/preview-examples/application-app-switch.tsx
@@ -16,7 +16,6 @@ import {
   IxContentHeader,
   IxDropdownButton,
   IxDropdownItem,
-  IxIconButton,
   IxMenu,
   IxMenuItem,
 } from '@siemens/ix-react';
@@ -50,10 +49,6 @@ export default () => {
       <IxApplicationHeader name="My Application">
         <div className="placeholder-logo" slot="logo"></div>
 
-        <IxIconButton ghost icon="checkboxes"></IxIconButton>
-        <IxIconButton ghost icon="checkboxes"></IxIconButton>
-        <IxIconButton ghost icon="checkboxes"></IxIconButton>
-
         <IxDropdownButton variant="secondary" label="Select config" ghost>
           <IxDropdownItem label="Config 1"></IxDropdownItem>
           <IxDropdownItem label="Config 2"></IxDropdownItem>
@@ -66,6 +61,7 @@ export default () => {
           <IxDropdownItem label="Action 3"></IxDropdownItem>
         </IxAvatar>
       </IxApplicationHeader>
+
       <IxMenu>
         <IxMenuItem>Item 1</IxMenuItem>
         <IxMenuItem>Item 2</IxMenuItem>
@@ -74,7 +70,7 @@ export default () => {
       <IxContent>
         <IxContentHeader
           slot="header"
-          header-title="My Content Page"
+          headerTitle="My Content Page"
         ></IxContentHeader>
       </IxContent>
     </IxApplication>
diff --git a/packages/react-test-app/src/preview-examples/application-breakpoints.tsx b/packages/react-test-app/src/preview-examples/application-breakpoints.tsx
index 97118616850..2c2d8489ea1 100644
--- a/packages/react-test-app/src/preview-examples/application-breakpoints.tsx
+++ b/packages/react-test-app/src/preview-examples/application-breakpoints.tsx
@@ -16,7 +16,6 @@ import {
   IxContentHeader,
   IxDropdownButton,
   IxDropdownItem,
-  IxIconButton,
   IxMenu,
   IxMenuItem,
 } from '@siemens/ix-react';
@@ -31,10 +30,6 @@ export default () => {
       <IxApplicationHeader name="My Application">
         <div className="placeholder-logo" slot="logo"></div>
 
-        <IxIconButton ghost icon="checkboxes"></IxIconButton>
-        <IxIconButton ghost icon="checkboxes"></IxIconButton>
-        <IxIconButton ghost icon="checkboxes"></IxIconButton>
-
         <IxDropdownButton variant="secondary" label="Select config" ghost>
           <IxDropdownItem label="Config 1"></IxDropdownItem>
           <IxDropdownItem label="Config 2"></IxDropdownItem>
@@ -47,6 +42,7 @@ export default () => {
           <IxDropdownItem label="Action 3"></IxDropdownItem>
         </IxAvatar>
       </IxApplicationHeader>
+
       <IxMenu>
         <IxMenuItem>Item 1</IxMenuItem>
         <IxMenuItem>Item 2</IxMenuItem>
@@ -55,7 +51,7 @@ export default () => {
       <IxContent>
         <IxContentHeader
           slot="header"
-          header-title="Choose breakpoint"
+          headerTitle="Choose breakpoint"
         ></IxContentHeader>
         <input
           id="small"
diff --git a/packages/react-test-app/src/preview-examples/application.tsx b/packages/react-test-app/src/preview-examples/application.tsx
index da98550d068..79e362b0ec3 100644
--- a/packages/react-test-app/src/preview-examples/application.tsx
+++ b/packages/react-test-app/src/preview-examples/application.tsx
@@ -22,6 +22,7 @@ export default () => {
       <IxApplicationHeader name="My Application">
         <div className="placeholder-logo" slot="logo"></div>
       </IxApplicationHeader>
+
       <IxMenu>
         <IxMenuItem>Item 1</IxMenuItem>
         <IxMenuItem>Item 2</IxMenuItem>
@@ -30,7 +31,7 @@ export default () => {
       <IxContent>
         <IxContentHeader
           slot="header"
-          header-title="My Content Page"
+          headerTitle="My Content Page"
         ></IxContentHeader>
       </IxContent>
     </IxApplication>
diff --git a/packages/react-test-app/src/preview-examples/basic-navigation-migration.css b/packages/react-test-app/src/preview-examples/basic-navigation-migration.css
new file mode 100644
index 00000000000..a726a2876a5
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/basic-navigation-migration.css
@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/packages/react-test-app/src/preview-examples/basic-navigation-migration.tsx b/packages/react-test-app/src/preview-examples/basic-navigation-migration.tsx
new file mode 100644
index 00000000000..e62c608670b
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/basic-navigation-migration.tsx
@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 './basic-navigation-migration.css';
+
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-react';
+
+export default () => {
+  return (
+    <IxApplication>
+      {/*{KEEP} Compare hideHeader property */}
+      <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo" slot="logo"></div>
+      </IxApplicationHeader>
+
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+    </IxApplication>
+  );
+};
diff --git a/packages/react-test-app/src/preview-examples/map-navigation-migration.css b/packages/react-test-app/src/preview-examples/map-navigation-migration.css
new file mode 100644
index 00000000000..c4c74416732
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/map-navigation-migration.css
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+.application {
+  height: 100vh;
+  width: 100vw;
+
+  .overlay {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
+
+  .content {
+    box-sizing: border-box;
+  }
+}
diff --git a/packages/react-test-app/src/preview-examples/map-navigation-migration.tsx b/packages/react-test-app/src/preview-examples/map-navigation-migration.tsx
new file mode 100644
index 00000000000..38a2f258474
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/map-navigation-migration.tsx
@@ -0,0 +1,94 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 './map-navigation-migration.css';
+
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxButton,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxPane,
+  IxPaneLayout,
+} from '@siemens/ix-react';
+
+import { useState } from 'react';
+
+export default () => {
+  const [expanded, setExpanded] = useState(false);
+
+  const initialExpanded = true;
+
+  function resetExpanded(value: boolean) {
+    setExpanded(value);
+  }
+
+  return (
+    <IxApplication className="application">
+      <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo" slot="logo"></div>
+
+        {/*{KEEP} Compare context menu */}
+        <IxDropdownButton variant="secondary" label="Select config" ghost>
+          <IxDropdownItem label="Config 1"></IxDropdownItem>
+          <IxDropdownItem label="Config 2"></IxDropdownItem>
+          <IxDropdownItem label="Config 3"></IxDropdownItem>
+        </IxDropdownButton>
+      </IxApplicationHeader>
+
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+
+      {/*{KEEP} Compare overlay */}
+      <IxPane
+        className="overlay"
+        composition="right"
+        heading="Custom overlay"
+        icon="bulb"
+        size="320px"
+        variant="floating"
+        hideOnCollapse
+        expanded={expanded}
+        onExpandedChanged={(e) => resetExpanded(e.detail.expanded)}
+      >
+        Overlay content
+      </IxPane>
+
+      <IxPaneLayout>
+        {/*{KEEP} Compare sidebar */}
+        <IxPane
+          slot="left"
+          heading="Navigation title"
+          size="320px"
+          expanded={initialExpanded}
+        >
+          Sidebar content
+        </IxPane>
+
+        <IxContent className="content">
+          <IxContentHeader
+            slot="header"
+            headerTitle="My Content Page"
+          ></IxContentHeader>
+
+          <IxButton onClick={() => setExpanded(!expanded)}>
+            Open overlay
+          </IxButton>
+        </IxContent>
+      </IxPaneLayout>
+    </IxApplication>
+  );
+};
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
index 70ddfe77590..ba35666bad6 100644
--- a/packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx
+++ b/packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx
@@ -9,6 +9,8 @@
 
 import {
   IxButton,
+  IxContent,
+  IxContentHeader,
   IxMapNavigation,
   IxMapNavigationOverlay,
   IxMenu,
@@ -28,31 +30,45 @@ export default () => {
   }
 
   return (
-    <IxMapNavigation>
+    <IxMapNavigation
+      applicationName="My Application"
+      navigationTitle="Navigation title"
+      hideContextMenu={false}
+    >
       <div className="placeholder-logo" slot="logo"></div>
+
       <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>
+
+      <IxContent slot="sidebar-content">Sidebar content</IxContent>
+
+      <IxContent>
+        <IxContentHeader
+          slot="header"
+          header-title="My Content Page"
+        ></IxContentHeader>
+
+        <IxButton
+          onClick={() => {
+            openOverlay();
+          }}
+        >
+          Open overlay
+        </IxButton>
+      </IxContent>
+
+      {overlay ? (
+        <IxMapNavigationOverlay
+          slot="overlay"
+          name="Custom overlay"
+          icon="bulb"
+          onCloseClick={() => closeOverlay()}
+        >
+          <IxContent>Overlay content</IxContent>
+        </IxMapNavigationOverlay>
+      ) : null}
     </IxMapNavigation>
   );
 };
diff --git a/packages/react-test-app/src/preview-examples/map-navigation.tsx b/packages/react-test-app/src/preview-examples/map-navigation.tsx
index 0e2105f0aa1..2cb4cc23bf8 100644
--- a/packages/react-test-app/src/preview-examples/map-navigation.tsx
+++ b/packages/react-test-app/src/preview-examples/map-navigation.tsx
@@ -7,22 +7,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxMapNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
+import {
+  IxContent,
+  IxContentHeader,
+  IxMapNavigation,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-react';
 
 export default () => {
   return (
     <IxMapNavigation
-      applicationName="Test Application"
-      navigationTitle="Some other content"
+      applicationName="My Application"
+      navigationTitle="Navigation title"
+      hideContextMenu={false}
     >
       <div className="placeholder-logo" slot="logo"></div>
+
       <IxMenu>
         <IxMenuItem>Item 1</IxMenuItem>
         <IxMenuItem>Item 2</IxMenuItem>
-        <IxMenuItem>Item 3</IxMenuItem>
       </IxMenu>
-      <div slot="sidebar-content">Sidebar content</div>
-      <div>Content</div>
+
+      <IxContent slot="sidebar-content">Sidebar content</IxContent>
+
+      <IxContent>
+        <IxContentHeader
+          slot="header"
+          header-title="My Content Page"
+        ></IxContentHeader>
+      </IxContent>
     </IxMapNavigation>
   );
 };
diff --git a/packages/storybook-docs/src/stories/basic-navigation.stories.ts b/packages/storybook-docs/src/stories/basic-navigation.stories.ts
new file mode 100644
index 00000000000..767b37a6ecb
--- /dev/null
+++ b/packages/storybook-docs/src/stories/basic-navigation.stories.ts
@@ -0,0 +1,78 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 { Components } from '@siemens/ix';
+import type { ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { icon } from './utils/arg-types';
+import { makeArgTypes } from './utils/generic-render';
+
+@customElement('story-basic-navigation')
+export class ExampleBasicNavigation extends LitElement {
+  @property() args: Partial<ArgTypes<Element>> = {};
+  @property() overlay = false;
+
+  protected render() {
+    return html`
+      <ix-basic-navigation
+        application-name=${this.args.applicationName}
+        hide-header=${this.args.hideHeader}
+        force-breakpoint=${this.args.forceBreakpoint}
+      >
+        <ix-icon slot="logo" name=${this.args.icon}></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>
+        <ix-content style="height: fit-content"
+          >${this.args.defaultSlot}</ix-content
+        >
+      </ix-basic-navigation>
+    `;
+  }
+}
+
+type Element = Components.IxBasicNavigation & {
+  icon: string;
+  defaultSlot: string;
+};
+
+const meta = {
+  title: 'Example/Basic-Navigation',
+  render: (args) => {
+    return html`<story-basic-navigation
+      .args=${args}
+    ></story-basic-navigation>`;
+  },
+  argTypes: makeArgTypes<Partial<ArgTypes<Element>>>(
+    'ix-basic-navigation',
+    {
+      icon: icon('application icon', false),
+      defaultSlot: {
+        control: { type: 'text' },
+      },
+    },
+    true,
+    ['breakpoints', 'forceBreakpoint']
+  ),
+} satisfies Meta<Element>;
+
+export default meta;
+type Story = StoryObj<Element>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    applicationName: 'Application Name',
+    hideHeader: false,
+    icon: 'barchart',
+    defaultSlot: 'Main Content',
+  },
+};
diff --git a/packages/storybook-docs/src/stories/map-navigation.stories.ts b/packages/storybook-docs/src/stories/map-navigation.stories.ts
new file mode 100644
index 00000000000..5ffe9f5e315
--- /dev/null
+++ b/packages/storybook-docs/src/stories/map-navigation.stories.ts
@@ -0,0 +1,126 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 { Components } from '@siemens/ix';
+import type { ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { icon } from './utils/arg-types';
+import { makeArgTypes } from './utils/generic-render';
+
+@customElement('story-map-navigation')
+export class ExampleMapNavigation extends LitElement {
+  @property() args: Partial<ArgTypes<Element>> = {};
+  @property() overlay = false;
+
+  protected render() {
+    return html`
+      <ix-map-navigation
+        application-name=${this.args.applicationName}
+        hide-context-menu=${this.args.hideContextMenu}
+        navigation-title=${this.args.navigationTitle}
+      >
+        <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>
+        <ix-icon slot="logo" name=${this.args.icon}></ix-icon>
+        <ix-content
+          slot="sidebar-content"
+          style="width: 100%; box-sizing: border-box"
+          >${this.args.sidebarContentSlot}
+        </ix-content>
+
+        <ix-content>
+          ${this.args.defaultSlot}
+          <br />
+          <br />
+          <ix-button @click=${() => (this.overlay = !this.overlay)}
+            >Open overlay</ix-button
+          >
+        </ix-content>
+
+        ${this.overlay
+          ? html`
+              <ix-map-navigation-overlay
+                name=${this.args.overlayName}
+                icon=${this.args.overlayIcon}
+                @closeClick=${() => {
+                  this.overlay = false;
+                }}
+                slot="overlay"
+              >
+                <ix-content> ${this.args.overlayDefaultSlot} </ix-content>
+              </ix-map-navigation-overlay>
+            `
+          : ''}
+      </ix-map-navigation>
+    `;
+  }
+}
+
+type Element = Components.IxMapNavigation & {
+  icon: string;
+  defaultSlot: string;
+  sidebarContentSlot: string;
+  overlayIcon: string;
+  overlayName: string;
+  overlayDefaultSlot: string;
+  showExampleOverlay: boolean;
+};
+
+const meta = {
+  title: 'Example/Map-Navigation',
+  render: (args) => {
+    return html`<story-map-navigation
+      .args=${args}
+      .overlay=${args.showExampleOverlay}
+    ></story-map-navigation>`;
+  },
+  argTypes: makeArgTypes<Partial<ArgTypes<Element>>>('ix-map-navigation', {
+    icon: icon('application icon', false),
+    defaultSlot: {
+      control: { type: 'text' },
+    },
+    sidebarContentSlot: {
+      control: { type: 'text' },
+    },
+    overlayIcon: icon('overlay icon', false),
+    overlayName: {
+      control: { type: 'text' },
+    },
+    overlayDefaultSlot: {
+      control: { type: 'text' },
+    },
+    showExampleOverlay: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  }),
+} satisfies Meta<Element>;
+
+export default meta;
+type Story = StoryObj<Element>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    applicationName: 'Application Name',
+    hideContextMenu: false,
+    navigationTitle: 'Navigation Title',
+    icon: 'barchart',
+    defaultSlot: 'Main Content',
+    sidebarContentSlot: 'Sidebar Content',
+    overlayName: 'Custom Overlay',
+    overlayIcon: 'bulb',
+    overlayDefaultSlot: 'Overlay Content',
+    showExampleOverlay: true,
+  },
+};
diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue
index 00340e0c484..e3c3d3973bd 100644
--- a/packages/vue-test-app/src/Root.vue
+++ b/packages/vue-test-app/src/Root.vue
@@ -217,6 +217,8 @@ import WorkflowVertical from './preview-examples/workflow-vertical.vue';
 import Workflow from './preview-examples/workflow.vue';
 import FormLayoutAuto from './preview-examples/form-layout-auto.vue';
 import FormLayoutGrid from './preview-examples/form-layout-grid.vue';
+import MapNavigationMigration from './preview-examples/map-navigation-migration.vue';
+import BasicNavigationMigration from './preview-examples/basic-navigation-migration.vue';
 
 const routes: any = {
   '/': App,
@@ -233,6 +235,7 @@ const routes: any = {
   '/preview/avatar': Avatar,
   '/preview/basic-navigation-without-header': BasicNavigationWithoutHeader,
   '/preview/basic-navigation': BasicNavigation,
+  '/preview/basic-navigation-migration': BasicNavigationMigration,
   '/preview/blind-header-actions': BlindHeaderActions,
   '/preview/blind-variants': BlindVariants,
   '/preview/blind': Blind,
@@ -380,6 +383,7 @@ const routes: any = {
   '/preview/workflow-vertical': WorkflowVertical,
   '/preview/map-navigation': MapNavigation,
   '/preview/map-navigation-overlay': MapNavigationOverlay,
+  '/preview/map-navigation-migration': MapNavigationMigration,
   '/preview/tooltip': Tooltip,
   '/preview/push-card': PushCard,
   '/preview/page-header': ContentHeader,
diff --git a/packages/vue-test-app/src/preview-examples/application-app-switch.vue b/packages/vue-test-app/src/preview-examples/application-app-switch.vue
index c515ce225a8..32948a7e6d3 100644
--- a/packages/vue-test-app/src/preview-examples/application-app-switch.vue
+++ b/packages/vue-test-app/src/preview-examples/application-app-switch.vue
@@ -17,7 +17,6 @@ import {
   IxContentHeader,
   IxDropdownButton,
   IxDropdownItem,
-  IxIconButton,
   IxMenu,
   IxMenuItem,
 } from '@siemens/ix-vue';
@@ -51,10 +50,6 @@ const appSwitchConfig: AppSwitchConfiguration = {
     <IxApplicationHeader name="My Application">
       <div className="placeholder-logo" slot="logo"></div>
 
-      <IxIconButton ghost icon="checkboxes"></IxIconButton>
-      <IxIconButton ghost icon="checkboxes"></IxIconButton>
-      <IxIconButton ghost icon="checkboxes"></IxIconButton>
-
       <IxDropdownButton variant="secondary" label="Select config" ghost>
         <IxDropdownItem label="Config 1"></IxDropdownItem>
         <IxDropdownItem label="Config 2"></IxDropdownItem>
@@ -67,6 +62,7 @@ const appSwitchConfig: AppSwitchConfiguration = {
         <IxDropdownItem label="Action 3"></IxDropdownItem>
       </IxAvatar>
     </IxApplicationHeader>
+
     <IxMenu>
       <IxMenuItem>Item 1</IxMenuItem>
       <IxMenuItem>Item 2</IxMenuItem>
diff --git a/packages/vue-test-app/src/preview-examples/application-breakpoints.vue b/packages/vue-test-app/src/preview-examples/application-breakpoints.vue
index cd5f8c12668..142ecb3f796 100644
--- a/packages/vue-test-app/src/preview-examples/application-breakpoints.vue
+++ b/packages/vue-test-app/src/preview-examples/application-breakpoints.vue
@@ -17,7 +17,6 @@ import {
   IxContentHeader,
   IxDropdownButton,
   IxDropdownItem,
-  IxIconButton,
   IxMenu,
   IxMenuItem,
 } from '@siemens/ix-vue';
@@ -45,10 +44,6 @@ export default {
     <IxApplicationHeader name="My Application">
       <div className="placeholder-logo" slot="logo"></div>
 
-      <IxIconButton ghost icon="checkboxes"></IxIconButton>
-      <IxIconButton ghost icon="checkboxes"></IxIconButton>
-      <IxIconButton ghost icon="checkboxes"></IxIconButton>
-
       <IxDropdownButton variant="secondary" label="Select config" ghost>
         <IxDropdownItem label="Config 1"></IxDropdownItem>
         <IxDropdownItem label="Config 2"></IxDropdownItem>
@@ -61,6 +56,7 @@ export default {
         <IxDropdownItem label="Action 3"></IxDropdownItem>
       </IxAvatar>
     </IxApplicationHeader>
+
     <IxMenu>
       <IxMenuItem>Item 1</IxMenuItem>
       <IxMenuItem>Item 2</IxMenuItem>
diff --git a/packages/vue-test-app/src/preview-examples/application.vue b/packages/vue-test-app/src/preview-examples/application.vue
index d057a276d25..009fc9adc49 100644
--- a/packages/vue-test-app/src/preview-examples/application.vue
+++ b/packages/vue-test-app/src/preview-examples/application.vue
@@ -23,6 +23,7 @@ import {
     <IxApplicationHeader name="My Application">
       <div className="placeholder-logo" slot="logo"></div>
     </IxApplicationHeader>
+
     <IxMenu>
       <IxMenuItem>Item 1</IxMenuItem>
       <IxMenuItem>Item 2</IxMenuItem>
diff --git a/packages/vue-test-app/src/preview-examples/basic-navigation-migration.css b/packages/vue-test-app/src/preview-examples/basic-navigation-migration.css
new file mode 100644
index 00000000000..a726a2876a5
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/basic-navigation-migration.css
@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/packages/vue-test-app/src/preview-examples/basic-navigation-migration.vue b/packages/vue-test-app/src/preview-examples/basic-navigation-migration.vue
new file mode 100644
index 00000000000..63c17b506df
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/basic-navigation-migration.vue
@@ -0,0 +1,33 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 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.
+-->
+
+<script setup lang="ts">
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-vue';
+</script>
+
+<style scoped src="./basic-navigation-migration.css"></style>
+
+<template>
+  <IxApplication>
+    <!--{KEEP} Compare hideHeader property -->
+    <IxApplicationHeader name="My Application">
+      <div className="placeholder-logo" slot="logo"></div>
+    </IxApplicationHeader>
+
+    <IxMenu>
+      <IxMenuItem>Item 1</IxMenuItem>
+      <IxMenuItem>Item 2</IxMenuItem>
+    </IxMenu>
+  </IxApplication>
+</template>
diff --git a/packages/vue-test-app/src/preview-examples/map-navigation-migration.css b/packages/vue-test-app/src/preview-examples/map-navigation-migration.css
new file mode 100644
index 00000000000..c4c74416732
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/map-navigation-migration.css
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+.application {
+  height: 100vh;
+  width: 100vw;
+
+  .overlay {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
+
+  .content {
+    box-sizing: border-box;
+  }
+}
diff --git a/packages/vue-test-app/src/preview-examples/map-navigation-migration.vue b/packages/vue-test-app/src/preview-examples/map-navigation-migration.vue
new file mode 100644
index 00000000000..a4a3b88f822
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/map-navigation-migration.vue
@@ -0,0 +1,94 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 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.
+-->
+
+<script setup lang="ts">
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxButton,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxPane,
+  IxPaneLayout,
+} from '@siemens/ix-vue';
+</script>
+
+<style scoped src="./map-navigation-migration.css"></style>
+
+<script lang="ts">
+export default {
+  data(): {
+    expanded: boolean;
+  } {
+    return {
+      expanded: false,
+    };
+  },
+  methods: {
+    resetExpanded(e: Event) {
+      this.expanded = (e as CustomEvent).detail.expanded;
+    },
+  },
+};
+</script>
+
+<template>
+  <IxApplication className="application">
+    <IxApplicationHeader name="My Application">
+      <div className="placeholder-logo" slot="logo"></div>
+
+      <!--{KEEP} Compare context menu -->
+      <IxDropdownButton variant="secondary" label="Select config" ghost>
+        <IxDropdownItem label="Config 1"></IxDropdownItem>
+        <IxDropdownItem label="Config 2"></IxDropdownItem>
+        <IxDropdownItem label="Config 3"></IxDropdownItem>
+      </IxDropdownButton>
+    </IxApplicationHeader>
+
+    <IxMenu>
+      <IxMenuItem>Item 1</IxMenuItem>
+      <IxMenuItem>Item 2</IxMenuItem>
+    </IxMenu>
+
+    <!--{KEEP} Compare overlay -->
+    <IxPane
+      className="overlay"
+      composition="right"
+      heading="Custom overlay"
+      icon="bulb"
+      size="320px"
+      variant="floating"
+      hideOnCollapse
+      :expanded="expanded"
+      @expanded-changed="(e: Event) => resetExpanded(e)"
+    >
+      Overlay content
+    </IxPane>
+
+    <IxPaneLayout>
+      <!--{KEEP} Compare sidebar -->
+      <IxPane slot="left" heading="Navigation title" size="320px" expanded>
+        Sidebar content
+      </IxPane>
+
+      <IxContent className="content">
+        <IxContentHeader
+          slot="header"
+          header-title="My Content Page"
+        ></IxContentHeader>
+
+        <IxButton @click="expanded = !expanded">Open overlay</IxButton>
+      </IxContent>
+    </IxPaneLayout>
+  </IxApplication>
+</template>
diff --git a/packages/vue-test-app/src/preview-examples/map-navigation-overlay.vue b/packages/vue-test-app/src/preview-examples/map-navigation-overlay.vue
index de4d9ab1cdb..ea1cfa6854d 100644
--- a/packages/vue-test-app/src/preview-examples/map-navigation-overlay.vue
+++ b/packages/vue-test-app/src/preview-examples/map-navigation-overlay.vue
@@ -10,33 +10,62 @@
 <script setup lang="ts">
 import {
   IxButton,
+  IxContent,
+  IxContentHeader,
   IxMapNavigation,
   IxMapNavigationOverlay,
   IxMenu,
   IxMenuItem,
 } from '@siemens/ix-vue';
-import { ref } from 'vue';
+</script>
 
-const overlay = ref(false);
+<script lang="ts">
+export default {
+  data(): {
+    overlay: boolean;
+  } {
+    return {
+      overlay: false,
+    };
+  },
+  methods: {
+    showOverlay(show: boolean) {
+      this.overlay = show;
+    },
+  },
+};
 </script>
 
 <template>
-  <IxMapNavigation>
+  <IxMapNavigation
+    applicationName="My Application"
+    navigationTitle="Navigation title"
+    :hideContextMenu="false"
+  >
     <div className="placeholder-logo" slot="logo"></div>
+
     <IxMenu>
       <IxMenuItem>Item 1</IxMenuItem>
       <IxMenuItem>Item 2</IxMenuItem>
-      <IxMenuItem>Item 3</IxMenuItem>
     </IxMenu>
-    <IxButton @click="overlay = true"> Open overlay </IxButton>
-    <div>
-      <IxMapNavigationOverlay
-        name="Custom overlay title"
-        icon="bulb"
-        @close-click="overlay = false"
-      >
-        Lorem ipsum
-      </IxMapNavigationOverlay>
-    </div>
+
+    <IxContent slot="sidebar-content">Sidebar content</IxContent>
+
+    <IxContent>
+      <IxContentHeader slot="header" headerTitle="My Content Page">
+      </IxContentHeader>
+
+      <IxButton @click="() => showOverlay(true)">Open overlay</IxButton>
+    </IxContent>
+
+    <IxMapNavigationOverlay
+      v-if="overlay"
+      slot="overlay"
+      name="Custom overlay"
+      icon="bulb"
+      @close-click="() => showOverlay(false)"
+    >
+      <IxContent>Overlay content</IxContent>
+    </IxMapNavigationOverlay>
   </IxMapNavigation>
 </template>
diff --git a/packages/vue-test-app/src/preview-examples/map-navigation.vue b/packages/vue-test-app/src/preview-examples/map-navigation.vue
index 4c6c9e4c83c..68fac5a5ad0 100644
--- a/packages/vue-test-app/src/preview-examples/map-navigation.vue
+++ b/packages/vue-test-app/src/preview-examples/map-navigation.vue
@@ -8,21 +8,33 @@
 -->
 
 <script setup lang="ts">
-import { IxMapNavigation, IxMenu, IxMenuItem } from '@siemens/ix-vue';
+import {
+  IxContent,
+  IxContentHeader,
+  IxMapNavigation,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-vue';
 </script>
 
 <template>
   <IxMapNavigation
-    applicationName="Test Application"
-    navigationTitle="Some other content"
+    applicationName="My Application"
+    navigationTitle="Navigation title"
+    :hideContextMenu="false"
   >
     <div className="placeholder-logo" slot="logo"></div>
+
     <IxMenu>
       <IxMenuItem>Item 1</IxMenuItem>
       <IxMenuItem>Item 2</IxMenuItem>
-      <IxMenuItem>Item 3</IxMenuItem>
     </IxMenu>
-    <div slot="sidebar-content">Sidebar content</div>
-    <div>Content</div>
+
+    <IxContent slot="sidebar-content">Sidebar content</IxContent>
+
+    <IxContent>
+      <IxContentHeader slot="header" headerTitle="My Content Page">
+      </IxContentHeader>
+    </IxContent>
   </IxMapNavigation>
 </template>