npm - @siemens/ix-docs - Versions diffs - 0.0.0-pr-2238-20251103095443 → 0.0.0-pr-2238-20251103105018 - Mend

@siemens/ix-docs 0.0.0-pr-2238-20251103095443 → 0.0.0-pr-2238-20251103105018

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5223) hide show

package/build/docs/autogenerated/prompt/ix-dropdown-item/readme.md ADDED Viewed

@@ -0,0 +1,3069 @@
+# ix-dropdown-item
+## HTML Examples
+### Example: application-app-switch
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Application app switch example</title>
+  </head>
+  <body>
+    <ix-application>
+      <ix-application-header name="Calculator App">
+        <placeholder-logo slot="logo"></placeholder-logo>
+        <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+          <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>
+      </ix-menu>
+      <ix-content>
+        <ix-content-header slot="header" header-title="My Content Page">
+        </ix-content-header>
+      </ix-content>
+    </ix-application>
+    <script type="module">
+      const application = document.querySelector('ix-application');
+      application.appSwitchConfig = {
+        i18nAppSwitch: 'Switch to Application',
+        currentAppId: 'demo-app-2',
+        apps: [
+          {
+            id: 'demo-app-1',
+            name: 'Floor App',
+            iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+            url: 'https://ix.siemens.io/',
+            description: 'Example description for Floor app',
+            target: '_self',
+          },
+          {
+            id: 'demo-app-2',
+            name: 'Calculator App',
+            iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+            url: 'https://ix.siemens.io/',
+            description: 'Example description for Calculator app',
+            target: '_self',
+          },
+        ],
+      };
+    </script>
+    <script type="module">
+      import {
+        pulseOnElement,
+        waitForElement,
+        getElementPosition,
+      } from './utils.js';
+      pulseOnElement(() =>
+        document
+          .querySelector('ix-application-header')
+          .shadowRoot.querySelector('ix-icon-button.app-switch')
+      );
+    </script>
+    <script type="module">
+      (async () => {
+        await window.customElements.whenDefined('ix-application');
+        const menu = document.querySelector('ix-application');
+        menu.breakpoints = ['md'];
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: application-breakpoints
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Application breakpoints example</title>
+  </head>
+  <body>
+    <ix-application application-name="Application name">
+      <ix-application-header name="My Application">
+        <div class="placeholder-logo" slot="logo"></div>
+        <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+          <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>
+      </ix-menu>
+      <ix-content>
+        <ix-content-header slot="header" header-title="Choose breakpoint">
+        </ix-content-header>
+        <ix-radio-group id="radio-group" value="md">
+          <ix-radio value="sm" label="Small"></ix-radio>
+          <ix-radio value="md" label="Medium"></ix-radio>
+          <ix-radio value="lg" label="Large"></ix-radio>
+        </ix-radio-group>
+      </ix-content>
+    </ix-application>
+    <script type="module">
+      (async () => {
+        const validBreakpoints = new Set(['sm', 'md', 'lg']);
+        await globalThis.customElements.whenDefined('ix-application');
+        await globalThis.customElements.whenDefined('ix-radio-group');
+        const nav = document.querySelector('ix-application');
+        nav.breakpoints = ['md'];
+        const radioGroup = document.getElementById('radio-group');
+        radioGroup.addEventListener('valueChange', ({ detail }) => {
+          if (validBreakpoints.has(detail)) {
+            nav.breakpoints = [detail];
+          }
+        });
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: application-header
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Application header example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconCheckboxes } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconCheckboxes,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-application-header name="My Application">
+      <div class="placeholder-logo" slot="logo"></div>
+      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+      <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+        <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 username="John Doe" extra="Administrator">
+        <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+      </ix-avatar>
+    </ix-application-header>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: blind-header-actions
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Blind header actions example</title>
+    <link rel="stylesheet" href="./blind-header-actions.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconInfo, iconContextMenu } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconInfo,
+        iconContextMenu,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-blind label="Example" icon="info">
+      <ix-icon-button variant="tertiary" id="context-menu" slot="header-actions" icon="context-menu" icon-color="color-primary"></ix-icon-button>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </ix-blind>
+    <ix-dropdown trigger="context-menu">
+      <ix-dropdown-item label="Rename..." icon="rename"></ix-dropdown-item>
+      <ix-dropdown-item label="Delete" icon="trashcan"></ix-dropdown-item>
+    </ix-dropdown>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: dropdown-button-icon
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dropdown button icon example</title>
+    <link rel="stylesheet" href="./dropdown-button-icon.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconCheckboxes } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconCheckboxes,
+      });
+    </script>
+  </head>
+  <body>
+    <div class="dropdown-button">
+      <ix-dropdown-button label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="subtle-primary" label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="tertiary" label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button label="" disabled icon="checkboxes">
+      </ix-dropdown-button>
+    </div>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: dropdown-button
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dropdown button example</title>
+    <link rel="stylesheet" href="./dropdown-button.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconCheckboxes } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconCheckboxes,
+      });
+    </script>
+  </head>
+  <body>
+    <div class="dropdown-button">
+      <ix-dropdown-button label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="subtle-primary" label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="tertiary" label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button label="Dropdown" disabled icon="checkboxes">
+      </ix-dropdown-button>
+    </div>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: dropdown-icon
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dropdown icon example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import {
+        iconStar,
+        iconBulb,
+        iconDocument,
+      } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconStar,
+        iconBulb,
+        iconDocument,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-button id="iconTriggerId">Open</ix-button>
+    <ix-dropdown trigger="iconTriggerId">
+      <ix-dropdown-item label="Item 1" icon="star"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" icon="document"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3" icon="bulb"></ix-dropdown-item>
+    </ix-dropdown>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: dropdown-quick-actions
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dropdown quick actions example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import {
+        iconCut,
+        iconBulb,
+        iconTrashcan,
+        iconStar,
+        iconDocument,
+      } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconCut,
+        iconBulb,
+        iconTrashcan,
+        iconStar,
+        iconDocument,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-button id="iconTriggerId">Open</ix-button>
+    <ix-dropdown trigger="iconTriggerId">
+      <ix-dropdown-quick-actions>
+        <ix-icon-button variant="tertiary" icon="cut"></ix-icon-button>
+        <ix-icon-button variant="tertiary" icon="bulb"></ix-icon-button>
+        <ix-icon-button variant="tertiary" icon="trashcan"></ix-icon-button>
+      </ix-dropdown-quick-actions>
+      <ix-divider></ix-divider>
+      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
+    </ix-dropdown>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: dropdown-submenu
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dropdown submenu example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import {
+        iconStar,
+        iconDocument,
+        iconBulb,
+      } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconStar,
+        iconDocument,
+        iconBulb,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-button id="iconTriggerId">Open</ix-button>
+    <ix-dropdown trigger="iconTriggerId">
+      <ix-dropdown-item id="submenuTrigger" label="Submenu"></ix-dropdown-item>
+      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
+    </ix-dropdown>
+    <ix-dropdown trigger="submenuTrigger" placement="right-start">
+      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+    </ix-dropdown>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: dropdown
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dropdown example</title>
+  </head>
+  <body>
+    <ix-button id="triggerId">Open</ix-button>
+    <ix-dropdown trigger="triggerId">
+      <ix-dropdown-header label="Category"></ix-dropdown-header>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 4"></ix-dropdown-item>
+      <ix-divider></ix-divider>
+      <ix-dropdown-item label="Item 5"></ix-dropdown-item>
+    </ix-dropdown>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: group-context-menu
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Group context menu example</title>
+  </head>
+  <body>
+    <ix-group header="Header text" sub-header="Subheader text">
+      <ix-dropdown slot="dropdown">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown>
+      <ix-group-item text="Example text 1"></ix-group-item>
+      <ix-group-item text="Example text 2"></ix-group-item>
+      <ix-group-item text="Example text 3"></ix-group-item>
+    </ix-group>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: map-navigation-migration
+```html
+<!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" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconBulb } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconBulb,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-application class="application">
+      <ix-application-header name="My Application">
+        <div class="placeholder-logo" slot="logo"></div>
+        <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+          <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>
+      <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>
+        <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>
+```
+### Example: split-button-icons
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Split button icons example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import {
+        iconDocument,
+        iconChevronDownSmall,
+        iconCut,
+        iconBulb,
+      } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconDocument,
+        iconChevronDownSmall,
+        iconCut,
+        iconBulb,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-split-button icon="document" split-icon="chevron-down-small">
+      <ix-dropdown-item icon="cut"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb"></ix-dropdown-item>
+    </ix-split-button>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: split-button
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Split button example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconChevronDownSmall } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconChevronDownSmall,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-split-button label="Action text" split-icon="chevron-down-small">
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+    </ix-split-button>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+## React Examples
+### Example: application-app-switch
+```tsx
+import { AppSwitchConfiguration } from '@siemens/ix';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-react';
+const appSwitchConfig: AppSwitchConfiguration = {
+  i18nAppSwitch: 'Switch to Application',
+  currentAppId: 'demo-app-2',
+  apps: [
+    {
+      id: 'demo-app-1',
+      name: 'Floor App',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: 'Example description for Floor app',
+      target: '_self',
+    },
+    {
+      id: 'demo-app-2',
+      name: 'Calculator App',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: 'Example description for Calculator app',
+      target: '_self',
+    },
+  ],
+};
+export default () => {
+  return (
+    <IxApplication appSwitchConfig={appSwitchConfig}>
+      <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo" slot="logo"></div>
+        <IxDropdownButton variant="subtle-tertiary" label="Select config">
+          <IxDropdownItem label="Config 1"></IxDropdownItem>
+          <IxDropdownItem label="Config 2"></IxDropdownItem>
+          <IxDropdownItem label="Config 3"></IxDropdownItem>
+        </IxDropdownButton>
+        <IxAvatar>
+          <IxDropdownItem label="Action 1"></IxDropdownItem>
+          <IxDropdownItem label="Action 2"></IxDropdownItem>
+          <IxDropdownItem label="Action 3"></IxDropdownItem>
+        </IxAvatar>
+      </IxApplicationHeader>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+      <IxContent>
+        <IxContentHeader
+          slot="header"
+          headerTitle="My Content Page"
+        ></IxContentHeader>
+      </IxContent>
+    </IxApplication>
+  );
+};
+```
+### Example: application-breakpoints
+```tsx
+import { Breakpoint } from '@siemens/ix';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxRadio,
+  IxRadioGroup,
+} from '@siemens/ix-react';
+import { useState } from 'react';
+const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
+export default () => {
+  const [breakpoints, setBreakpoints] = useState<Breakpoint[]>(['md']);
+  const handleBreakpointChange = (event: CustomEvent<string>) => {
+    const value = event.detail;
+    if (validBreakpoints.has(value as Breakpoint)) {
+      setBreakpoints([value as Breakpoint]);
+    }
+  };
+  return (
+    <IxApplication breakpoints={breakpoints}>
+      <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo" slot="logo"></div>
+        <IxDropdownButton variant="subtle-tertiary" label="Select config">
+          <IxDropdownItem label="Config 1"></IxDropdownItem>
+          <IxDropdownItem label="Config 2"></IxDropdownItem>
+          <IxDropdownItem label="Config 3"></IxDropdownItem>
+        </IxDropdownButton>
+        <IxAvatar>
+          <IxDropdownItem label="Action 1"></IxDropdownItem>
+          <IxDropdownItem label="Action 2"></IxDropdownItem>
+          <IxDropdownItem label="Action 3"></IxDropdownItem>
+        </IxAvatar>
+      </IxApplicationHeader>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+      <IxContent>
+        <IxContentHeader
+          slot="header"
+          headerTitle="Choose breakpoint"
+        ></IxContentHeader>
+        <IxRadioGroup
+          value={breakpoints[0]}
+          onValueChange={handleBreakpointChange}
+        >
+          <IxRadio value="sm" label="Small"></IxRadio>
+          <IxRadio value="md" label="Medium"></IxRadio>
+          <IxRadio value="lg" label="Large"></IxRadio>
+        </IxRadioGroup>
+      </IxContent>
+    </IxApplication>
+  );
+};
+```
+### Example: application-header
+```tsx
+import { iconCheckboxes } from '@siemens/ix-icons/icons';
+import {
+  IxApplicationHeader,
+  IxAvatar,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxIconButton,
+} from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxApplicationHeader name="My Application">
+      <div className="placeholder-logo" slot="logo"></div>
+      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
+      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
+      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
+      <IxDropdownButton variant="subtle-tertiary" label="Select config">
+        <IxDropdownItem label="Config 1"></IxDropdownItem>
+        <IxDropdownItem label="Config 2"></IxDropdownItem>
+        <IxDropdownItem label="Config 3"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxAvatar username="John Doe" extra="Administrator">
+        <IxDropdownItem label="Action 1"></IxDropdownItem>
+        <IxDropdownItem label="Action 2"></IxDropdownItem>
+      </IxAvatar>
+    </IxApplicationHeader>
+  );
+};
+```
+### Example: blind-header-actions
+```tsx
+import {
+  iconContextMenu,
+  iconInfo,
+  iconRename,
+  iconTrashcan,
+} from '@siemens/ix-icons/icons';
+import './blind-header-actions.scoped.css';
+import {
+  IxBlind,
+  IxDropdown,
+  IxDropdownItem,
+  IxIconButton,
+} from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxBlind label="Example" icon={iconInfo}>
+        <IxIconButton variant="tertiary" id="context-menu" slot="header-actions" icon={iconContextMenu} iconColor="color-primary"></IxIconButton>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+        ipsum dolor sit amet.
+      </IxBlind>
+      <IxDropdown trigger={'context-menu'}>
+        <IxDropdownItem icon={iconRename}>Rename...</IxDropdownItem>
+        <IxDropdownItem icon={iconTrashcan}>Delete</IxDropdownItem>
+      </IxDropdown>
+    </>
+  );
+};
+```
+### Example: dropdown-button-icon
+```tsx
+import { iconCheckboxes } from '@siemens/ix-icons/icons';
+import './dropdown-button-icon.scoped.css';
+import { IxDropdownButton, IxDropdownItem } from '@siemens/ix-react';
+export default () => {
+  return (
+    <div className="dropdown-button">
+      <IxDropdownButton label="" icon={iconCheckboxes}>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxDropdownButton variant="subtle-primary" label="" icon={iconCheckboxes}>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxDropdownButton variant="tertiary" label="" icon={iconCheckboxes}>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxDropdownButton
+        label=""
+        disabled
+        icon={iconCheckboxes}
+      ></IxDropdownButton>
+    </div>
+  );
+};
+```
+### Example: dropdown-button
+```tsx
+import { iconCheckboxes } from '@siemens/ix-icons/icons';
+import './dropdown-button.scoped.css';
+import { IxDropdownButton, IxDropdownItem } from '@siemens/ix-react';
+export default () => {
+  return (
+    <div className="dropdown-button">
+      <IxDropdownButton label="Dropdown" icon={iconCheckboxes}>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxDropdownButton variant="subtle-primary" label="Dropdown" icon={iconCheckboxes}>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxDropdownButton variant="tertiary" label="Dropdown" icon={iconCheckboxes}>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxDropdownButton
+        label="Dropdown"
+        disabled
+        icon={iconCheckboxes}
+      ></IxDropdownButton>
+    </div>
+  );
+};
+```
+### Example: dropdown-icon
+```tsx
+import { iconBulb, iconDocument, iconStar } from '@siemens/ix-icons/icons';
+import { IxButton, IxDropdown, IxDropdownItem } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton id="triggerId">Open</IxButton>
+      <IxDropdown trigger="triggerId">
+        <IxDropdownItem label="Item 1" icon={iconStar}></IxDropdownItem>
+        <IxDropdownItem label="Item 2" icon={iconDocument}></IxDropdownItem>
+        <IxDropdownItem label="Item 3" icon={iconBulb}></IxDropdownItem>
+      </IxDropdown>
+    </>
+  );
+};
+```
+### Example: dropdown-quick-actions
+```tsx
+import {
+  iconBulb,
+  iconCut,
+  iconDocument,
+  iconStar,
+  iconTrashcan,
+} from '@siemens/ix-icons/icons';
+import {
+  IxButton,
+  IxDivider,
+  IxDropdown,
+  IxDropdownItem,
+  IxDropdownQuickActions,
+  IxIconButton,
+} from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton id="iconTriggerId">Open</IxButton>
+      <IxDropdown trigger="iconTriggerId">
+        <IxDropdownQuickActions>
+          <IxIconButton variant="tertiary" icon={iconCut}></IxIconButton>
+          <IxIconButton variant="tertiary" icon={iconBulb}></IxIconButton>
+          <IxIconButton variant="tertiary" icon={iconTrashcan}></IxIconButton>
+        </IxDropdownQuickActions>
+        <IxDivider></IxDivider>
+        <IxDropdownItem icon={iconStar} label="Item 1"></IxDropdownItem>
+        <IxDropdownItem icon={iconDocument} label="Item 2"></IxDropdownItem>
+        <IxDropdownItem icon={iconBulb} label="Item 3"></IxDropdownItem>
+      </IxDropdown>
+    </>
+  );
+};
+```
+### Example: dropdown-submenu
+```tsx
+import { iconBulb, iconDocument, iconStar } from '@siemens/ix-icons/icons';
+import { IxButton, IxDropdown, IxDropdownItem } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton id="iconTriggerId">Open</IxButton>
+      <IxDropdown trigger="iconTriggerId">
+        <IxDropdownItem id="submenuTrigger" label="Submenu"></IxDropdownItem>
+        <IxDropdownItem icon={iconStar} label="Item 1"></IxDropdownItem>
+        <IxDropdownItem icon={iconDocument} label="Item 2"></IxDropdownItem>
+        <IxDropdownItem icon={iconBulb} label="Item 3"></IxDropdownItem>
+      </IxDropdown>
+      <IxDropdown trigger="submenuTrigger" placement="right-start">
+        <IxDropdownItem icon={iconStar} label="Item 1"></IxDropdownItem>
+        <IxDropdownItem icon={iconDocument} label="Item 2"></IxDropdownItem>
+      </IxDropdown>
+    </>
+  );
+};
+```
+### Example: dropdown
+```tsx
+import {
+  IxButton,
+  IxDivider,
+  IxDropdown,
+  IxDropdownHeader,
+  IxDropdownItem,
+} from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton id="triggerId">Open</IxButton>
+      <IxDropdown trigger="triggerId">
+        <IxDropdownHeader label="Category"></IxDropdownHeader>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+        <IxDropdownItem label="Item 3"></IxDropdownItem>
+        <IxDropdownItem label="Item 4"></IxDropdownItem>
+        <IxDivider></IxDivider>
+        <IxDropdownItem label="Item 5"></IxDropdownItem>
+      </IxDropdown>
+    </>
+  );
+};
+```
+### Example: group-context-menu
+```tsx
+import {
+  IxDropdown,
+  IxDropdownItem,
+  IxGroup,
+  IxGroupItem,
+} from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxGroup header="Header text" subHeader="Subheader text">
+      <IxDropdown slot="dropdown">
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxDropdown>
+      <IxGroupItem text="Example text 1"></IxGroupItem>
+      <IxGroupItem text="Example text 2"></IxGroupItem>
+      <IxGroupItem text="Example text 3"></IxGroupItem>
+    </IxGroup>
+  );
+};
+```
+### Example: map-navigation-migration
+```tsx
+import { iconBulb } from '@siemens/ix-icons/icons';
+import './map-navigation-migration.scoped.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>
+        {}
+        <IxDropdownButton variant="subtle-tertiary" label="Select config">
+          <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>
+      {}
+      <IxPane
+        className="overlay"
+        composition="right"
+        heading="Custom overlay"
+        icon={iconBulb}
+        size="320px"
+        variant="floating"
+        hideOnCollapse
+        expanded={expanded}
+        onExpandedChanged={(e) => resetExpanded(e.detail.expanded)}
+      >
+        Overlay content
+      </IxPane>
+      <IxPaneLayout>
+        {}
+        <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>
+  );
+};
+```
+### Example: split-button-icons
+```tsx
+import {
+  iconBulb,
+  iconChevronDownSmall,
+  iconCut,
+} from '@siemens/ix-icons/icons';
+import { IxDropdownItem, IxSplitButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall}>
+      <IxDropdownItem label="Item 1" icon={iconCut}></IxDropdownItem>
+      <IxDropdownItem label="Item 2" icon={iconBulb}></IxDropdownItem>
+    </IxSplitButton>
+  );
+};
+```
+### Example: split-button
+```tsx
+import { iconChevronDownSmall } from '@siemens/ix-icons/icons';
+import { IxDropdownItem, IxSplitButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall}>
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+  );
+};
+```
+## Vue Examples
+### Example: application-app-switch
+```tsx
+<script setup lang="ts">
+import { AppSwitchConfiguration } from '@siemens/ix';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-vue';
+const appSwitchConfig: AppSwitchConfiguration = {
+  i18nAppSwitch: 'Switch to Application',
+  currentAppId: 'demo-app-2',
+  apps: [
+    {
+      id: 'demo-app-1',
+      name: 'Floor App',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: 'Example description for Floor app',
+      target: '_self',
+    },
+    {
+      id: 'demo-app-2',
+      name: 'Calculator App',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: 'Example description for Calculator app',
+      target: '_self',
+    },
+  ],
+};
+</script>
+<template>
+  <IxApplication :appSwitchConfig="appSwitchConfig">
+    <IxApplicationHeader name="My Application">
+      <div className="placeholder-logo" slot="logo"></div>
+      <IxDropdownButton variant="subtle-tertiary" label="Select config">
+        <IxDropdownItem label="Config 1"></IxDropdownItem>
+        <IxDropdownItem label="Config 2"></IxDropdownItem>
+        <IxDropdownItem label="Config 3"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxAvatar>
+        <IxDropdownItem label="Action 1"></IxDropdownItem>
+        <IxDropdownItem label="Action 2"></IxDropdownItem>
+        <IxDropdownItem label="Action 3"></IxDropdownItem>
+      </IxAvatar>
+    </IxApplicationHeader>
+    <IxMenu>
+      <IxMenuItem>Item 1</IxMenuItem>
+      <IxMenuItem>Item 2</IxMenuItem>
+    </IxMenu>
+    <IxContent>
+      <IxContentHeader
+        slot="header"
+        header-title="My Content Page"
+      ></IxContentHeader>
+    </IxContent>
+  </IxApplication>
+</template>
+```
+### Example: application-breakpoints
+```tsx
+<script setup lang="ts">
+import type { Breakpoint } from '@siemens/ix';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxRadio,
+  IxRadioGroup,
+} from '@siemens/ix-vue';
+</script>
+<script lang="ts">
+const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
+export default {
+  data(): {
+    breakpoints: Breakpoint[];
+  } {
+    return {
+      breakpoints: ['md'],
+    };
+  },
+  methods: {
+    setBreakpoint(value: Breakpoint) {
+      if (validBreakpoints.has(value)) {
+        this.breakpoints = [value];
+      }
+    },
+  },
+};
+</script>
+<template>
+  <IxApplication :breakpoints="breakpoints">
+    <IxApplicationHeader name="My Application">
+      <div className="placeholder-logo" slot="logo"></div>
+      <IxDropdownButton variant="subtle-tertiary" label="Select config">
+        <IxDropdownItem label="Config 1"></IxDropdownItem>
+        <IxDropdownItem label="Config 2"></IxDropdownItem>
+        <IxDropdownItem label="Config 3"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxAvatar>
+        <IxDropdownItem label="Action 1"></IxDropdownItem>
+        <IxDropdownItem label="Action 2"></IxDropdownItem>
+        <IxDropdownItem label="Action 3"></IxDropdownItem>
+      </IxAvatar>
+    </IxApplicationHeader>
+    <IxMenu>
+      <IxMenuItem>Item 1</IxMenuItem>
+      <IxMenuItem>Item 2</IxMenuItem>
+    </IxMenu>
+    <IxContent>
+      <IxContentHeader
+        slot="header"
+        header-title="Choose breakpoint"
+      ></IxContentHeader>
+      <IxRadioGroup :value="breakpoints[0]">
+        <IxRadio
+          value="sm"
+          label="Small"
+          @click="setBreakpoint('sm')"
+        ></IxRadio>
+        <IxRadio
+          value="md"
+          label="Medium"
+          @click="setBreakpoint('md')"
+        ></IxRadio>
+        <IxRadio
+          value="lg"
+          label="Large"
+          @click="setBreakpoint('lg')"
+        ></IxRadio>
+      </IxRadioGroup>
+    </IxContent>
+  </IxApplication>
+</template>
+```
+### Example: application-header
+```tsx
+<script setup lang="ts">
+import {
+  IxApplicationHeader,
+  IxAvatar,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxIconButton,
+} from '@siemens/ix-vue';
+import { iconCheckboxes } from '@siemens/ix-icons/icons';
+</script>
+<template>
+  <IxApplicationHeader name="My Application">
+    <div className="placeholder-logo" slot="logo"></div>
+    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
+    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
+    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
+    <IxDropdownButton variant="subtle-tertiary" label="Select config">
+      <IxDropdownItem label="Config 1"></IxDropdownItem>
+      <IxDropdownItem label="Config 2"></IxDropdownItem>
+      <IxDropdownItem label="Config 3"></IxDropdownItem>
+    </IxDropdownButton>
+    <IxAvatar username="John Doe" extra="Administrator">
+      <IxDropdownItem label="Action 1"></IxDropdownItem>
+      <IxDropdownItem label="Action 2"></IxDropdownItem>
+    </IxAvatar>
+  </IxApplicationHeader>
+</template>
+```
+### Example: blind-header-actions
+```tsx
+<script setup lang="ts">
+import {
+  iconContextMenu,
+  iconInfo,
+  iconRename,
+  iconTrashcan,
+} from '@siemens/ix-icons/icons';
+import { IxBlind, IxDropdown, IxIconButton } from '@siemens/ix-vue';
+</script>
+<style scoped src="./blind-header-actions.css"></style>
+<template>
+  <IxBlind label="Example" :icon="iconInfo">
+    <IxIconButton variant="tertiary" id="context-menu" slot="header-actions" :icon="iconContextMenu" iconColor="color-primary"></IxIconButton>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet.
+  </IxBlind>
+  <IxDropdown trigger="context-menu">
+    <IxDropdownItem label="Rename..." :icon="iconRename"></IxDropdownItem>
+    <IxDropdownItem label="trashcan" :icon="iconTrashcan"></IxDropdownItem>
+  </IxDropdown>
+</template>
+```
+### Example: dropdown-button-icon
+```tsx
+<script setup lang="ts">
+import { iconCheckboxes } from '@siemens/ix-icons/icons';
+import { IxDropdownButton } from '@siemens/ix-vue';
+</script>
+<style scoped src="./dropdown-button-icon.css"></style>
+<template>
+  <div class="dropdown-button">
+    <IxDropdownButton label="" :icon="iconCheckboxes">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdownButton>
+    <IxDropdownButton variant="subtle-primary" label="" :icon="iconCheckboxes">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdownButton>
+    <IxDropdownButton variant="tertiary" label="" :icon="iconCheckboxes">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdownButton>
+    <IxDropdownButton label="" disabled :icon="iconCheckboxes">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdownButton>
+  </div>
+</template>
+```
+### Example: dropdown-button
+```tsx
+<script setup lang="ts">
+import { iconCheckboxes } from '@siemens/ix-icons/icons';
+import { IxDropdownButton } from '@siemens/ix-vue';
+</script>
+<style scoped src="./dropdown-button.css"></style>
+<template>
+  <div class="dropdown-button">
+    <IxDropdownButton label="Dropdown" :icon="iconCheckboxes">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdownButton>
+    <IxDropdownButton variant="subtle-primary" label="Dropdown" :icon="iconCheckboxes">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdownButton>
+    <IxDropdownButton variant="tertiary" label="Dropdown" :icon="iconCheckboxes">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdownButton>
+    <IxDropdownButton label="Dropdown" disabled :icon="iconCheckboxes">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdownButton>
+  </div>
+</template>
+```
+### Example: dropdown-icon
+```tsx
+<script setup lang="ts">
+import { iconBulb, iconDocument, iconStar } from '@siemens/ix-icons/icons';
+import { IxButton, IxDropdown, IxDropdownItem } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxButton id="triggerId">Open</IxButton>
+  <IxDropdown trigger="triggerId">
+    <IxDropdownItem label="Item 1" :icon="iconStar"></IxDropdownItem>
+    <IxDropdownItem label="Item 2" :icon="iconDocument"></IxDropdownItem>
+    <IxDropdownItem label="Item 3" :icon="iconBulb"></IxDropdownItem>
+  </IxDropdown>
+</template>
+```
+### Example: dropdown-quick-actions
+```tsx
+<script setup lang="ts">
+import {
+  iconBulb,
+  iconCut,
+  iconDocument,
+  iconStar,
+  iconTrashcan,
+} from '@siemens/ix-icons/icons';
+import {
+  IxButton,
+  IxDivider,
+  IxDropdown,
+  IxDropdownItem,
+  IxDropdownQuickActions,
+  IxIconButton,
+} from '@siemens/ix-vue';
+</script>
+<template>
+  <div>
+    <IxButton id="iconTriggerId">Open</IxButton>
+    <IxDropdown trigger="iconTriggerId">
+      <IxDropdownQuickActions>
+        <IxIconButton variant="tertiary" :icon="iconCut"></IxIconButton>
+        <IxIconButton variant="tertiary" :icon="iconBulb"></IxIconButton>
+        <IxIconButton variant="tertiary" :icon="iconTrashcan"></IxIconButton>
+      </IxDropdownQuickActions>
+      <IxDivider></IxDivider>
+      <IxDropdownItem :icon="iconStar" label="Item 1"></IxDropdownItem>
+      <IxDropdownItem :icon="iconDocument" label="Item 2"></IxDropdownItem>
+      <IxDropdownItem :icon="iconBulb" label="Item 3"></IxDropdownItem>
+    </IxDropdown>
+  </div>
+</template>
+```
+### Example: dropdown-submenu
+```tsx
+<script setup lang="ts">
+import { iconBulb, iconDocument, iconStar } from '@siemens/ix-icons/icons';
+import { IxButton, IxDropdown, IxDropdownItem } from '@siemens/ix-vue';
+</script>
+<template>
+  <div>
+    <IxButton id="iconTriggerId">Open</IxButton>
+    <IxDropdown trigger="iconTriggerId">
+      <IxDropdownItem id="submenuTrigger" label="Submenu"></IxDropdownItem>
+      <IxDropdownItem :icon="iconStar" label="Item 1"></IxDropdownItem>
+      <IxDropdownItem :icon="iconDocument" label="Item 2"></IxDropdownItem>
+      <IxDropdownItem :icon="iconBulb" label="Item 3"></IxDropdownItem>
+    </IxDropdown>
+    <IxDropdown trigger="submenuTrigger" placement="right-start">
+      <IxDropdownItem :icon="iconStar" label="Item 1"></IxDropdownItem>
+      <IxDropdownItem :icon="iconDocument" label="Item 2"></IxDropdownItem>
+    </IxDropdown>
+  </div>
+</template>
+```
+### Example: dropdown
+```tsx
+<script setup lang="ts">
+import {
+  IxButton,
+  IxDivider,
+  IxDropdown,
+  IxDropdownHeader,
+  IxDropdownItem,
+} from '@siemens/ix-vue';
+</script>
+<template>
+  <IxButton id="triggerId">Open</IxButton>
+  <IxDropdown trigger="triggerId">
+    <IxDropdownHeader label="Category"></IxDropdownHeader>
+    <IxDropdownItem label="Item 2"></IxDropdownItem>
+    <IxDropdownItem label="Item 3"></IxDropdownItem>
+    <IxDropdownItem label="Item 4"></IxDropdownItem>
+    <IxDivider></IxDivider>
+    <IxDropdownItem label="Item 5"></IxDropdownItem>
+  </IxDropdown>
+</template>
+```
+### Example: group-context-menu
+```tsx
+<script setup lang="ts">
+import {
+  IxDropdown,
+  IxDropdownItem,
+  IxGroup,
+  IxGroupItem,
+} from '@siemens/ix-vue';
+</script>
+<template>
+  <IxGroup header="Header text" subHeader="Subheader text">
+    <IxDropdown slot="dropdown">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxDropdown>
+    <IxGroupItem text="Example text 1"></IxGroupItem>
+    <IxGroupItem text="Example text 2"></IxGroupItem>
+    <IxGroupItem text="Example text 3"></IxGroupItem>
+  </IxGroup>
+</template>
+```
+### Example: map-navigation-migration
+```tsx
+<script setup lang="ts">
+import { iconBulb } from '@siemens/ix-icons/icons';
+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>
+      <IxDropdownButton variant="subtle-tertiary" label="Select config">
+        <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>
+    <IxPane
+      className="overlay"
+      composition="right"
+      heading="Custom overlay"
+      :icon="iconBulb"
+      size="320px"
+      variant="floating"
+      hideOnCollapse
+      :expanded="expanded"
+      @expanded-changed="(e: Event) => resetExpanded(e)"
+    >
+      Overlay content
+    </IxPane>
+    <IxPaneLayout>
+      <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>
+```
+### Example: split-button-icons
+```tsx
+<script setup lang="ts">
+import {
+  iconBulb,
+  iconChevronDownSmall,
+  iconCut,
+} from '@siemens/ix-icons/icons';
+import { IxSplitButton, IxDropdownItem } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall">
+    <IxDropdownItem label="Item 1" :icon="iconCut"></IxDropdownItem>
+    <IxDropdownItem label="Item 2" :icon="iconBulb"></IxDropdownItem>
+  </IxSplitButton>
+</template>
+```
+### Example: split-button
+```tsx
+<script setup lang="ts">
+import { iconChevronDownSmall } from '@siemens/ix-icons/icons';
+import { IxSplitButton, IxDropdownItem } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall">
+    <IxDropdownItem label="Item 1"></IxDropdownItem>
+    <IxDropdownItem label="Item 2"></IxDropdownItem>
+  </IxSplitButton>
+</template>
+```
+## Angular Examples
+### Example: application-app-switch
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { AppSwitchConfiguration } from '@siemens/ix';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './application-app-switch.html',
+})
+export default class ApplicationAppSwitchExample {
+  appSwitchConfig: AppSwitchConfiguration = {
+    i18nAppSwitch: 'Switch to Application',
+    currentAppId: 'demo-app-2',
+    apps: [
+      {
+        id: 'demo-app-1',
+        name: 'Floor App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for Floor app',
+        target: '_self',
+      },
+      {
+        id: 'demo-app-2',
+        name: 'Calculator App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for Calculator app',
+        target: '_self',
+      },
+    ],
+  };
+}
+```
+#### Component template
+```html
+<!--
+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 [appSwitchConfig]="appSwitchConfig">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <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>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="My Content Page">
+    </ix-content-header>
+  </ix-content>
+</ix-application>
+```
+### Example: application-breakpoints
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { Breakpoint } from '@siemens/ix';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './application-breakpoints.html',
+})
+export default class ApplicationBreakpointExample {
+  breakpoints: Breakpoint[] = ['md'];
+  private readonly validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
+  onCheckedChange(value: string) {
+    const breakpoint = value as Breakpoint;
+    if (this.validBreakpoints.has(breakpoint)) {
+      this.breakpoints = [breakpoint];
+    }
+  }
+}
+```
+#### Component template
+```html
+<!--
+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 application-name="Application name" [breakpoints]="breakpoints">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <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>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="Choose breakpoint">
+    </ix-content-header>
+    <ix-radio-group
+      [value]="breakpoints[0]"
+      (valueChange)="onCheckedChange($event.detail)"
+    >
+      <ix-radio value="sm" label="Small"></ix-radio>
+      <ix-radio value="md" label="Medium"></ix-radio>
+      <ix-radio value="lg" label="Large"></ix-radio>
+    </ix-radio-group>
+  </ix-content>
+</ix-application>
+```
+### Example: application-header
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './application-header.html',
+})
+export default class ApplicationHeaderExample {}
+```
+#### Component template
+```html
+<ix-application-header name="My Application">
+  <div class="placeholder-logo" slot="logo"></div>
+  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+  <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+    <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 username="John Doe" extra="Administrator">
+    <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+    <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+  </ix-avatar>
+</ix-application-header>
+```
+### Example: blind-header-actions
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <ix-blind label="Example" icon="info">
+      <ix-icon-button variant="tertiary" id="context-menu" slot="header-actions" icon="context-menu" icon-color="color-primary"></ix-icon-button>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </ix-blind>
+    <ix-dropdown trigger="context-menu">
+      <ix-dropdown-item icon="rename">Rename...</ix-dropdown-item>
+      <ix-dropdown-item icon="trashcan">Delete...</ix-dropdown-item>
+    </ix-dropdown>
+  `,
+  styleUrls: ['./blind-header-actions.css'],
+})
+export default class Blind {}
+```
+### Example: dropdown-button-icon
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  styleUrls: ['./dropdown-button-icon.css'],
+  template: `
+    <div class="dropdown-button">
+      <ix-dropdown-button label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="subtle-primary" label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="tertiary" label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button label="" disabled icon="checkboxes">
+      </ix-dropdown-button>
+    </div>
+  `,
+})
+export default class Dropdown {}
+```
+### Example: dropdown-button
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <div class="example">
+      <ix-dropdown-button label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="subtle-primary" label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="tertiary" label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button label="Dropdown" disabled icon="checkboxes">
+      </ix-dropdown-button>
+    </div>
+  `,
+  styleUrls: ['./dropdown-button.css'],
+})
+export default class Dropdown {}
+```
+### Example: dropdown-icon
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <ix-button id="iconTriggerId">Open</ix-button>
+    <ix-dropdown trigger="iconTriggerId">
+      <ix-dropdown-item label="Item 1" icon="star"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" icon="document"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3" icon="bulb"></ix-dropdown-item>
+    </ix-dropdown>
+  `,
+})
+export default class DropdownIcon {}
+```
+### Example: dropdown-quick-actions
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './dropdown-quick-actions.html',
+})
+export default class DropdownQuickActions {}
+```
+#### Component template
+```html
+<!--
+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-button #trigger>Open</ix-button>
+<ix-dropdown [ixDropdownTrigger]="trigger">
+  <ix-dropdown-quick-actions>
+    <ix-icon-button variant="tertiary" icon="cut"></ix-icon-button>
+    <ix-icon-button variant="tertiary" icon="bulb"></ix-icon-button>
+    <ix-icon-button variant="tertiary" icon="trashcan"></ix-icon-button>
+  </ix-dropdown-quick-actions>
+  <ix-divider></ix-divider>
+  <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+  <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+  <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
+</ix-dropdown>
+```
+### Example: dropdown-submenu
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <ix-button #trigger>Open</ix-button>
+    <ix-dropdown [ixDropdownTrigger]="trigger">
+      <ix-dropdown-item #submenu label="Submenu"></ix-dropdown-item>
+      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
+    </ix-dropdown>
+    <ix-dropdown [ixDropdownTrigger]="submenu" placement="right-start">
+      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+    </ix-dropdown>
+  `,
+})
+export default class DropdownSubmenu {}
+```
+### Example: dropdown
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <ix-button #trigger>Open</ix-button>
+    <ix-dropdown [ixDropdownTrigger]="trigger">
+      <ix-dropdown-header label="Category"></ix-dropdown-header>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 4"></ix-dropdown-item>
+      <ix-divider></ix-divider>
+      <ix-dropdown-item label="Item 5"></ix-dropdown-item>
+    </ix-dropdown>
+  `,
+})
+export default class Dropdown {}
+```
+### Example: group-context-menu
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <ix-group header="Header text" sub-header="Subheader text">
+      <ix-dropdown slot="dropdown">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown>
+      <ix-group-item text="Example text 1"></ix-group-item>
+      <ix-group-item text="Example text 2"></ix-group-item>
+      <ix-group-item text="Example text 3"></ix-group-item>
+    </ix-group>
+  `,
+})
+export default class GroupContextMenu {}
+```
+### Example: map-navigation-migration
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  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;
+  }
+}
+```
+#### Component template
+```html
+<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="subtle-tertiary" label="Select config">
+      <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>
+```
+### Example: split-button-icons
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <ix-split-button icon="document" splitIcon="chevron-down-small">
+      <ix-dropdown-item icon="cut"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb"></ix-dropdown-item>
+    </ix-split-button>
+  `,
+})
+export default class SplitButtonIcons {}
+```
+### Example: split-button
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <ix-split-button label="Action text" splitIcon="chevron-down-small">
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+    </ix-split-button>
+  `,
+})
+export default class SplitButton {}
+```
+## Angular Standalone Examples
+### Example: application-app-switch
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxAvatar,
+  IxMenu,
+  IxMenuItem,
+  IxContent,
+  IxContentHeader,
+} from '@siemens/ix-angular/standalone';
+import { AppSwitchConfiguration } from '@siemens/ix';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxDropdownButton,
+    IxDropdownItem,
+    IxAvatar,
+    IxMenu,
+    IxMenuItem,
+    IxContent,
+    IxContentHeader,
+  ],
+  templateUrl: './application-app-switch.html',
+})
+export default class ApplicationAppSwitchExample {
+  appSwitchConfig: AppSwitchConfiguration = {
+    i18nAppSwitch: 'Switch to Application',
+    currentAppId: 'demo-app-2',
+    apps: [
+      {
+        id: 'demo-app-1',
+        name: 'Floor App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for Floor app',
+        target: '_self',
+      },
+      {
+        id: 'demo-app-2',
+        name: 'Calculator App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for Calculator app',
+        target: '_self',
+      },
+    ],
+  };
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 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 [appSwitchConfig]="appSwitchConfig">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <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>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="My Content Page">
+    </ix-content-header>
+  </ix-content>
+</ix-application>
+```
+### Example: application-breakpoints
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxRadio,
+  IxRadioGroup,
+} from '@siemens/ix-angular/standalone';
+import { Breakpoint } from '@siemens/ix';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxDropdownButton,
+    IxDropdownItem,
+    IxAvatar,
+    IxMenu,
+    IxMenuItem,
+    IxContent,
+    IxContentHeader,
+    IxRadioGroup,
+    IxRadio,
+  ],
+  templateUrl: './application-breakpoints.html',
+})
+export default class ApplicationBreakpointExample {
+  breakpoints: Breakpoint[] = ['md'];
+  private readonly validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
+  onCheckedChange(value: string) {
+    const breakpoint = value as Breakpoint;
+    if (this.validBreakpoints.has(breakpoint)) {
+      this.breakpoints = [breakpoint];
+    }
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 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 application-name="Application name" [breakpoints]="breakpoints">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <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>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="Choose breakpoint">
+    </ix-content-header>
+    <ix-radio-group
+      [value]="breakpoints[0]"
+      (valueChange)="onCheckedChange($event.detail)"
+    >
+      <ix-radio value="sm" label="Small"></ix-radio>
+      <ix-radio value="md" label="Medium"></ix-radio>
+      <ix-radio value="lg" label="Large"></ix-radio>
+    </ix-radio-group>
+  </ix-content>
+</ix-application>
+```
+### Example: application-header
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxApplicationHeader,
+  IxIconButton,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxAvatar,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplicationHeader,
+    IxIconButton,
+    IxDropdownButton,
+    IxDropdownItem,
+    IxAvatar,
+  ],
+  templateUrl: './application-header.html',
+})
+export default class ApplicationHeaderExample {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 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-header name="My Application">
+  <div class="placeholder-logo" slot="logo"></div>
+  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
+  <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+    <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 username="John Doe" extra="Administrator">
+    <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+    <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+  </ix-avatar>
+</ix-application-header>
+```
+### Example: blind-header-actions
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxBlind,
+  IxIconButton,
+  IxDropdown,
+  IxDropdownItem,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxBlind, IxIconButton, IxDropdown, IxDropdownItem],
+  template: `
+    <ix-blind label="Example" icon="info">
+      <ix-icon-button variant="tertiary" id="context-menu" slot="header-actions" icon="context-menu" icon-color="color-primary"></ix-icon-button>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </ix-blind>
+    <ix-dropdown trigger="context-menu">
+      <ix-dropdown-item icon="rename">Rename...</ix-dropdown-item>
+      <ix-dropdown-item icon="trashcan">Delete...</ix-dropdown-item>
+    </ix-dropdown>
+  `,
+  styleUrls: ['./blind-header-actions.css'],
+})
+export default class Blind {}
+```
+### Example: dropdown-button-icon
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxDropdownButton,
+  IxDropdownItem,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxDropdownButton, IxDropdownItem],
+  styleUrls: ['./dropdown-button-icon.css'],
+  template: `
+    <div class="dropdown-button">
+      <ix-dropdown-button label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="subtle-primary" label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="tertiary" label="" icon="checkboxes">
+        <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button label="" disabled icon="checkboxes">
+      </ix-dropdown-button>
+    </div>
+  `,
+})
+export default class Dropdown {}
+```
+### Example: dropdown-button
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxDropdownButton,
+  IxDropdownItem,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxDropdownButton, IxDropdownItem],
+  template: `
+    <div class="example">
+      <ix-dropdown-button label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="subtle-primary" label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button variant="tertiary" label="Dropdown" icon="checkboxes">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button label="Dropdown" disabled icon="checkboxes">
+      </ix-dropdown-button>
+    </div>
+  `,
+  styleUrls: ['./dropdown-button.css'],
+})
+export default class Dropdown {}
+```
+### Example: dropdown-icon
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxButton,
+  IxDropdown,
+  IxDropdownItem,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxButton, IxDropdown, IxDropdownItem],
+  template: `
+    <ix-button id="iconTriggerId">Open</ix-button>
+    <ix-dropdown trigger="iconTriggerId">
+      <ix-dropdown-item label="Item 1" icon="star"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" icon="document"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3" icon="bulb"></ix-dropdown-item>
+    </ix-dropdown>
+  `,
+})
+export default class DropdownIcon {}
+```
+### Example: dropdown-quick-actions
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxButton,
+  IxDropdown,
+  IxDropdownQuickActions,
+  IxIconButton,
+  IxDivider,
+  IxDropdownItem,
+  IxDropdownTriggerDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxButton,
+    IxDropdown,
+    IxDropdownQuickActions,
+    IxIconButton,
+    IxDivider,
+    IxDropdownItem,
+    IxDropdownTriggerDirective,
+  ],
+  templateUrl: './dropdown-quick-actions.html',
+})
+export default class DropdownQuickActions {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 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-button #trigger>Open</ix-button>
+<ix-dropdown [ixDropdownTrigger]="trigger">
+  <ix-dropdown-quick-actions>
+    <ix-icon-button variant="tertiary" icon="cut"></ix-icon-button>
+    <ix-icon-button variant="tertiary" icon="bulb"></ix-icon-button>
+    <ix-icon-button variant="tertiary" icon="trashcan"></ix-icon-button>
+  </ix-dropdown-quick-actions>
+  <ix-divider></ix-divider>
+  <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+  <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+  <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
+</ix-dropdown>
+```
+### Example: dropdown-submenu
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxButton,
+  IxDropdown,
+  IxDropdownItem,
+  IxDropdownTriggerDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxButton, IxDropdown, IxDropdownItem, IxDropdownTriggerDirective],
+  template: `
+    <ix-button #trigger>Open</ix-button>
+    <ix-dropdown [ixDropdownTrigger]="trigger">
+      <ix-dropdown-item #submenu label="Submenu"></ix-dropdown-item>
+      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
+    </ix-dropdown>
+    <ix-dropdown [ixDropdownTrigger]="submenu" placement="right-start">
+      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+    </ix-dropdown>
+  `,
+})
+export default class DropdownSubmenu {}
+```
+### Example: dropdown
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxButton,
+  IxDropdown,
+  IxDropdownHeader,
+  IxDropdownItem,
+  IxDivider,
+  IxDropdownTriggerDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxButton,
+    IxDropdown,
+    IxDropdownHeader,
+    IxDropdownItem,
+    IxDivider,
+    IxDropdownTriggerDirective,
+  ],
+  template: `
+    <ix-button #trigger>Open</ix-button>
+    <ix-dropdown [ixDropdownTrigger]="trigger">
+      <ix-dropdown-header label="Category"></ix-dropdown-header>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 4"></ix-dropdown-item>
+      <ix-divider></ix-divider>
+      <ix-dropdown-item label="Item 5"></ix-dropdown-item>
+    </ix-dropdown>
+  `,
+})
+export default class Dropdown {}
+```
+### Example: group-context-menu
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxGroup,
+  IxDropdown,
+  IxDropdownItem,
+  IxGroupItem,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxGroup, IxDropdown, IxDropdownItem, IxGroupItem],
+  template: `
+    <ix-group header="Header text" sub-header="Subheader text">
+      <ix-dropdown slot="dropdown">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-dropdown>
+      <ix-group-item text="Example text 1"></ix-group-item>
+      <ix-group-item text="Example text 2"></ix-group-item>
+      <ix-group-item text="Example text 3"></ix-group-item>
+    </ix-group>
+  `,
+})
+export default class GroupContextMenu {}
+```
+### Example: map-navigation-migration
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxPane,
+  IxPaneLayout,
+  IxContent,
+  IxContentHeader,
+  IxButton,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxDropdownButton,
+    IxDropdownItem,
+    IxMenu,
+    IxMenuItem,
+    IxPane,
+    IxPaneLayout,
+    IxContent,
+    IxContentHeader,
+    IxButton,
+  ],
+  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;
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 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 class="application">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <!--{KEEP} Compare context menu -->
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <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>
+```
+### Example: split-button-icons
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxSplitButton, IxDropdownItem } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxSplitButton, IxDropdownItem],
+  template: `
+    <ix-split-button icon="document" splitIcon="chevron-down-small">
+      <ix-dropdown-item icon="cut"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb"></ix-dropdown-item>
+    </ix-split-button>
+  `,
+})
+export default class SplitButtonIcons {}
+```
+### Example: split-button
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxSplitButton, IxDropdownItem } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxSplitButton, IxDropdownItem],
+  template: `
+    <ix-split-button label="Action text" splitIcon="chevron-down-small">
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+    </ix-split-button>
+  `,
+})
+export default class SplitButton {}
+```
+<!-- Auto Generated Below -->
+## Properties
+| Property          | Attribute           | Description                                                                                   | Type                  | Default     |
+| ----------------- | ------------------- | --------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `ariaLabelButton` | `aria-label-button` | ARIA label for the item's button Will be set as aria-label for the nested HTML button element | `string \| undefined` | `undefined` |
+| `ariaLabelIcon`   | `aria-label-icon`   | ARIA label for the icon                                                                       | `string \| undefined` | `undefined` |
+| `checked`         | `checked`           | Whether the item is checked or not. If true a checkmark will mark the item as checked.        | `boolean`             | `false`     |
+| `disabled`        | `disabled`          | Disable item and remove event listeners                                                       | `boolean`             | `false`     |
+| `hover`           | `hover`             | Display hover state                                                                           | `boolean`             | `false`     |
+| `icon`            | `icon`              | Icon of dropdown item                                                                         | `string \| undefined` | `undefined` |
+| `label`           | `label`             | Label of dropdown item                                                                        | `string \| undefined` | `undefined` |
+## Dependencies
+### Used by
+ - [ix-breadcrumb](../breadcrumb)
+ - [ix-date-dropdown](../date-dropdown)
+ - [ix-menu-avatar-item](../menu-avatar-item)
+ - [ix-menu-category](../menu-category)
+ - [ix-select](../select)
+ - [ix-select-item](../select-item)
+### Graph
+```mermaid
+graph TD;
+  ix-breadcrumb --> ix-dropdown-item
+  ix-date-dropdown --> ix-dropdown-item
+  ix-menu-avatar-item --> ix-dropdown-item
+  ix-menu-category --> ix-dropdown-item
+  ix-select --> ix-dropdown-item
+  ix-select-item --> ix-dropdown-item
+  style ix-dropdown-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*