diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
index 3efdc4a902..aad5572dc9 100644
--- a/packages/core/src/components/menu/menu.tsx
+++ b/packages/core/src/components/menu/menu.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { Animation, Config, GestureDetail, SplitPaneAlert, StencilElement } from '../../index';
 import { Side, assert, checkEdgeSide, isRightSide } from '../../utils/helpers';
 
@@ -23,7 +23,6 @@ export class Menu {
   mode: string;
   color: string;
   isAnimating = false;
-  isRightSide = false;
   width: number = null;
 
   backdropEl: HTMLElement;
@@ -33,6 +32,8 @@ export class Menu {
 
   @Element() private el: HTMLIonMenuElement;
 
+  @State() isRightSide = false;
+
   @Prop({ context: 'config' }) config: Config;
   @Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: StencilElement;
   @Prop({ context: 'enableListener' }) enableListener: any;
@@ -426,13 +427,14 @@ export class Menu {
   }
 
   hostData() {
+    const isRightSide = this.isRightSide;
     const typeClass = 'menu-type-' + this.type;
     return {
       role: 'complementary',
       class: {
         'menu-enabled': !this.disabled,
-        'menu-side-right': this.isRightSide,
-        'menu-side-left': !this.isRightSide,
+        'menu-side-right': isRightSide,
+        'menu-side-left': !isRightSide,
         [typeClass]: true,
       }
     };