diff --git a/resources/skins.minerva.scripts/menu.js b/resources/skins.minerva.scripts/menu.js
index a0b1114..ce716d6 100644
--- a/resources/skins.minerva.scripts/menu.js
+++ b/resources/skins.minerva.scripts/menu.js
@@ -1,6 +1,29 @@
 var MainMenu = require( './menu/MainMenu.js' ),
+	util = mw.mobileFrontend.require( 'mobile.startup' ).util,
 	mainMenu = createMainMenu();
 
+/**
+ * Update body tag with appropriate classes for a closed drawer.
+ */
+function onClose() {
+	$( document.body ).removeClass(
+		[ 'navigation-enabled', 'secondary-navigation-enabled',
+			'primary-navigation-enabled' ].join( ' ' )
+	);
+}
+
+/**
+ * Update body tag with appropriate classes for an open drawer.
+ * @param {string} drawerType A name that identifies the navigation drawer that
+ *  should be opened. Either primary or secondary.
+ */
+function onOpen( drawerType ) {
+	// FIXME: We should be moving away from applying classes to the body
+	$( document.body ).addClass(
+		[ 'navigation-enabled', drawerType + '-navigation-enabled' ].join( ' ' )
+	);
+}
+
 /**
  * Creates an instance of the `MainMenu`, using the `wgMinervaMenuData` for configuration.
  *
@@ -16,7 +39,14 @@ function createMainMenu() {
 
 	options.activator = '.header .main-menu-button';
 
-	return new MainMenu( options );
+	return new MainMenu(
+		util.extend( options, {
+			onClose: onClose,
+			onOpen: function () {
+				onOpen( 'primary' );
+			}
+		} )
+	);
 }
 
 $( function () {
diff --git a/resources/skins.minerva.scripts/menu/MainMenu.js b/resources/skins.minerva.scripts/menu/MainMenu.js
index 7618c32..ae5c136 100644
--- a/resources/skins.minerva.scripts/menu/MainMenu.js
+++ b/resources/skins.minerva.scripts/menu/MainMenu.js
@@ -3,6 +3,7 @@
 		mobile = M.require( 'mobile.startup' ),
 		mfExtend = mobile.mfExtend,
 		browser = mobile.Browser.getSingleton(),
+		util = mobile.util,
 		View = mobile.View;
 
 	/**
@@ -11,10 +12,17 @@
 	 * @class MainMenu
 	 * @extends View
 	 * @param {Object} options Configuration options
+	 * @param {Function} options.onOpen executed when the menu opens
+	 * @param {Function} options.onClose executed when the menu closes
 	 */
 	function MainMenu( options ) {
 		this.activator = options.activator;
-		View.call( this, options );
+		View.call( this,
+			util.extend( {
+				onOpen: function () {},
+				onClose: function () {}
+			}, options )
+		);
 	}
 
 	mfExtend( MainMenu, View, {
@@ -75,41 +83,34 @@
 		 * @memberof MainMenu
 		 * @instance
 		 * @return {boolean}
+		 * @private
 		 */
 		isOpen: function () {
-			// FIXME: We should be moving away from applying classes to the body
-			return $( document.body ).hasClass( 'navigation-enabled' );
+			return this.$el.hasClass( 'menu--open' );
 		},
 
 		/**
 		 * Close all open navigation drawers
 		 * @memberof MainMenu
 		 * @instance
+		 * @private
 		 */
 		closeNavigationDrawers: function () {
-			// FIXME: We should be moving away from applying classes to the body
-			$( document.body ).removeClass( 'navigation-enabled' )
-				.removeClass( 'secondary-navigation-enabled' )
-				.removeClass( 'primary-navigation-enabled' );
+			this.$el.removeClass( 'menu--open' );
+			this.options.onClose();
 		},
 
 		/**
 		 * Toggle open navigation drawer
-		 * @param {string} [drawerType] A name that identifies the navigation drawer that
-		 *     should be toggled open. Defaults to 'primary'.
-		 * @fires MainMenu#open
 		 * @memberof MainMenu
 		 * @instance
+		 * @private
 		 */
-		openNavigationDrawer: function ( drawerType ) {
+		openNavigationDrawer: function () {
 			// close any existing ones first.
 			this.closeNavigationDrawers();
-			drawerType = drawerType || 'primary';
-			// FIXME: We should be moving away from applying classes to the body
-			$( document.body ).toggleClass( 'navigation-enabled' )
-				.toggleClass( drawerType + '-navigation-enabled' );
-
-			this.emit( 'open' );
+			this.$el.addClass( 'menu--open' );
+			this.options.onOpen();
 		}
 	} );