diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss
index 343d36c9bf..c2a99e1fd8 100644
--- a/core/src/components/menu/menu.scss
+++ b/core/src/components/menu/menu.scss
@@ -37,7 +37,6 @@
 
 
 .menu-inner {
-  @include position(0, auto, 0, 0);
   @include transform(translateX(-9999px));
 
   display: flex;
@@ -62,21 +61,13 @@
 :host(.menu-side-start) .menu-inner {
   --ion-safe-area-right: 0px;
 
-  @include multi-dir() {
-    /* stylelint-disable property-disallowed-list */
-    right: auto;
-    left: 0;
-  }
+  @include position(0, auto, 0, 0);
 }
 
 :host(.menu-side-end) .menu-inner {
   --ion-safe-area-left: 0px;
 
-  @include multi-dir() {
-    right: 0;
-    left: auto;
-    /* stylelint-enable property-disallowed-list */
-  }
+  @include position(0, 0, 0, auto);
 }
 
 ion-backdrop {
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 54d7040cb2..ff0dd4e202 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -130,6 +130,11 @@ export class Menu implements ComponentInterface, MenuI {
   @Watch('side')
   protected sideChanged() {
     this.isEndSide = isEnd(this.side);
+    /**
+     * Menu direction animation is calculated based on the document direction.
+     * If the document direction changes, we need to create a new animation.
+     */
+    this.animation = undefined;
   }
 
   /**
@@ -413,10 +418,16 @@ export class Menu implements ComponentInterface, MenuI {
     // Menu swipe animation takes the menu's inner width as parameter,
     // If `offsetWidth` changes, we need to create a new animation.
     const width = this.menuInnerEl!.offsetWidth;
-    if (width === this.width && this.animation !== undefined) {
+    /**
+     * Menu direction animation is calculated based on the document direction.
+     * If the document direction changes, we need to create a new animation.
+     */
+    const isEndSide = isEnd(this.side);
+    if (width === this.width && this.animation !== undefined && isEndSide === this.isEndSide) {
       return;
     }
     this.width = width;
+    this.isEndSide = isEndSide;
 
     // Destroy existing animation
     if (this.animation) {
@@ -703,7 +714,7 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   render() {
-    const { isEndSide, type, disabled, isPaneVisible, inheritedAttributes } = this;
+    const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
     const mode = getIonMode(this);
 
     return (
@@ -714,8 +725,7 @@ export class Menu implements ComponentInterface, MenuI {
           [mode]: true,
           [`menu-type-${type}`]: true,
           'menu-enabled': !disabled,
-          'menu-side-end': isEndSide,
-          'menu-side-start': !isEndSide,
+          [`menu-side-${side}`]: true,
           'menu-pane-visible': isPaneVisible,
         }}
       >
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts b/core/src/components/menu/test/basic/menu.e2e.ts
index 987007e036..590d312f82 100644
--- a/core/src/components/menu/test/basic/menu.e2e.ts
+++ b/core/src/components/menu/test/basic/menu.e2e.ts
@@ -74,6 +74,57 @@ test.describe('menu: basic', () => {
 
     await expect(scrollTop).toBe(200);
   });
+
+  test('should render on the correct side when side is changed dynamically', async ({ page, skip }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25601',
+    });
+
+    skip.mode('ios', 'Dynamic side changes are not mode dependent');
+
+    const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+    const ionDidClose = await page.spyOnEvent('ionDidClose');
+
+    await page.locator('[menu-id="start-menu"]').evaluate(async (el: HTMLIonMenuElement) => {
+      el.side = 'end';
+    });
+    await page.click('#open-start');
+    await ionDidOpen.next();
+
+    await expect(page).toHaveScreenshot(`menu-basic-side-toggled-${page.getSnapshotSettings()}.png`);
+
+    await page.locator('[menu-id="start-menu"]').evaluate(async (el: HTMLIonMenuElement) => {
+      await el.close();
+    });
+    await ionDidClose.next();
+  });
+
+  test('should render on the correct side when document direction is changed dynamically', async ({ page, skip }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25601',
+    });
+
+    skip.rtl('Document direction is not dependent on initial load');
+    skip.mode('ios', 'Dynamic side changes are not mode dependent');
+
+    const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+    const ionDidClose = await page.spyOnEvent('ionDidClose');
+
+    await page.evaluate(() => {
+      document.dir = 'rtl';
+    });
+    await page.click('#open-start');
+    await ionDidOpen.next();
+
+    await expect(page).toHaveScreenshot(`menu-basic-doc-dir-toggled-${page.getSnapshotSettings()}.png`);
+
+    await page.locator('[menu-id="start-menu"]').evaluate(async (el: HTMLIonMenuElement) => {
+      await el.close();
+    });
+    await ionDidClose.next();
+  });
 });
 
 async function testMenu(page: E2EPage, menu: Locator, menuId: string) {
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0239fd73c5
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ba4205b728
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dd18222e00
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b93190b845
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..82687c3c50
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b13a494355
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f7a79b0ac7
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..43f5bf7fe1
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..fed99b9b1f
Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-rtl-Mobile-Safari-linux.png differ