diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 4769f609914..36d29a0b491 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -499,7 +499,7 @@ export class Menu implements ComponentInterface, MenuI {
      * 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);
+    const isEndSide = isEnd(this.side, this.el);
     if (width === this.width && this.animation !== undefined && isEndSide === this.isEndSide) {
       return;
     }
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index e32956c35eb..79f52a35aa8 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -319,10 +319,15 @@ export const pointerCoord = (ev: any): { x: number; y: number } => {
  * Given a side, return if it should be on the end
  * based on the value of dir
  * @param side the side
+ * @param hostElement the host element
  * @param isRTL whether the application dir is rtl
  */
-export const isEndSide = (side: Side): boolean => {
-  const isRTL = document.dir === 'rtl';
+export const isEndSide = (side: Side, hostElement?: Element): boolean => {
+  const isRTL = hostElement
+		? hostElement.closest('[dir]')?.getAttribute('dir') === 'rtl'
+		: document.dir === 'rtl'
+	;
+
   switch (side) {
     case 'start':
       return isRTL;