diff --git a/packages/scratch-gui/src/components/gui/gui.jsx b/packages/scratch-gui/src/components/gui/gui.jsx
index 708d8ddb00..5a2c9aa2c4 100644
--- a/packages/scratch-gui/src/components/gui/gui.jsx
+++ b/packages/scratch-gui/src/components/gui/gui.jsx
@@ -46,63 +46,64 @@ import DebugModal from '../debug-modal/debug-modal.jsx';
 import {setPlatform} from '../../reducers/platform.js';
 import {setTheme} from '../../reducers/settings.js';
 import {PLATFORM} from '../../lib/platform.js';
+import {MenuRefProvider} from '../../contexts/menu-ref-context.jsx';
 import {ModalFocusProvider} from '../../contexts/modal-focus-context.jsx';
 
 const ariaMessages = defineMessages({
     menuBar: {
         id: 'gui.aria.menuBar',
         defaultMessage: 'Menu topbar',
-        description: 'ARIA label for the top menu bar'
+        description: 'accessibility label for the top menu bar'
     },
     editor: {
         id: 'gui.aria.editor',
         defaultMessage: 'Editor',
-        description: 'ARIA label for the main editor area'
+        description: 'accessibility label for the main editor area'
     },
     tabList: {
         id: 'gui.aria.tabList',
         defaultMessage: 'Tab list',
-        description: 'ARIA label for the editor tab list'
+        description: 'accessibility label for the editor tab list'
     },
     codePanel: {
         id: 'gui.aria.codePanel',
         defaultMessage: 'Code editor panel',
-        description: 'ARIA label for the code editor panel'
+        description: 'accessibility label for the code editor panel'
     },
     costumesPanel: {
         id: 'gui.aria.costumesPanel',
         defaultMessage: 'Costumes editor panel',
-        description: 'ARIA label for the costumes editor panel'
+        description: 'accessibility label for the costumes editor panel'
     },
     backdropsPanel: {
         id: 'gui.aria.backdropsPanel',
         defaultMessage: 'Backdrops editor panel',
-        description: 'ARIA label for the backdrops editor panel'
+        description: 'accessibility label for the backdrops editor panel'
     },
     soundsPanel: {
         id: 'gui.aria.soundsPanel',
         defaultMessage: 'Sounds editor panel',
-        description: 'ARIA label for the sounds editor panel'
+        description: 'accessibility label for the sounds editor panel'
     },
     backpack: {
         id: 'gui.aria.backpack',
         defaultMessage: 'Backpack',
-        description: 'ARIA label for the backpack'
+        description: 'accessibility label for the backpack'
     },
     stageAndTarget: {
         id: 'gui.aria.stageAndTarget',
         defaultMessage: 'Stage and target',
-        description: 'ARIA label for stage and target area'
+        description: 'accessibility label for stage and target area'
     },
     stage: {
         id: 'gui.aria.stage',
         defaultMessage: 'Stage',
-        description: 'ARIA label for the stage'
+        description: 'accessibility label for the stage'
     },
     targetPane: {
         id: 'gui.aria.targetPane',
         defaultMessage: 'Target pane',
-        description: 'ARIA label for the target pane'
+        description: 'accessibility label for the target pane'
     }
 });
 
@@ -114,7 +115,6 @@ const GUIComponent = props => {
     const intl = useIntl();
     const {
         accountMenuOptions,
-        accountNavOpen,
         activeTabIndex,
         alertsVisible,
         authorId,
@@ -162,8 +162,6 @@ const GUIComponent = props => {
         menuBarHidden,
         renderLogin,
         onClickAbout,
-        onClickAccountNav,
-        onCloseAccountNav,
         onLogOut,
         onOpenRegistration,
         onToggleLoginOpen,
@@ -332,47 +330,49 @@ const GUIComponent = props => {
                             onRequestClose={onRequestCloseBackdropLibrary}
                         />
                     ) : null}
-                    {!menuBarHidden && <MenuBar
-                        ariaRole="banner"
-                        ariaLabel={intl.formatMessage(ariaMessages.menuBar)}
-                        accountNavOpen={accountNavOpen}
-                        authorId={authorId}
-                        authorThumbnailUrl={authorThumbnailUrl}
-                        authorUsername={authorUsername}
-                        authorAvatarBadge={authorAvatarBadge}
-                        canChangeLanguage={canChangeLanguage}
-                        canChangeColorMode={canChangeColorMode}
-                        canChangeTheme={canChangeTheme}
-                        canCreateCopy={canCreateCopy}
-                        canCreateNew={canCreateNew}
-                        canEditTitle={canEditTitle}
-                        canManageFiles={canManageFiles}
-                        canRemix={canRemix}
-                        canSave={canSave}
-                        canShare={canShare}
-                        className={styles.menuBarPosition}
-                        enableCommunity={enableCommunity}
-                        hasActiveMembership={hasActiveMembership}
-                        isShared={isShared}
-                        isTotallyNormal={isTotallyNormal}
-                        logo={logo}
-                        renderLogin={renderLogin}
-                        showComingSoon={showComingSoon}
-                        onClickAbout={onClickAbout}
-                        onClickAccountNav={onClickAccountNav}
-                        onClickLogo={onClickLogo}
-                        onCloseAccountNav={onCloseAccountNav}
-                        onLogOut={onLogOut}
-                        onOpenRegistration={onOpenRegistration}
-                        onProjectTelemetryEvent={onProjectTelemetryEvent}
-                        onSeeCommunity={onSeeCommunity}
-                        onShare={onShare}
-                        onStartSelectingFileUpload={onStartSelectingFileUpload}
-                        onToggleLoginOpen={onToggleLoginOpen}
-                        userOwnsProject={userOwnsProject}
-                        username={username}
-                        accountMenuOptions={accountMenuOptions}
-                    />}
+                    {/* TODO - in case of moving MenuRefProvider which seems likely,
+                    make sure to move it from tests as well */}
+                    {!menuBarHidden && <MenuRefProvider>
+                        <MenuBar
+                            ariaRole="banner"
+                            ariaLabel={intl.formatMessage(ariaMessages.menuBar)}
+                            authorId={authorId}
+                            authorThumbnailUrl={authorThumbnailUrl}
+                            authorUsername={authorUsername}
+                            authorAvatarBadge={authorAvatarBadge}
+                            canChangeLanguage={canChangeLanguage}
+                            canChangeColorMode={canChangeColorMode}
+                            canChangeTheme={canChangeTheme}
+                            canCreateCopy={canCreateCopy}
+                            canCreateNew={canCreateNew}
+                            canEditTitle={canEditTitle}
+                            canManageFiles={canManageFiles}
+                            canRemix={canRemix}
+                            canSave={canSave}
+                            canShare={canShare}
+                            className={styles.menuBarPosition}
+                            enableCommunity={enableCommunity}
+                            hasActiveMembership={hasActiveMembership}
+                            isShared={isShared}
+                            isTotallyNormal={isTotallyNormal}
+                            logo={logo}
+                            renderLogin={renderLogin}
+                            showComingSoon={showComingSoon}
+                            onClickAbout={onClickAbout}
+                            onClickLogo={onClickLogo}
+                            onLogOut={onLogOut}
+                            onOpenRegistration={onOpenRegistration}
+                            onProjectTelemetryEvent={onProjectTelemetryEvent}
+                            onSeeCommunity={onSeeCommunity}
+                            onShare={onShare}
+                            onStartSelectingFileUpload={onStartSelectingFileUpload}
+                            onToggleLoginOpen={onToggleLoginOpen}
+                            userOwnsProject={userOwnsProject}
+                            username={username}
+                            accountMenuOptions={accountMenuOptions}
+                        />
+                    </MenuRefProvider>
+                    }
                     <Box className={classNames(boxStyles, styles.flexWrapper)}>
                         <Box
                             role="main"
@@ -573,7 +573,6 @@ const GUIComponent = props => {
 };
 
 GUIComponent.propTypes = {
-    accountNavOpen: PropTypes.bool,
     accountMenuOptions: AccountMenuOptionsPropTypes,
     activeTabIndex: PropTypes.number,
     authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
@@ -620,9 +619,7 @@ GUIComponent.propTypes = {
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
-    onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
-    onCloseAccountNav: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,
     onLogOut: PropTypes.func,
     onNewSpriteClick: PropTypes.func,
diff --git a/packages/scratch-gui/src/components/menu-bar/about-menu.jsx b/packages/scratch-gui/src/components/menu-bar/about-menu.jsx
new file mode 100644
index 0000000000..9fb43c7548
--- /dev/null
+++ b/packages/scratch-gui/src/components/menu-bar/about-menu.jsx
@@ -0,0 +1,131 @@
+import React, {useCallback} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {useIntl, defineMessage} from 'react-intl';
+import {connect} from 'react-redux';
+
+import MenuBarMenu from './menu-bar-menu.jsx';
+import Button from '../button/button.jsx';
+import {MenuItem} from '../menu/menu.jsx';
+import useMenuNavigation from '../../hooks/use-menu-navigation.jsx';
+
+import styles from './menu-bar.css';
+import aboutIcon from './icon--about.svg';
+
+const aboutMenuMessage = defineMessage({
+    id: 'gui.aria.aboutMenu',
+    defaultMessage: 'About menu',
+    description: 'accessibility label for About menu'
+});
+
+const AboutButton = props => {
+    const intl = useIntl();
+
+    return (<Button
+        className={classNames(styles.menuBarItem, styles.hoverable)}
+        iconClassName={styles.aboutIcon}
+        iconSrc={aboutIcon}
+        onClick={props.onClick}
+        aria-label={intl.formatMessage(aboutMenuMessage)}
+    />);
+};
+
+AboutButton.propTypes = {
+    onClick: PropTypes.func.isRequired
+};
+
+const AboutMenu = ({
+    onClick,
+    isRtl
+}) => {
+    if (!onClick) {
+        // hide the button
+        return null;
+    }
+    if (typeof onClick === 'function') {
+        // make a button which calls a function
+        return <AboutButton onClick={onClick} />;
+    }
+
+    // assume it's an array of objects
+    // each item must have a 'title' FormattedMessage and a 'handleClick' function
+    // generate a menu with items for each object in the array
+
+    const intl = useIntl();
+
+    const {
+        menuRef,
+        isExpanded,
+        handleOnOpen,
+        handleOnClose,
+        handleKeyDown,
+        handleKeyDownOpenMenu
+    } = useMenuNavigation({
+        depth: 1
+    });
+
+    const wrapAboutMenuCallback = useCallback(
+        callback => () => {
+            callback();
+            handleOnClose();
+        },
+        [handleOnClose]
+    );
+
+    return (
+        <button
+            className={classNames(styles.menuBarItem, styles.hoverable, {
+                [styles.active]: isExpanded()
+            })}
+            onClick={handleOnOpen}
+            onKeyDown={handleKeyDown}
+            aria-label={intl.formatMessage(aboutMenuMessage)}
+            aria-expanded={isExpanded()}
+            ref={menuRef}
+        >
+            <img
+                className={styles.aboutIcon}
+                src={aboutIcon}
+            />
+            <MenuBarMenu
+                className={classNames(styles.menuBarMenu)}
+                open={isExpanded()}
+                place={isRtl ? 'right' : 'left'}
+                onRequestClose={handleOnClose}
+            >
+                {
+                    onClick.map(itemProps => (
+                        <MenuItem
+                            key={itemProps.title}
+                            isRtl={isRtl}
+                            onClick={wrapAboutMenuCallback(itemProps.onClick)}
+                            onParentKeyPress={handleKeyDownOpenMenu}
+                            data-menu-item="true"
+                        >
+                            {itemProps.title}
+                        </MenuItem>
+                    ))
+                }
+            </MenuBarMenu>
+        </button>
+    );
+};
+
+AboutMenu.propTypes = {
+    isRtl: PropTypes.bool.isRequired,
+    onClick: PropTypes.oneOfType([
+        PropTypes.func, // button mode: call this callback when the About button is clicked
+        PropTypes.arrayOf( // menu mode: list of items in the About menu
+            PropTypes.shape({
+                title: PropTypes.string, // text for the menu item
+                onClick: PropTypes.func // call this callback when the menu item is clicked
+            })
+        )
+    ])
+};
+
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+export default connect(mapStateToProps)(AboutMenu);
diff --git a/packages/scratch-gui/src/components/menu-bar/account-nav.css b/packages/scratch-gui/src/components/menu-bar/account-menu.css
similarity index 100%
rename from packages/scratch-gui/src/components/menu-bar/account-nav.css
rename to packages/scratch-gui/src/components/menu-bar/account-menu.css
diff --git a/packages/scratch-gui/src/components/menu-bar/account-menu.jsx b/packages/scratch-gui/src/components/menu-bar/account-menu.jsx
new file mode 100644
index 0000000000..79084d2f24
--- /dev/null
+++ b/packages/scratch-gui/src/components/menu-bar/account-menu.jsx
@@ -0,0 +1,199 @@
+import styles from './account-menu.css';
+import stylesMenuBar from './menu-bar.css';
+import classNames from 'classnames';
+import React from 'react';
+import useMenuNavigation from '../../hooks/use-menu-navigation';
+import {useIntl, FormattedMessage, defineMessage} from 'react-intl';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {AccountMenuOptionsPropTypes} from '../../lib/account-menu-options';
+
+import MenuBarMenu from './menu-bar-menu.jsx';
+import {MenuSection} from '../menu/menu.jsx';
+import MenuItemContainer from '../../containers/menu-item.jsx';
+import UserAvatar from './user-avatar.jsx';
+import dropdownCaret from './dropdown-caret.svg';
+
+const accountMenu = defineMessage({
+    id: 'gui.aria.accountMenu',
+    defaultMessage: 'Account menu',
+    description: 'accessibility label for account menu'
+});
+
+const AccountMenu = ({
+    menuOpts,
+    username,
+    isRtl,
+    onLogOut,
+    avatarBadge
+}) => {
+    const {
+        avatarUrl,
+        myStuffUrl,
+        profileUrl,
+        myClassesUrl,
+        myClassUrl,
+        accountSettingsUrl,
+        canLogout
+    } = menuOpts;
+
+    const intl = useIntl();
+
+    const {
+        isExpanded,
+        handleOnOpen,
+        handleOnClose,
+        handleKeyDown,
+        handleKeyDownOpenMenu,
+        menuRef
+    } = useMenuNavigation({
+        depth: 1
+    });
+
+    return (
+        <React.Fragment>
+            <button
+                className={classNames(
+                    styles.userInfo,
+                    stylesMenuBar.menuBarItem,
+                    stylesMenuBar.hoverable,
+                    {[stylesMenuBar.active]: isExpanded()}
+                )}
+                onClick={handleOnOpen}
+                onKeyDown={handleKeyDown}
+                aria-label={intl.formatMessage(accountMenu)}
+                aria-expanded={isExpanded()}
+                ref={menuRef}
+            >
+                {avatarUrl ? (
+                    <UserAvatar
+                        className={styles.avatar}
+                        wrapperClassName={styles.avatarWrapper}
+                        imageUrl={avatarUrl}
+                        showAvatarBadge={!!avatarBadge}
+                    />
+                ) : null}
+                <span className={styles.profileName}>
+                    {username}
+                </span>
+                <div className={styles.dropdownCaretPosition}>
+                    <img
+                        className={stylesMenuBar.dropdownCaretIcon}
+                        src={dropdownCaret}
+                    />
+                </div>
+            </button>
+            <MenuBarMenu
+                className={classNames(stylesMenuBar.menuBarMenu)}
+                open={isExpanded()}
+                // note: the Rtl styles are switched here, because this menu is justified
+                // opposite all the others
+                place={isRtl ? 'right' : 'left'}
+                onRequestClose={handleOnClose}
+            >
+                {profileUrl ? (
+                    <MenuItemContainer
+                        href={profileUrl}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        <FormattedMessage
+                            defaultMessage="Profile"
+                            description="Text to link to my user profile, in the account navigation menu"
+                            id="gui.accountMenu.profile"
+                        />
+                    </MenuItemContainer>
+                ) : null}
+    
+                {myStuffUrl ? (
+                    <MenuItemContainer
+                        href={myStuffUrl}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        <FormattedMessage
+                            defaultMessage="My Stuff"
+                            description="Text to link to list of my projects, in the account navigation menu"
+                            id="gui.accountMenu.myStuff"
+                        />
+                    </MenuItemContainer>
+                ) : null}
+    
+                {myClassesUrl ? (
+                    <MenuItemContainer
+                        href={myClassesUrl}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        <FormattedMessage
+                            defaultMessage="My Classes"
+                            description="Text to link to my classes (if I am a teacher), in the account navigation menu"
+                            id="gui.accountMenu.myClasses"
+                        />
+                    </MenuItemContainer>
+                ) : null}
+    
+                {myClassUrl ? (
+                    <MenuItemContainer
+                        href={myClassUrl}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        <FormattedMessage
+                            defaultMessage="My Class"
+                            description="Text to link to my class (if I am a student), in the account navigation menu"
+                            id="gui.accountMenu.myClass"
+                        />
+                    </MenuItemContainer>
+                ) : null}
+    
+                {accountSettingsUrl ? (
+                    <MenuItemContainer
+                        href={accountSettingsUrl}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        <FormattedMessage
+                            defaultMessage="Account settings"
+                            description="Text to link to my account settings, in the account navigation menu"
+                            id="gui.accountMenu.accountSettings"
+                        />
+                    </MenuItemContainer>
+                ) : null}
+    
+                {canLogout ? (
+                    <MenuSection>
+                        <MenuItemContainer
+                            onClick={onLogOut}
+                            data-menu-item="true"
+                            onParentKeyPress={handleKeyDownOpenMenu}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Sign out"
+                                description="Text to link to sign out, in the account navigation menu"
+                                id="gui.accountMenu.signOut"
+                            />
+                        </MenuItemContainer>
+                    </MenuSection>
+                ) : null}
+            </MenuBarMenu>
+        </React.Fragment>
+    );
+};
+
+AccountMenu.propTypes = {
+    menuOpts: AccountMenuOptionsPropTypes,
+    isRtl: PropTypes.bool,
+    username: PropTypes.string,
+    onLogOut: PropTypes.func,
+    avatarBadge: PropTypes.number
+};
+
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+export default connect(
+    mapStateToProps
+)(AccountMenu);
diff --git a/packages/scratch-gui/src/components/menu-bar/account-nav.jsx b/packages/scratch-gui/src/components/menu-bar/account-nav.jsx
deleted file mode 100644
index 42b5a21b47..0000000000
--- a/packages/scratch-gui/src/components/menu-bar/account-nav.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
-NOTE: this file only temporarily resides in scratch-gui.
-Nearly identical code appears in scratch-www, and the two should
-eventually be consolidated.
-*/
-
-import classNames from 'classnames';
-import {FormattedMessage} from 'react-intl';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import MenuBarMenu from './menu-bar-menu.jsx';
-import {MenuSection} from '../menu/menu.jsx';
-import MenuItemContainer from '../../containers/menu-item.jsx';
-import UserAvatar from './user-avatar.jsx';
-import dropdownCaret from './dropdown-caret.svg';
-
-import styles from './account-nav.css';
-
-const AccountNavComponent = ({
-    className,
-    isOpen,
-    isRtl,
-    menuBarMenuClassName,
-    onClick,
-    onClose,
-    onLogOut,
-    profileUrl,
-    myStuffUrl,
-    avatarUrl,
-    myClassesUrl,
-    myClassUrl,
-    accountSettingsUrl,
-    username,
-    avatarBadge
-}) => (
-    <React.Fragment>
-        <div
-            className={classNames(
-                styles.userInfo,
-                className
-            )}
-            onClick={onClick}
-        >
-            {avatarUrl ? (
-                <UserAvatar
-                    className={styles.avatar}
-                    wrapperClassName={styles.avatarWrapper}
-                    imageUrl={avatarUrl}
-                    showAvatarBadge={!!avatarBadge}
-                />
-            ) : null}
-            <span className={styles.profileName}>
-                {username}
-            </span>
-            <div className={styles.dropdownCaretPosition}>
-                <img
-                    className={styles.dropdownCaretIcon}
-                    src={dropdownCaret}
-                />
-            </div>
-        </div>
-        <MenuBarMenu
-            className={menuBarMenuClassName}
-            open={isOpen}
-            // note: the Rtl styles are switched here, because this menu is justified
-            // opposite all the others
-            place={isRtl ? 'right' : 'left'}
-            onRequestClose={onClose}
-        >
-            {profileUrl ? (
-                <MenuItemContainer href={profileUrl}>
-                    <FormattedMessage
-                        defaultMessage="Profile"
-                        description="Text to link to my user profile, in the account navigation menu"
-                        id="gui.accountMenu.profile"
-                    />
-                </MenuItemContainer>
-            ) : null}
-
-            {myStuffUrl ? (
-                <MenuItemContainer href={myStuffUrl}>
-                    <FormattedMessage
-                        defaultMessage="My Stuff"
-                        description="Text to link to list of my projects, in the account navigation menu"
-                        id="gui.accountMenu.myStuff"
-                    />
-                </MenuItemContainer>
-            ) : null}
-
-            {myClassesUrl ? (
-                <MenuItemContainer href={myClassesUrl}>
-                    <FormattedMessage
-                        defaultMessage="My Classes"
-                        description="Text to link to my classes (if I am a teacher), in the account navigation menu"
-                        id="gui.accountMenu.myClasses"
-                    />
-                </MenuItemContainer>
-            ) : null}
-
-            {myClassUrl ? (
-                <MenuItemContainer href={myClassUrl}>
-                    <FormattedMessage
-                        defaultMessage="My Class"
-                        description="Text to link to my class (if I am a student), in the account navigation menu"
-                        id="gui.accountMenu.myClass"
-                    />
-                </MenuItemContainer>
-            ) : null}
-
-            {accountSettingsUrl ? (
-                <MenuItemContainer href={accountSettingsUrl}>
-                    <FormattedMessage
-                        defaultMessage="Account settings"
-                        description="Text to link to my account settings, in the account navigation menu"
-                        id="gui.accountMenu.accountSettings"
-                    />
-                </MenuItemContainer>
-            ) : null}
-
-            {onLogOut ? (
-                <MenuSection>
-                    <MenuItemContainer onClick={onLogOut}>
-                        <FormattedMessage
-                            defaultMessage="Sign out"
-                            description="Text to link to sign out, in the account navigation menu"
-                            id="gui.accountMenu.signOut"
-                        />
-                    </MenuItemContainer>
-                </MenuSection>
-            ) : null}
-        </MenuBarMenu>
-    </React.Fragment>
-);
-
-AccountNavComponent.propTypes = {
-    className: PropTypes.string,
-
-    isOpen: PropTypes.bool,
-    isRtl: PropTypes.bool,
-
-    menuBarMenuClassName: PropTypes.string,
-
-    onClick: PropTypes.func,
-    onClose: PropTypes.func,
-    onLogOut: PropTypes.func,
-
-    username: PropTypes.string,
-    avatarBadge: PropTypes.number,
-
-    avatarUrl: PropTypes.string,
-    myStuffUrl: PropTypes.string,
-    profileUrl: PropTypes.string,
-    myClassesUrl: PropTypes.string,
-    myClassUrl: PropTypes.string,
-    accountSettingsUrl: PropTypes.string
-};
-
-export default AccountNavComponent;
diff --git a/packages/scratch-gui/src/components/menu-bar/author-info.jsx b/packages/scratch-gui/src/components/menu-bar/author-info.jsx
index c8058db7c8..4a17511bc5 100644
--- a/packages/scratch-gui/src/components/menu-bar/author-info.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/author-info.jsx
@@ -1,11 +1,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessage, useIntl} from 'react-intl';
 import UserAvatar from './user-avatar.jsx';
 
 import styles from './author-info.css';
 
+const authorInfo = defineMessage({
+    id: 'gui.aria.authorInfo',
+    defaultMessage: 'Project "{projectTitle}" by {username}',
+    description: 'accessibility label for author info'
+});
+
 const AuthorInfo = ({
     className,
     imageUrl,
@@ -14,8 +20,10 @@ const AuthorInfo = ({
     userId,
     username,
     avatarBadge
-}) => (
-    <div
+}) => {
+    const intl = useIntl();
+
+    return (<div
         className={classNames(
             className,
             styles.authorInfo
@@ -27,7 +35,15 @@ const AuthorInfo = ({
             showAvatarBadge={!!avatarBadge}
             wrapperClassName={styles.avatarWrapper}
         />
-        <div className={styles.titleAuthor}>
+        <div
+            className={styles.titleAuthor}
+            tabIndex={0}
+            role="presentation"
+            aria-label={intl.formatMessage(authorInfo, {
+                projectTitle,
+                username
+            })}
+        >
             <span className={styles.projectTitle}>
                 {projectTitle}
             </span>
@@ -49,8 +65,8 @@ const AuthorInfo = ({
                 </span>
             </div>
         </div>
-    </div>
-);
+    </div>);
+};
 
 AuthorInfo.propTypes = {
     className: PropTypes.string,
diff --git a/packages/scratch-gui/src/components/menu-bar/edit-menu.jsx b/packages/scratch-gui/src/components/menu-bar/edit-menu.jsx
new file mode 100644
index 0000000000..ae99c26a14
--- /dev/null
+++ b/packages/scratch-gui/src/components/menu-bar/edit-menu.jsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import styles from './menu-bar.css';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import editIcon from './icon--edit.svg';
+import {useIntl, FormattedMessage, defineMessage} from 'react-intl';
+import MenuBarMenu from './menu-bar-menu.jsx';
+import {MenuItem, MenuSection} from '../menu/menu.jsx';
+import useMenuNavigation from '../../hooks/use-menu-navigation.jsx';
+import dropdownCaret from './dropdown-caret.svg';
+import DeletionRestorer from '../../containers/deletion-restorer.jsx';
+import TurboMode from '../../containers/turbo-mode.jsx';
+
+const editMenuAriaMessage = defineMessage({
+    id: 'gui.aria.editMenu',
+    defaultMessage: 'Edit menu',
+    description: 'accessibility label for edit menu'
+});
+
+const EditMenu = ({
+    isRtl,
+    onRestoreOption,
+    restoreOptionMessage
+}) => {
+    const intl = useIntl();
+
+    const {
+        menuRef,
+        isExpanded,
+        handleKeyDown,
+        handleKeyDownOpenMenu,
+        handleOnOpen,
+        handleOnClose
+    } = useMenuNavigation({
+        depth: 1
+    });
+
+    return (
+        <button
+            className={classNames(styles.menuBarItem, styles.hoverable, {
+                [styles.active]: isExpanded()
+            })}
+            onClick={handleOnOpen}
+            aria-label={intl.formatMessage(editMenuAriaMessage)}
+            aria-expanded={isExpanded()}
+            onKeyDown={handleKeyDown}
+            ref={menuRef}
+        >
+            <img src={editIcon} />
+            <span className={styles.collapsibleLabel}>
+                <FormattedMessage
+                    defaultMessage="Edit"
+                    description="Text for edit dropdown menu"
+                    id="gui.menuBar.edit"
+                />
+            </span>
+            <img src={dropdownCaret} />
+            <MenuBarMenu
+                className={classNames(styles.menuBarMenu)}
+                open={isExpanded()}
+                place={isRtl ? 'left' : 'right'}
+                onRequestClose={handleOnClose}
+            >
+                <DeletionRestorer>{(handleRestore, {restorable, deletedItem}) => (
+                    <MenuItem
+                        className={classNames({[styles.disabled]: !restorable})}
+                        onClick={onRestoreOption(handleRestore)}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                        isDisabled={!restorable}
+                    >
+                        {restoreOptionMessage(deletedItem)}
+                    </MenuItem>
+                )}</DeletionRestorer>
+                <MenuSection>
+                    <TurboMode>{(toggleTurboMode, {turboMode}) => (
+                        <MenuItem
+                            onClick={toggleTurboMode}
+                            data-menu-item="true"
+                            onParentKeyPress={handleKeyDownOpenMenu}
+                        >
+                            {turboMode ? (
+                                <FormattedMessage
+                                    defaultMessage="Turn off Turbo Mode"
+                                    description="Menu bar item for turning off turbo mode"
+                                    id="gui.menuBar.turboModeOff"
+                                />
+                            ) : (
+                                <FormattedMessage
+                                    defaultMessage="Turn on Turbo Mode"
+                                    description="Menu bar item for turning on turbo mode"
+                                    id="gui.menuBar.turboModeOn"
+                                />
+                            )}
+                        </MenuItem>
+                    )}</TurboMode>
+                </MenuSection>
+            </MenuBarMenu>
+        </button>
+    );
+};
+
+EditMenu.propTypes = {
+    isRtl: PropTypes.bool,
+    restoreOptionMessage: PropTypes.func.isRequired,
+    onRestoreOption: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+export default connect(
+    mapStateToProps
+)(EditMenu);
diff --git a/packages/scratch-gui/src/components/menu-bar/file-menu.jsx b/packages/scratch-gui/src/components/menu-bar/file-menu.jsx
new file mode 100644
index 0000000000..e69502b57a
--- /dev/null
+++ b/packages/scratch-gui/src/components/menu-bar/file-menu.jsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import styles from './menu-bar.css';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import fileIcon from './icon--file.svg';
+import {useIntl, FormattedMessage, defineMessage} from 'react-intl';
+import MenuBarMenu from './menu-bar-menu.jsx';
+import {MenuItem, MenuSection} from '../menu/menu.jsx';
+import SB3Downloader from '../../containers/sb3-downloader.jsx';
+import dropdownCaret from './dropdown-caret.svg';
+import useMenuNavigation from '../../hooks/use-menu-navigation.jsx';
+
+import sharedMessages from '../../lib/shared-messages';
+
+import {
+    manualUpdateProject,
+    remixProject,
+    saveProjectAsCopy
+} from '../../reducers/project-state';
+
+const fileMenu = defineMessage({
+    id: 'gui.aria.fileMenu',
+    defaultMessage: 'File menu',
+    description: 'accessibility label for file menu'
+});
+
+const FileMenu = ({
+    isRtl,
+    canSave,
+    canCreateCopy,
+    canRemix,
+    onClickNew,
+    onClickSave,
+    onClickSaveAsCopy,
+    onClickRemix,
+    onStartSelectingFileUpload,
+    getSaveToComputerHandler,
+    remixMessage
+}) => {
+    const intl = useIntl();
+
+    const {
+        menuRef,
+        isExpanded,
+        handleKeyDown,
+        handleKeyDownOpenMenu,
+        handleOnOpen,
+        handleOnClose
+    } = useMenuNavigation({
+        depth: 1
+    });
+
+    const saveNowMessage = (
+        <FormattedMessage
+            defaultMessage="Save now"
+            description="Menu bar item for saving now"
+            id="gui.menuBar.saveNow"
+        />
+    );
+    const createCopyMessage = (
+        <FormattedMessage
+            defaultMessage="Save as a copy"
+            description="Menu bar item for saving as a copy"
+            id="gui.menuBar.saveAsCopy"
+        />
+    );
+    const newProjectMessage = (
+        <FormattedMessage
+            defaultMessage="New"
+            description="Menu bar item for creating a new project"
+            id="gui.menuBar.new"
+        />
+    );
+
+    return (
+        <button
+            className={classNames(styles.menuBarItem, styles.hoverable, {
+                [styles.active]: isExpanded()
+            })}
+            onClick={handleOnOpen}
+            aria-label={intl.formatMessage(fileMenu)}
+            aria-expanded={isExpanded()}
+            ref={menuRef}
+            onKeyDown={handleKeyDown}
+        >
+            <img src={fileIcon} />
+            <span className={styles.collapsibleLabel}>
+                <FormattedMessage
+                    defaultMessage="File"
+                    description="Text for file dropdown menu"
+                    id="gui.menuBar.file"
+                />
+            </span>
+            <img src={dropdownCaret} />
+            <MenuBarMenu
+                className={classNames(styles.menuBarMenu)}
+                open={isExpanded()}
+                place={isRtl ? 'left' : 'right'}
+                onRequestClose={handleOnClose}
+            >
+                <MenuSection>
+                    <MenuItem
+                        isRtl={isRtl}
+                        onClick={onClickNew}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        {newProjectMessage}
+                    </MenuItem>
+                </MenuSection>
+                {(canSave || canCreateCopy || canRemix) && (
+                    <MenuSection>
+                        {canSave && (
+                            <MenuItem
+                                onClick={onClickSave}
+                                data-menu-item="true"
+                                onParentKeyPress={handleKeyDownOpenMenu}
+                            >
+                                {saveNowMessage}
+                            </MenuItem>
+                        )}
+                        {canCreateCopy && (
+                            <MenuItem
+                                onClick={onClickSaveAsCopy}
+                                data-menu-item="true"
+                                onParentKeyPress={handleKeyDownOpenMenu}
+                            >
+                                {createCopyMessage}
+                            </MenuItem>
+                        )}
+                        {canRemix && (
+                            <MenuItem
+                                onClick={onClickRemix}
+                                data-menu-item="true"
+                                onParentKeyPress={handleKeyDownOpenMenu}
+                            >
+                                {remixMessage}
+                            </MenuItem>
+                        )}
+                    </MenuSection>
+                )}
+                <MenuSection>
+                    <MenuItem
+                        onClick={onStartSelectingFileUpload}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        {intl.formatMessage(sharedMessages.loadFromComputerTitle)}
+                    </MenuItem>
+                    <SB3Downloader>{(className, downloadProjectCallback) => (
+                        <MenuItem
+                            className={className}
+                            onClick={getSaveToComputerHandler(downloadProjectCallback)}
+                            data-menu-item="true"
+                            onParentKeyPress={handleKeyDownOpenMenu}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Save to your computer"
+                                description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
+                                id="gui.menuBar.downloadToComputer"
+                            />
+                        </MenuItem>
+                    )}</SB3Downloader>
+                </MenuSection>
+            </MenuBarMenu>
+        </button>
+    );
+};
+
+FileMenu.propTypes = {
+    isRtl: PropTypes.bool,
+    canSave: PropTypes.bool.isRequired,
+    canCreateCopy: PropTypes.bool.isRequired,
+    canRemix: PropTypes.bool.isRequired,
+    onStartSelectingFileUpload: PropTypes.func.isRequired,
+    onClickSave: PropTypes.func,
+    onClickSaveAsCopy: PropTypes.func,
+    onClickRemix: PropTypes.func,
+    onClickNew: PropTypes.func.isRequired,
+    getSaveToComputerHandler: PropTypes.func.isRequired,
+    remixMessage: PropTypes.node
+};
+
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+const mapDispatchToProps = dispatch => ({
+    onClickRemix: () => dispatch(remixProject()),
+    onClickSave: () => dispatch(manualUpdateProject()),
+    onClickSaveAsCopy: () => dispatch(saveProjectAsCopy())
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(FileMenu);
diff --git a/packages/scratch-gui/src/components/menu-bar/language-menu.jsx b/packages/scratch-gui/src/components/menu-bar/language-menu.jsx
index 81402c317a..c78b7b1d30 100644
--- a/packages/scratch-gui/src/components/menu-bar/language-menu.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/language-menu.jsx
@@ -1,127 +1,145 @@
 import classNames from 'classnames';
-import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import React, {useCallback, useEffect, useRef} from 'react';
+import {useIntl, FormattedMessage, defineMessage} from 'react-intl';
 import {connect} from 'react-redux';
 import locales from 'scratch-l10n';
 
 import check from './check.svg';
 import {MenuItem, Submenu} from '../menu/menu.jsx';
 import languageIcon from '../language-selector/language-icon.svg';
-import {languageMenuOpen, openLanguageMenu} from '../../reducers/menus.js';
 import {selectLocale} from '../../reducers/locales.js';
+import useMenuNavigation from '../../hooks/use-menu-navigation.jsx';
 
 import styles from './settings-menu.css';
 
 import dropdownCaret from './dropdown-caret.svg';
 
-class LanguageMenu extends React.PureComponent {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'setRef',
-            'handleMouseOver'
-        ]);
-    }
+const languageMenu = defineMessage({
+    id: 'gui.aria.languageMenu',
+    defaultMessage: 'Language menu',
+    description: 'accessibility label for language menu'
+});
+
+const LanguageMenu = ({
+    currentLocale,
+    isRtl,
+    onChangeLanguage
+}) => {
+    const intl = useIntl();
+
+    const selectedRef = useRef(null);
 
-    componentDidUpdate (prevProps) {
-        // If the submenu has been toggled open, try scrolling the selected option into view.
-        if (!prevProps.menuOpen && this.props.menuOpen && this.selectedRef) {
-            this.selectedRef.scrollIntoView({block: 'center'});
+    const {
+        isExpanded,
+        handleKeyDown,
+        handleKeyDownOpenMenu,
+        handleOnOpen,
+        menuRef
+    } = useMenuNavigation({
+        depth: 2,
+        defaultIndexOnOpen: (Object.keys(locales).indexOf(currentLocale))
+    });
+
+    useEffect(() => {
+        if (isExpanded()) {
+            selectedRef.current.scrollIntoView({block: 'center'});
         }
-    }
+    }, [selectedRef, isExpanded]);
 
-    setRef (component) {
-        this.selectedRef = component;
-    }
+    const setRef = useCallback(component => {
+        selectedRef.current = component;
+    }, []);
 
-    handleMouseOver () {
+    const handleMouseOver = useCallback(() => {
         // If we are using hover rather than clicks for submenus, scroll the selected option into view
-        if (!this.props.menuOpen && this.selectedRef) {
-            this.selectedRef.scrollIntoView({block: 'center'});
+        if (isExpanded() && selectedRef.current) {
+            selectedRef.current.scrollIntoView({block: 'center'});
         }
-    }
+    }, [isExpanded]);
 
-    render () {
-        return (
-            <MenuItem
-                expanded={this.props.menuOpen}
+    return (
+        <MenuItem
+            expanded={isExpanded()}
+            data-menu-item-wrapper="true"
+        >
+            <button
+                className={styles.option}
+                onClick={handleOnOpen}
+                onMouseOver={handleMouseOver}
+                ref={menuRef}
+                aria-label={intl.formatMessage(languageMenu)}
+                aria-expanded={isExpanded()}
+                tabIndex={-1}
+                onKeyDown={handleKeyDown}
+                data-menu-item="true"
             >
-                <div
-                    className={styles.option}
-                    onClick={this.props.onRequestOpen}
-                    onMouseOver={this.handleMouseOver}
-                >
-                    <img
-                        className={styles.icon}
-                        src={languageIcon}
-                    />
-                    <span className={styles.submenuLabel}>
-                        <FormattedMessage
-                            defaultMessage="Language"
-                            description="Language sub-menu"
-                            id="gui.menuBar.language"
-                        />
-                    </span>
-                    <img
-                        className={styles.expandCaret}
-                        src={dropdownCaret}
+                <img
+                    className={styles.icon}
+                    src={languageIcon}
+                />
+                <span className={styles.submenuLabel}>
+                    <FormattedMessage
+                        defaultMessage="Language"
+                        description="Language sub-menu"
+                        id="gui.menuBar.language"
                     />
-                </div>
-                <Submenu
-                    className={styles.languageSubmenu}
-                    place={this.props.isRtl ? 'left' : 'right'}
-                >
-                    {
-                        Object.keys(locales)
-                            .map(locale => (
-                                <MenuItem
-                                    key={locale}
-                                    className={styles.languageMenuItem}
-                                    // eslint-disable-next-line react/jsx-no-bind
-                                    onClick={() => this.props.onChangeLanguage(locale)}
-                                >
-                                    <img
-                                        className={classNames(styles.check, {
-                                            [styles.selected]: this.props.currentLocale === locale
-                                        })}
-                                        src={check}
-                                        {...(this.props.currentLocale === locale && {ref: this.setRef})}
-                                    />
-                                    {locales[locale].name}
-                                </MenuItem>
-                            ))
-                    }
-                </Submenu>
-            </MenuItem>
-        );
-    }
-}
+                </span>
+                <img
+                    className={styles.expandCaret}
+                    src={dropdownCaret}
+                />
+            </button>
+            <Submenu
+                className={styles.languageSubmenu}
+                place={isRtl ? 'left' : 'right'}
+            >
+                {
+                    Object.keys(locales)
+                        .map(locale => {
+                            const isSelected = currentLocale === locale;
+
+                            return (<MenuItem
+                                key={locale}
+                                className={styles.languageMenuItem}
+                                // eslint-disable-next-line react/jsx-no-bind
+                                onClick={() => onChangeLanguage(locale)}
+                                data-menu-item="true"
+                                onParentKeyPress={handleKeyDownOpenMenu}
+                                isSelected={isSelected}
+                            >
+                                <img
+                                    className={classNames(styles.check, {
+                                        [styles.selected]: isSelected
+                                    })}
+                                    src={check}
+                                    {...(isSelected && {ref: setRef})}
+                                />
+                                {locales[locale].name}
+                            </MenuItem>);
+                        })
+                }
+            </Submenu>
+        </MenuItem>
+    );
+};
 
 LanguageMenu.propTypes = {
     currentLocale: PropTypes.string,
     isRtl: PropTypes.bool,
-    label: PropTypes.string,
-    menuOpen: PropTypes.bool,
-    onChangeLanguage: PropTypes.func,
-    onRequestCloseSettings: PropTypes.func,
-    onRequestOpen: PropTypes.func
+    onChangeLanguage: PropTypes.func
 };
 
 const mapStateToProps = state => ({
     currentLocale: state.locales.locale,
     isRtl: state.locales.isRtl,
-    menuOpen: languageMenuOpen(state),
     messagesByLocale: state.locales.messagesByLocale
 });
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
+const mapDispatchToProps = dispatch => ({
     onChangeLanguage: locale => {
         dispatch(selectLocale(locale));
-        ownProps.onRequestCloseSettings();
-    },
-    onRequestOpen: () => dispatch(openLanguageMenu())
+    }
 });
 
 export default connect(
diff --git a/packages/scratch-gui/src/components/menu-bar/menu-bar.css b/packages/scratch-gui/src/components/menu-bar/menu-bar.css
index 68063fcf47..7aa3610348 100644
--- a/packages/scratch-gui/src/components/menu-bar/menu-bar.css
+++ b/packages/scratch-gui/src/components/menu-bar/menu-bar.css
@@ -62,6 +62,12 @@
     align-items: center;
     white-space: nowrap;
     height: $menu-bar-height;
+
+    background: none;
+    border: none;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
 }
 
 .menu-bar-item.hoverable {
diff --git a/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx b/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
index 79b865abb4..076725e758 100644
--- a/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
@@ -18,17 +18,15 @@ import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import Divider from '../divider/divider.jsx';
 import SaveStatus from './save-status.jsx';
 import ProjectWatcher from '../../containers/project-watcher.jsx';
-import MenuBarMenu from './menu-bar-menu.jsx';
-import {MenuItem, MenuSection} from '../menu/menu.jsx';
 import ProjectTitleInput from './project-title-input.jsx';
 import AuthorInfo from './author-info.jsx';
-import AccountNav from '../../components/menu-bar/account-nav.jsx';
 import LoginDropdown from './login-dropdown.jsx';
-import SB3Downloader from '../../containers/sb3-downloader.jsx';
-import DeletionRestorer from '../../containers/deletion-restorer.jsx';
-import TurboMode from '../../containers/turbo-mode.jsx';
 import MenuBarHOC from '../../containers/menu-bar-hoc.jsx';
 import SettingsMenu from './settings-menu.jsx';
+import FileMenu from './file-menu.jsx';
+import EditMenu from './edit-menu.jsx';
+import ModeMenu from './mode-menu.jsx';
+import AboutMenu from './about-menu.jsx';
 
 import {openTipsLibrary, openDebugModal} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
@@ -44,33 +42,12 @@ import {
     autoUpdateProject,
     getIsUpdating,
     getIsShowingProject,
-    manualUpdateProject,
-    requestNewProject,
-    remixProject,
-    saveProjectAsCopy
+    requestNewProject
 } from '../../reducers/project-state';
 import {
-    openAboutMenu,
-    closeAboutMenu,
-    aboutMenuOpen,
-    openAccountMenu,
-    closeAccountMenu,
-    accountMenuOpen,
-    openFileMenu,
-    closeFileMenu,
-    fileMenuOpen,
-    openEditMenu,
-    closeEditMenu,
-    editMenuOpen,
     openLoginMenu,
     closeLoginMenu,
-    loginMenuOpen,
-    openModeMenu,
-    closeModeMenu,
-    modeMenuOpen,
-    settingsMenuOpen,
-    openSettingsMenu,
-    closeSettingsMenu
+    loginMenuOpen
 } from '../../reducers/menus';
 
 import collectMetadata from '../../lib/collect-metadata';
@@ -83,9 +60,6 @@ import mystuffIcon from './icon--mystuff.png';
 import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
-import aboutIcon from './icon--about.svg';
-import fileIcon from './icon--file.svg';
-import editIcon from './icon--edit.svg';
 import debugIcon from '../debug-modal/icons/icon--debug.svg';
 
 import scratchLogo from './scratch-logo.svg';
@@ -98,6 +72,7 @@ import oldtimeyLogo from './oldtimey-logo.svg';
 import sharedMessages from '../../lib/shared-messages';
 
 import {AccountMenuOptionsPropTypes} from '../../lib/account-menu-options';
+import AccountMenu from './account-menu.jsx';
 
 const ariaMessages = defineMessages({
     tutorials: {
@@ -109,6 +84,11 @@ const ariaMessages = defineMessages({
         id: 'gui.menuBar.debug',
         defaultMessage: 'Debug',
         description: 'accessibility text for the debug button'
+    },
+    home: {
+        id: 'gui.menuBar.home',
+        defaultMessage: 'Home',
+        description: 'accessibility text for the home button'
     }
 });
 
@@ -140,7 +120,6 @@ const MenuBarItemTooltip = ({
     );
 };
 
-
 MenuBarItemTooltip.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
@@ -168,27 +147,11 @@ MenuItemTooltip.propTypes = {
     isRtl: PropTypes.bool
 };
 
-const AboutButton = props => (
-    <Button
-        className={classNames(styles.menuBarItem, styles.hoverable)}
-        iconClassName={styles.aboutIcon}
-        iconSrc={aboutIcon}
-        onClick={props.onClick}
-    />
-);
-
-AboutButton.propTypes = {
-    onClick: PropTypes.func.isRequired
-};
-
 class MenuBar extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
             'handleClickNew',
-            'handleClickRemix',
-            'handleClickSave',
-            'handleClickSaveAsCopy',
             'handleClickSeeCommunity',
             'handleClickShare',
             'handleSetMode',
@@ -213,23 +176,9 @@ class MenuBar extends React.Component {
         const readyToReplaceProject = this.props.confirmReadyToReplaceProject(
             this.props.intl.formatMessage(sharedMessages.replaceProjectWarning)
         );
-        this.props.onRequestCloseFile();
         if (readyToReplaceProject) {
             this.props.onClickNew(this.props.canSave && this.props.canCreateNew);
         }
-        this.props.onRequestCloseFile();
-    }
-    handleClickRemix () {
-        this.props.onClickRemix();
-        this.props.onRequestCloseFile();
-    }
-    handleClickSave () {
-        this.props.onClickSave();
-        this.props.onRequestCloseFile();
-    }
-    handleClickSaveAsCopy () {
-        this.props.onClickSaveAsCopy();
-        this.props.onRequestCloseFile();
     }
     handleClickSeeCommunity (waitForUpdate) {
         if (this.props.shouldSaveBeforeTransition()) {
@@ -285,7 +234,6 @@ class MenuBar extends React.Component {
     handleRestoreOption (restoreFun) {
         return () => {
             restoreFun();
-            this.props.onRequestCloseEdit();
         };
     }
     handleKeyPress (event) {
@@ -297,7 +245,6 @@ class MenuBar extends React.Component {
     }
     getSaveToComputerHandler (downloadProjectCallback) {
         return () => {
-            this.props.onRequestCloseFile();
             downloadProjectCallback();
             if (this.props.onProjectTelemetryEvent) {
                 const metadata = collectMetadata(this.props.vm, this.props.projectTitle, this.props.locale);
@@ -334,71 +281,7 @@ class MenuBar extends React.Component {
         }
         }
     }
-    buildAboutMenu (onClickAbout) {
-        if (!onClickAbout) {
-            // hide the button
-            return null;
-        }
-        if (typeof onClickAbout === 'function') {
-            // make a button which calls a function
-            return <AboutButton onClick={onClickAbout} />;
-        }
-        // assume it's an array of objects
-        // each item must have a 'title' FormattedMessage and a 'handleClick' function
-        // generate a menu with items for each object in the array
-        return (
-            <div
-                className={classNames(styles.menuBarItem, styles.hoverable, {
-                    [styles.active]: this.props.aboutMenuOpen
-                })}
-                onClick={this.props.onRequestOpenAbout}
-            >
-                <img
-                    className={styles.aboutIcon}
-                    src={aboutIcon}
-                />
-                <MenuBarMenu
-                    className={classNames(styles.menuBarMenu)}
-                    open={this.props.aboutMenuOpen}
-                    place={this.props.isRtl ? 'right' : 'left'}
-                    onRequestClose={this.props.onRequestCloseAbout}
-                >
-                    {
-                        onClickAbout.map(itemProps => (
-                            <MenuItem
-                                key={itemProps.title}
-                                isRtl={this.props.isRtl}
-                                onClick={this.wrapAboutMenuCallback(itemProps.onClick)}
-                            >
-                                {itemProps.title}
-                            </MenuItem>
-                        ))
-                    }
-                </MenuBarMenu>
-            </div>
-        );
-    }
-    wrapAboutMenuCallback (callback) {
-        return () => {
-            callback();
-            this.props.onRequestCloseAbout();
-        };
-    }
     render () {
-        const saveNowMessage = (
-            <FormattedMessage
-                defaultMessage="Save now"
-                description="Menu bar item for saving now"
-                id="gui.menuBar.saveNow"
-            />
-        );
-        const createCopyMessage = (
-            <FormattedMessage
-                defaultMessage="Save as a copy"
-                description="Menu bar item for saving as a copy"
-                id="gui.menuBar.saveAsCopy"
-            />
-        );
         const remixMessage = (
             <FormattedMessage
                 defaultMessage="Remix"
@@ -406,13 +289,6 @@ class MenuBar extends React.Component {
                 id="gui.menuBar.remix"
             />
         );
-        const newProjectMessage = (
-            <FormattedMessage
-                defaultMessage="New"
-                description="Menu bar item for creating a new project"
-                id="gui.menuBar.new"
-            />
-        );
         const remixButton = (
             <Button
                 className={classNames(
@@ -421,13 +297,11 @@ class MenuBar extends React.Component {
                 )}
                 iconClassName={styles.remixButtonIcon}
                 iconSrc={remixIcon}
-                onClick={this.handleClickRemix}
+                onClick={this.props.onClickRemix}
             >
                 {remixMessage}
             </Button>
         );
-        // Show the About button only if we have a handler for it (like in the desktop app)
-        const aboutButton = this.buildAboutMenu(this.props.onClickAbout);
 
         const menuOpts = this.props.accountMenuOptions;
 
@@ -445,6 +319,9 @@ class MenuBar extends React.Component {
                     <div className={styles.fileGroup}>
                         <div className={classNames(styles.menuBarItem)}>
                             <img
+                                role="button"
+                                aria-label={this.props.intl.formatMessage(ariaMessages.home)}
+                                tabIndex={0}
                                 id="logo_img"
                                 alt="Scratch"
                                 className={classNames(styles.scratchLogo, {
@@ -457,184 +334,41 @@ class MenuBar extends React.Component {
                         </div>
                         {(this.props.canChangeColorMode || this.props.canChangeLanguage || this.props.canChangeTheme) &&
                         (<SettingsMenu
+                            depth={1}
                             canChangeLanguage={this.props.canChangeLanguage}
                             canChangeColorMode={this.props.canChangeColorMode}
                             canChangeTheme={this.props.canChangeTheme}
                             hasActiveMembership={this.props.hasActiveMembership}
                             isRtl={this.props.isRtl}
-                            onRequestClose={this.props.onRequestCloseSettings}
-                            onRequestOpen={this.props.onClickSettings}
-                            settingsMenuOpen={this.props.settingsMenuOpen}
                         />)}
-                        {(this.props.canManageFiles) && (
-                            <div
-                                className={classNames(styles.menuBarItem, styles.hoverable, {
-                                    [styles.active]: this.props.fileMenuOpen
-                                })}
-                                onClick={this.props.onClickFile}
-                            >
-                                <img src={fileIcon} />
-                                <span className={styles.collapsibleLabel}>
-                                    <FormattedMessage
-                                        defaultMessage="File"
-                                        description="Text for file dropdown menu"
-                                        id="gui.menuBar.file"
-                                    />
-                                </span>
-                                <img src={dropdownCaret} />
-                                <MenuBarMenu
-                                    className={classNames(styles.menuBarMenu)}
-                                    open={this.props.fileMenuOpen}
-                                    place={this.props.isRtl ? 'left' : 'right'}
-                                    onRequestClose={this.props.onRequestCloseFile}
-                                >
-                                    <MenuSection>
-                                        <MenuItem
-                                            isRtl={this.props.isRtl}
-                                            onClick={this.handleClickNew}
-                                        >
-                                            {newProjectMessage}
-                                        </MenuItem>
-                                    </MenuSection>
-                                    {(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
-                                        <MenuSection>
-                                            {this.props.canSave && (
-                                                <MenuItem onClick={this.handleClickSave}>
-                                                    {saveNowMessage}
-                                                </MenuItem>
-                                            )}
-                                            {this.props.canCreateCopy && (
-                                                <MenuItem onClick={this.handleClickSaveAsCopy}>
-                                                    {createCopyMessage}
-                                                </MenuItem>
-                                            )}
-                                            {this.props.canRemix && (
-                                                <MenuItem onClick={this.handleClickRemix}>
-                                                    {remixMessage}
-                                                </MenuItem>
-                                            )}
-                                        </MenuSection>
-                                    )}
-                                    <MenuSection>
-                                        <MenuItem
-                                            onClick={this.props.onStartSelectingFileUpload}
-                                        >
-                                            {this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
-                                        </MenuItem>
-                                        <SB3Downloader>{(className, downloadProjectCallback) => (
-                                            <MenuItem
-                                                className={className}
-                                                onClick={this.getSaveToComputerHandler(downloadProjectCallback)}
-                                            >
-                                                <FormattedMessage
-                                                    defaultMessage="Save to your computer"
-                                                    description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
-                                                    id="gui.menuBar.downloadToComputer"
-                                                />
-                                            </MenuItem>
-                                        )}</SB3Downloader>
-                                    </MenuSection>
-                                </MenuBarMenu>
-                            </div>
-                        )}
-                        <div
-                            className={classNames(styles.menuBarItem, styles.hoverable, {
-                                [styles.active]: this.props.editMenuOpen
-                            })}
-                            onClick={this.props.onClickEdit}
-                        >
-                            <img src={editIcon} />
-                            <span className={styles.collapsibleLabel}>
-                                <FormattedMessage
-                                    defaultMessage="Edit"
-                                    description="Text for edit dropdown menu"
-                                    id="gui.menuBar.edit"
-                                />
-                            </span>
-                            <img src={dropdownCaret} />
-                            <MenuBarMenu
-                                className={classNames(styles.menuBarMenu)}
-                                open={this.props.editMenuOpen}
-                                place={this.props.isRtl ? 'left' : 'right'}
-                                onRequestClose={this.props.onRequestCloseEdit}
-                            >
-                                <DeletionRestorer>{(handleRestore, {restorable, deletedItem}) => (
-                                    <MenuItem
-                                        className={classNames({[styles.disabled]: !restorable})}
-                                        onClick={this.handleRestoreOption(handleRestore)}
-                                    >
-                                        {this.restoreOptionMessage(deletedItem)}
-                                    </MenuItem>
-                                )}</DeletionRestorer>
-                                <MenuSection>
-                                    <TurboMode>{(toggleTurboMode, {turboMode}) => (
-                                        <MenuItem onClick={toggleTurboMode}>
-                                            {turboMode ? (
-                                                <FormattedMessage
-                                                    defaultMessage="Turn off Turbo Mode"
-                                                    description="Menu bar item for turning off turbo mode"
-                                                    id="gui.menuBar.turboModeOff"
-                                                />
-                                            ) : (
-                                                <FormattedMessage
-                                                    defaultMessage="Turn on Turbo Mode"
-                                                    description="Menu bar item for turning on turbo mode"
-                                                    id="gui.menuBar.turboModeOn"
-                                                />
-                                            )}
-                                        </MenuItem>
-                                    )}</TurboMode>
-                                </MenuSection>
-                            </MenuBarMenu>
-
-                        </div>
-                        {this.props.isTotallyNormal && (
-                            <div
-                                className={classNames(styles.menuBarItem, styles.hoverable, {
-                                    [styles.active]: this.props.modeMenuOpen
-                                })}
-                                onClick={this.props.onClickMode}
-                            >
-                                <div className={classNames(styles.editMenu)}>
-                                    <FormattedMessage
-                                        defaultMessage="Mode"
-                                        description="Mode menu item in the menu bar"
-                                        id="gui.menuBar.modeMenu"
-                                    />
-                                </div>
-                                <MenuBarMenu
-                                    className={classNames(styles.menuBarMenu)}
-                                    open={this.props.modeMenuOpen}
-                                    place={this.props.isRtl ? 'left' : 'right'}
-                                    onRequestClose={this.props.onRequestCloseMode}
-                                >
-                                    <MenuSection>
-                                        <MenuItem onClick={this.handleSetMode('NOW')}>
-                                            <span className={classNames({[styles.inactive]: !this.props.modeNow})}>
-                                                {'✓'}
-                                            </span>
-                                            {' '}
-                                            <FormattedMessage
-                                                defaultMessage="Normal mode"
-                                                description="April fools: resets editor to not have any pranks"
-                                                id="gui.menuBar.normalMode"
-                                            />
-                                        </MenuItem>
-                                        <MenuItem onClick={this.handleSetMode('2020')}>
-                                            <span className={classNames({[styles.inactive]: !this.props.mode2020})}>
-                                                {'✓'}
-                                            </span>
-                                            {' '}
-                                            <FormattedMessage
-                                                defaultMessage="Caturday mode"
-                                                description="April fools: Cat blocks mode"
-                                                id="gui.menuBar.caturdayMode"
-                                            />
-                                        </MenuItem>
-                                    </MenuSection>
-                                </MenuBarMenu>
-                            </div>
-                        )}
+                        {(this.props.canManageFiles) && (<FileMenu
+                            depth={1}
+                            onStartSelectingFileUpload={this.props.onStartSelectingFileUpload}
+                            onClickNew={this.handleClickNew}
+                            onClickRemix={this.props.onClickRemix}
+                            onClickSave={this.props.onClickSave}
+                            onClickSaveAsCopy={this.props.onClickSaveAsCopy}
+                            getSaveToComputerHandler={this.getSaveToComputerHandler}
+                            canSave={this.props.canSave}
+                            canCreateCopy={this.props.canCreateCopy}
+                            canRemix={this.props.canRemix}
+                            intl={this.props.intl}
+                            isRtl={this.props.isRtl}
+                            remixMessage={remixMessage}
+                        />)}
+                        <EditMenu
+                            depth={1}
+                            isRtl={this.props.isRtl}
+                            onRestoreOption={this.handleRestoreOption}
+                            restoreOptionMessage={this.restoreOptionMessage}
+                        />
+                        {this.props.isTotallyNormal && (<ModeMenu
+                            depth={1}
+                            onSetMode={this.handleSetMode}
+                            modeNow={this.props.modeNow}
+                            mode2020={this.props.mode2020}
+                            isRtl={this.props.isRtl}
+                        />)}
                     </div>
                     {this.props.canEditTitle ? (
                         <div className={classNames(styles.menuBarItem, styles.growable)}>
@@ -711,7 +445,7 @@ class MenuBar extends React.Component {
                     </div>
                     <Divider className={classNames(styles.divider)} />
                     <div className={styles.fileGroup}>
-                        <div
+                        <button
                             aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
                             className={
                                 classNames(styles.menuBarItem, styles.noOffset, styles.hoverable, 'tutorials-button')
@@ -725,8 +459,8 @@ class MenuBar extends React.Component {
                             <span className={styles.tutorialsLabel}>
                                 <FormattedMessage {...ariaMessages.tutorials} />
                             </span>
-                        </div>
-                        <div
+                        </button>
+                        <button
                             aria-label={this.props.intl.formatMessage(ariaMessages.debug)}
                             className={classNames(styles.menuBarItem, styles.noOffset, styles.hoverable)}
                             onClick={this.props.onOpenDebugModal}
@@ -738,7 +472,7 @@ class MenuBar extends React.Component {
                             <span className={styles.debugLabel}>
                                 <FormattedMessage {...ariaMessages.debug} />
                             </span>
-                        </div>
+                        </button>
                     </div>
                 </div>
 
@@ -772,31 +506,12 @@ class MenuBar extends React.Component {
                                     </a>
                                 ) : null}
 
-                                <AccountNav
-                                    className={classNames(
-                                        styles.menuBarItem,
-                                        styles.hoverable,
-                                        {[styles.active]: this.props.accountMenuOpen}
-                                    )}
-
-                                    isOpen={this.props.accountMenuOpen}
-                                    isRtl={this.props.isRtl}
-
-                                    menuBarMenuClassName={classNames(styles.menuBarMenu)}
-
-                                    onClick={this.props.onClickAccount}
-                                    onClose={this.props.onRequestCloseAccount}
-                                    onLogOut={menuOpts.canLogout ? this.props.onLogOut : null}
-
+                                <AccountMenu
+                                    menuOpts={menuOpts}
                                     username={this.props.username}
+                                    isRtl={this.props.isRtl}
+                                    onLogOut={this.props.onLogOut}
                                     avatarBadge={this.props.avatarBadge}
-
-                                    avatarUrl={menuOpts.avatarUrl}
-                                    myStuffUrl={menuOpts.myStuffUrl}
-                                    profileUrl={menuOpts.profileUrl}
-                                    myClassesUrl={menuOpts.myClassesUrl}
-                                    myClassUrl={menuOpts.myClassUrl}
-                                    accountSettingsUrl={menuOpts.accountSettingsUrl}
                                 />
                             </React.Fragment>
                         ) : (
@@ -804,7 +519,7 @@ class MenuBar extends React.Component {
                             // ********* so they can choose to log in
                             <React.Fragment>
                                 {menuOpts.canRegister ? (
-                                    <div
+                                    <button
                                         className={classNames(
                                             styles.menuBarItem,
                                             styles.hoverable
@@ -817,11 +532,11 @@ class MenuBar extends React.Component {
                                             description="Link for creating a Scratch account"
                                             id="gui.menuBar.joinScratch"
                                         />
-                                    </div>
+                                    </button>
                                 ) : null}
 
                                 {menuOpts.canLogin ? (
-                                    <div
+                                    <button
                                         className={classNames(
                                             styles.menuBarItem,
                                             styles.hoverable
@@ -842,7 +557,7 @@ class MenuBar extends React.Component {
                                             renderLogin={this.props.renderLogin}
                                             onClose={this.props.onRequestCloseLogin}
                                         />
-                                    </div>
+                                    </button>
                                 ) : null}
                             </React.Fragment>
                         )
@@ -895,14 +610,18 @@ class MenuBar extends React.Component {
                     )}
                 </div>
 
-                {aboutButton}
+                {this.props.onClickAbout && (
+                    <AboutMenu
+                        onClick={this.props.onClickAbout}
+                        isRtl={this.props.isRtl}
+                    />
+                )}
             </Box>
         );
     }
 }
 
 MenuBar.propTypes = {
-    aboutMenuOpen: PropTypes.bool,
     accountMenuOpen: PropTypes.bool,
     ariaLabel: PropTypes.string,
     ariaRole: PropTypes.string,
@@ -924,9 +643,7 @@ MenuBar.propTypes = {
     className: PropTypes.string,
     confirmReadyToReplaceProject: PropTypes.func,
     currentLocale: PropTypes.string.isRequired,
-    editMenuOpen: PropTypes.bool,
     enableCommunity: PropTypes.bool,
-    fileMenuOpen: PropTypes.bool,
     hasActiveMembership: PropTypes.bool,
     intl: intlShape,
     isRtl: PropTypes.bool,
@@ -941,7 +658,6 @@ MenuBar.propTypes = {
     mode1990: PropTypes.bool,
     mode2020: PropTypes.bool,
     mode220022BC: PropTypes.bool,
-    modeMenuOpen: PropTypes.bool,
     modeNow: PropTypes.bool,
     onClickAbout: PropTypes.oneOfType([
         PropTypes.func, // button mode: call this callback when the About button is clicked
@@ -952,9 +668,6 @@ MenuBar.propTypes = {
             })
         )
     ]),
-    onClickAccount: PropTypes.func,
-    onClickEdit: PropTypes.func,
-    onClickFile: PropTypes.func,
     onClickLogin: PropTypes.func,
     onClickLogo: PropTypes.func,
     onClickMode: PropTypes.func,
@@ -962,20 +675,12 @@ MenuBar.propTypes = {
     onClickRemix: PropTypes.func,
     onClickSave: PropTypes.func,
     onClickSaveAsCopy: PropTypes.func,
-    onClickSettings: PropTypes.func,
     onLogOut: PropTypes.func,
     onOpenRegistration: PropTypes.func,
     onOpenTipLibrary: PropTypes.func,
     onOpenDebugModal: PropTypes.func,
     onProjectTelemetryEvent: PropTypes.func,
-    onRequestCloseAbout: PropTypes.func,
-    onRequestCloseAccount: PropTypes.func,
-    onRequestCloseEdit: PropTypes.func,
-    onRequestCloseFile: PropTypes.func,
     onRequestCloseLogin: PropTypes.func,
-    onRequestCloseMode: PropTypes.func,
-    onRequestCloseSettings: PropTypes.func,
-    onRequestOpenAbout: PropTypes.func,
     onSeeCommunity: PropTypes.func,
     onSetTimeTravelMode: PropTypes.func,
     onShare: PropTypes.func,
@@ -984,7 +689,6 @@ MenuBar.propTypes = {
     platform: PropTypes.oneOf(Object.keys(PLATFORM)),
     projectTitle: PropTypes.string,
     renderLogin: PropTypes.func,
-    settingsMenuOpen: PropTypes.bool,
     shouldSaveBeforeTransition: PropTypes.func,
     showComingSoon: PropTypes.bool,
     username: PropTypes.string,
@@ -1008,19 +712,13 @@ const mapStateToProps = (state, ownProps) => {
     const sessionExists = state.session && typeof state.session.session !== 'undefined';
 
     return {
-        aboutMenuOpen: aboutMenuOpen(state),
-        accountMenuOpen: accountMenuOpen(state),
         currentLocale: state.locales.locale,
-        fileMenuOpen: fileMenuOpen(state),
-        editMenuOpen: editMenuOpen(state),
         isRtl: state.locales.isRtl,
         isUpdating: getIsUpdating(loadingState),
         isShowingProject: getIsShowingProject(loadingState),
         locale: state.locales.locale,
         loginMenuOpen: loginMenuOpen(state),
-        modeMenuOpen: modeMenuOpen(state),
         projectTitle: state.scratchGui.projectTitle,
-        settingsMenuOpen: settingsMenuOpen(state),
         username: ownProps.username ?? (user ? user.username : null),
         avatarBadge: user ? user.membership_avatar_badge : null,
         userIsEducator: permissions && permissions.educator,
@@ -1058,24 +756,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     autoUpdateProject: () => dispatch(autoUpdateProject()),
     onOpenTipLibrary: () => dispatch(openTipsLibrary()),
     onOpenDebugModal: () => dispatch(openDebugModal()),
-    onClickAccount: () => dispatch(openAccountMenu()),
-    onRequestCloseAccount: () => dispatch(closeAccountMenu()),
-    onClickFile: () => dispatch(openFileMenu()),
-    onRequestCloseFile: () => dispatch(closeFileMenu()),
-    onClickEdit: () => dispatch(openEditMenu()),
-    onRequestCloseEdit: () => dispatch(closeEditMenu()),
+    onClickNew: needSave => dispatch(requestNewProject(needSave)),
     onClickLogin: ownProps.onClickLogin ?? (() => dispatch(openLoginMenu())),
     onRequestCloseLogin: () => dispatch(closeLoginMenu()),
-    onClickMode: () => dispatch(openModeMenu()),
-    onRequestCloseMode: () => dispatch(closeModeMenu()),
-    onRequestOpenAbout: () => dispatch(openAboutMenu()),
-    onRequestCloseAbout: () => dispatch(closeAboutMenu()),
-    onClickSettings: () => dispatch(openSettingsMenu()),
-    onRequestCloseSettings: () => dispatch(closeSettingsMenu()),
-    onClickNew: needSave => dispatch(requestNewProject(needSave)),
-    onClickRemix: () => dispatch(remixProject()),
-    onClickSave: () => dispatch(manualUpdateProject()),
-    onClickSaveAsCopy: () => dispatch(saveProjectAsCopy()),
     onSeeCommunity: ownProps.onSeeCommunity ?? (() => dispatch(setPlayer(true))),
     onSetTimeTravelMode: mode => dispatch(setTimeTravel(mode))
 });
diff --git a/packages/scratch-gui/src/components/menu-bar/mode-menu.jsx b/packages/scratch-gui/src/components/menu-bar/mode-menu.jsx
new file mode 100644
index 0000000000..008dfa3446
--- /dev/null
+++ b/packages/scratch-gui/src/components/menu-bar/mode-menu.jsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import styles from './menu-bar.css';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import {useIntl, FormattedMessage, defineMessage} from 'react-intl';
+import MenuBarMenu from './menu-bar-menu.jsx';
+import {MenuItem, MenuSection} from '../menu/menu.jsx';
+import useMenuNavigation from '../../hooks/use-menu-navigation.jsx';
+
+const EditorModes = {
+    NOW: 'NOW',
+    MODE_2020: '2020'
+};
+
+const modeMenu = defineMessage({
+    id: 'gui.aria.modeMenu',
+    defaultMessage: 'Mode menu',
+    description: 'accessibility label for mode menu'
+});
+
+const ModeMenu = ({
+    isRtl,
+    mode2020,
+    modeNow,
+    onSetMode
+}) => {
+    const intl = useIntl();
+
+    const {
+        isExpanded,
+        handleOnOpen,
+        handleOnClose,
+        handleKeyDown,
+        handleKeyDownOpenMenu,
+        menuRef
+    } = useMenuNavigation({
+        depth: 1
+    });
+
+    return (
+        <button
+            className={classNames(styles.menuBarItem, styles.hoverable, {
+                [styles.active]: isExpanded()
+            })}
+            onClick={handleOnOpen}
+            ref={menuRef}
+            aria-label={intl.formatMessage(modeMenu)}
+            aria-expanded={isExpanded()}
+            onKeyDown={handleKeyDown}
+        >
+            <div className={classNames(styles.editMenu)}>
+                <FormattedMessage
+                    defaultMessage="Mode"
+                    description="Mode menu item in the menu bar"
+                    id="gui.menuBar.modeMenu"
+                />
+            </div>
+            <MenuBarMenu
+                className={classNames(styles.menuBarMenu)}
+                open={isExpanded()}
+                place={isRtl ? 'left' : 'right'}
+                onRequestClose={handleOnClose}
+            >
+                <MenuSection>
+                    <MenuItem
+                        onClick={onSetMode(EditorModes.NOW)}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        <span className={classNames({[styles.inactive]: !modeNow})}>
+                            {'✓'}
+                        </span>
+                        {' '}
+                        <FormattedMessage
+                            defaultMessage="Normal mode"
+                            description="April fools: resets editor to not have any pranks"
+                            id="gui.menuBar.normalMode"
+                        />
+                    </MenuItem>
+                    <MenuItem
+                        onClick={onSetMode(EditorModes.MODE_2020)}
+                        data-menu-item="true"
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                    >
+                        <span className={classNames({[styles.inactive]: !mode2020})}>
+                            {'✓'}
+                        </span>
+                        {' '}
+                        <FormattedMessage
+                            defaultMessage="Caturday mode"
+                            description="April fools: Cat blocks mode"
+                            id="gui.menuBar.caturdayMode"
+                        />
+                    </MenuItem>
+                </MenuSection>
+            </MenuBarMenu>
+        </button>
+    );
+};
+
+ModeMenu.propTypes = {
+    onSetMode: PropTypes.func.isRequired,
+    modeNow: PropTypes.bool.isRequired,
+    mode2020: PropTypes.bool.isRequired,
+    isRtl: PropTypes.bool
+};
+
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+export default connect(
+    mapStateToProps
+)(ModeMenu);
diff --git a/packages/scratch-gui/src/components/menu-bar/preference-menu.jsx b/packages/scratch-gui/src/components/menu-bar/preference-menu.jsx
index b1a863e44c..c45cee644c 100644
--- a/packages/scratch-gui/src/components/menu-bar/preference-menu.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/preference-menu.jsx
@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {connect} from 'react-redux';
+import useMenuNavigation from '../../hooks/use-menu-navigation.jsx';
 
 import check from './check.svg';
 import {MenuItem, Submenu} from '../menu/menu.jsx';
@@ -21,7 +22,12 @@ const PreferenceItem = props => {
     const item = props.item;
 
     return (
-        <MenuItem onClick={props.onClick}>
+        <MenuItem
+            onClick={props.onClick}
+            onParentKeyPress={props.onParentKeyPress}
+            isSelected={props.isSelected}
+            {...props}
+        >
             <div className={styles.option}>
                 <img
                     className={classNames(styles.check, {[styles.selected]: props.isSelected})}
@@ -42,26 +48,44 @@ PreferenceItem.propTypes = {
     item: PropTypes.shape({
         icon: PropTypes.string,
         label: intlMessageShape.isRequired
-    })
+    }),
+    onParentKeyPress: PropTypes.func
 };
 
 const PreferenceMenu = ({
     itemsMap,
-    open,
     onChange,
-    onRequestOpen,
     defaultMenuIconSrc,
     submenuLabel,
     selectedItemKey,
     isRtl
 }) => {
-    const itemKeys = useMemo(() => Object.keys(itemsMap), [itemsMap]);
-    const selectedItem = useMemo(() => itemsMap[selectedItemKey], [itemsMap, selectedItemKey]);
+    const itemKeys = Object.keys(itemsMap);
+    const selectedItem = itemsMap[selectedItemKey];
+
+    const {
+        isExpanded,
+        handleKeyDown,
+        handleKeyDownOpenMenu,
+        handleOnOpen,
+        menuRef
+    } = useMenuNavigation({
+        depth: 2
+    });
+
     return (
-        <MenuItem expanded={open}>
-            <div
+        <MenuItem
+            expanded={isExpanded()}
+            data-menu-item-wrapper="true"
+        >
+            <button
                 className={styles.option}
-                onClick={onRequestOpen}
+                onClick={handleOnOpen}
+                ref={menuRef}
+                aria-expanded={isExpanded()}
+                tabIndex={-1}
+                onKeyDown={handleKeyDown}
+                data-menu-item="true"
             >
                 <img
                     src={selectedItem.icon || defaultMenuIconSrc}
@@ -74,10 +98,12 @@ const PreferenceMenu = ({
                     className={styles.expandCaret}
                     src={dropdownCaret}
                 />
-            </div>
+            </button>
             <Submenu place={isRtl ? 'left' : 'right'}>
                 {itemKeys.map(itemKey => (
                     <PreferenceItem
+                        onParentKeyPress={handleKeyDownOpenMenu}
+                        data-menu-item="true"
                         key={itemKey}
                         isSelected={itemKey === selectedItemKey}
                         // eslint-disable-next-line react/jsx-no-bind
@@ -95,10 +121,7 @@ PreferenceMenu.propTypes = {
         icon: PropTypes.string,
         label: intlMessageShape.isRequired
     })).isRequired,
-    open: PropTypes.bool,
     onChange: PropTypes.func,
-    onRequestCloseSettings: PropTypes.func,
-    onRequestOpen: PropTypes.func,
     defaultMenuIconSrc: PropTypes.string,
     submenuLabel: intlMessageShape.isRequired,
     selectedItemKey: PropTypes.string,
diff --git a/packages/scratch-gui/src/components/menu-bar/settings-menu.css b/packages/scratch-gui/src/components/menu-bar/settings-menu.css
index 7d09671776..50921143b8 100644
--- a/packages/scratch-gui/src/components/menu-bar/settings-menu.css
+++ b/packages/scratch-gui/src/components/menu-bar/settings-menu.css
@@ -10,7 +10,17 @@
 .option {
     display: flex;
     align-items: center;
-    gap: .5rem;
+    gap: 0.5rem;
+
+    width: 100%;
+    padding: 0;
+
+    background: inherit;
+    border: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    color: inherit;
 }
 
 .check {
diff --git a/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx b/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx
index 2728762707..ad423c2042 100644
--- a/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx
@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {useIntl, FormattedMessage, defineMessage} from 'react-intl';
 import {connect} from 'react-redux';
+import useMenuNavigation from '../../hooks/use-menu-navigation.jsx';
 
 import LanguageMenu from './language-menu.jsx';
 import MenuBarMenu from './menu-bar-menu.jsx';
@@ -21,7 +22,12 @@ import styles from './settings-menu.css';
 import dropdownCaret from './dropdown-caret.svg';
 import settingsIcon from './icon--settings.svg';
 import themeIcon from '../../lib/assets/icon--theme.svg';
-import {colorModeMenuOpen, themeMenuOpen, openColorModeMenu, openThemeMenu} from '../../reducers/menus.js';
+
+const settingsMenuAriaMessage = defineMessage({
+    id: 'gui.aria.settingsMenu',
+    defaultMessage: 'Settings menu',
+    description: 'accessibility label for settings menu'
+});
 
 const enabledColorModes = [DEFAULT_MODE, HIGH_CONTRAST_MODE];
 
@@ -31,18 +37,13 @@ const SettingsMenu = ({
     canChangeTheme,
     hasActiveMembership,
     isRtl,
-    isColorModeMenuOpen,
-    isThemeMenuOpen,
     activeColorMode,
     onChangeColorMode,
-    onRequestOpenColorMode,
-    onRequestOpenTheme,
     activeTheme,
-    onChangeTheme,
-    onRequestClose,
-    onRequestOpen,
-    settingsMenuOpen
+    onChangeTheme
 }) => {
+    const intl = useIntl();
+
     const enabledColorModesMap = useMemo(() => Object.keys(colorModeMap).reduce((acc, colorMode) => {
         if (enabledColorModes.includes(colorMode)) {
             acc[colorMode] = colorModeMap[colorMode];
@@ -58,111 +59,98 @@ const SettingsMenu = ({
     }, {}), [hasActiveMembership]);
     const availableThemesLength = useMemo(() => Object.keys(availableThemesMap).length, [availableThemesMap]);
 
-    return (
-        <div
-            className={classNames(menuBarStyles.menuBarItem, menuBarStyles.hoverable, menuBarStyles.colorModeMenu, {
-                [menuBarStyles.active]: settingsMenuOpen
-            })}
-            onClick={onRequestOpen}
-        >
-            <img
-                src={settingsIcon}
+    const {
+        isExpanded,
+        handleOnOpen,
+        handleOnClose,
+        handleKeyDown,
+        menuRef
+    } = useMenuNavigation({
+        depth: 1
+    });
+
+    return (<button
+        className={classNames(menuBarStyles.menuBarItem, menuBarStyles.hoverable, menuBarStyles.themeMenu, {
+            [menuBarStyles.active]: isExpanded()
+        })}
+        aria-expanded={isExpanded()}
+        aria-label={intl.formatMessage(settingsMenuAriaMessage)}
+        onClick={handleOnOpen}
+        onKeyDown={handleKeyDown}
+        ref={menuRef}
+    >
+        <img src={settingsIcon} />
+        <span className={styles.dropdownLabel}>
+            <FormattedMessage
+                defaultMessage="Settings"
+                description="Settings menu"
+                id="gui.menuBar.settings"
             />
-            <span className={styles.dropdownLabel}>
-                <FormattedMessage
-                    defaultMessage="Settings"
-                    description="Settings menu"
-                    id="gui.menuBar.settings"
-                />
-            </span>
-            <img src={dropdownCaret} />
-            <MenuBarMenu
-                className={menuBarStyles.menuBarMenu}
-                open={settingsMenuOpen}
-                place={isRtl ? 'left' : 'right'}
-                onRequestClose={onRequestClose}
-            >
-                <MenuSection>
-                    {canChangeLanguage && <LanguageMenu onRequestCloseSettings={onRequestClose} />}
-                    {canChangeTheme &&
-                        // TODO: Consider always showing the theme menu, even if there is a single available theme
-                        availableThemesLength > 1 &&
-                        <PreferenceMenu
-                            open={isThemeMenuOpen}
-                            itemsMap={availableThemesMap}
-                            onChange={onChangeTheme}
-                            defaultMenuIconSrc={themeIcon}
-                            submenuLabel={{
-                                defaultMessage: 'Theme',
-                                description: 'Theme sub-menu',
-                                id: 'gui.menuBar.theme'
-                            }}
-                            selectedItemKey={activeTheme}
-                            isRtl={isRtl}
-                            onRequestCloseSettings={onRequestClose}
-                            onRequestOpen={onRequestOpenTheme}
-                        />}
-                    {canChangeColorMode && <PreferenceMenu
-                        open={isColorModeMenuOpen}
-                        itemsMap={enabledColorModesMap}
-                        onChange={onChangeColorMode}
+        </span>
+        <img src={dropdownCaret} />
+        <MenuBarMenu
+            className={menuBarStyles.menuBarMenu}
+            open={isExpanded()}
+            place={isRtl ? 'left' : 'right'}
+            onRequestClose={handleOnClose}
+        >
+            <MenuSection>
+                {canChangeLanguage && <LanguageMenu />}
+                {canChangeTheme &&
+                    // TODO: Consider always showing the theme menu, even if there is a single available theme
+                    availableThemesLength > 1 &&
+                    <PreferenceMenu
+                        itemsMap={availableThemesMap}
+                        onChange={onChangeTheme}
+                        defaultMenuIconSrc={themeIcon}
                         submenuLabel={{
-                            defaultMessage: 'Color Mode',
-                            description: 'Color mode sub-menu',
-                            id: 'gui.menuBar.colorMode'
+                            defaultMessage: 'Theme',
+                            description: 'Theme sub-menu',
+                            id: 'gui.menuBar.theme'
                         }}
-                        selectedItemKey={activeColorMode}
+                        selectedItemKey={activeTheme}
                         isRtl={isRtl}
-                        onRequestCloseSettings={onRequestClose}
-                        onRequestOpen={onRequestOpenColorMode}
                     />}
-                </MenuSection>
-            </MenuBarMenu>
-        </div>
-    );
+                {canChangeColorMode && <PreferenceMenu
+                    itemsMap={enabledColorModesMap}
+                    onChange={onChangeColorMode}
+                    submenuLabel={{
+                        defaultMessage: 'Color Mode',
+                        description: 'Color mode sub-menu',
+                        id: 'gui.menuBar.colorMode'
+                    }}
+                    selectedItemKey={activeColorMode}
+                    isRtl={isRtl}
+                />}
+            </MenuSection>
+        </MenuBarMenu>
+    </button>);
 };
 
 SettingsMenu.propTypes = {
-    canChangeLanguage: PropTypes.bool,
-    canChangeColorMode: PropTypes.bool,
-    canChangeTheme: PropTypes.bool,
-    hasActiveMembership: PropTypes.bool,
-    isRtl: PropTypes.bool,
+    canChangeLanguage: PropTypes.bool.isRequired,
+    canChangeColorMode: PropTypes.bool.isRequired,
+    canChangeTheme: PropTypes.bool.isRequired,
+    hasActiveMembership: PropTypes.bool.isRequired,
+    isRtl: PropTypes.bool.isRequired,
     activeColorMode: PropTypes.string,
     onChangeColorMode: PropTypes.func,
-    onRequestOpenColorMode: PropTypes.func,
-    isColorModeMenuOpen: PropTypes.bool,
     activeTheme: PropTypes.string,
-    onChangeTheme: PropTypes.func,
-    onRequestOpenTheme: PropTypes.func,
-    isThemeMenuOpen: PropTypes.bool,
-    onRequestClose: PropTypes.func,
-    onRequestOpen: PropTypes.func,
-    settingsMenuOpen: PropTypes.bool
+    onChangeTheme: PropTypes.func
 };
 
 const mapStateToProps = state => ({
     activeColorMode: state.scratchGui.settings.colorMode,
-    activeTheme: state.scratchGui.settings.theme,
-    isColorModeMenuOpen: colorModeMenuOpen(state),
-    isThemeMenuOpen: themeMenuOpen(state)
+    activeTheme: state.scratchGui.settings.theme
 });
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
-    onRequestOpenColorMode: () => {
-        dispatch(openColorModeMenu());
-    },
-    onRequestOpenTheme: () => {
-        dispatch(openThemeMenu());
-    },
+const mapDispatchToProps = dispatch => ({
     onChangeColorMode: colorMode => {
         dispatch(setColorMode(colorMode));
-        ownProps.onRequestClose();
         persistColorMode(colorMode);
     },
     onChangeTheme: theme => {
         dispatch(setTheme(theme));
-        ownProps.onRequestClose();
         persistTheme(theme);
     }
 });
diff --git a/packages/scratch-gui/src/components/menu/menu.jsx b/packages/scratch-gui/src/components/menu/menu.jsx
index bffe47752b..654791f8f8 100644
--- a/packages/scratch-gui/src/components/menu/menu.jsx
+++ b/packages/scratch-gui/src/components/menu/menu.jsx
@@ -32,7 +32,6 @@ MenuComponent.propTypes = {
     place: PropTypes.oneOf(['left', 'right'])
 };
 
-
 const Submenu = ({children, className, place, ...props}) => (
     <ul
         className={classNames(
@@ -63,7 +62,13 @@ const MenuItem = ({
     children,
     className,
     expanded = false,
-    onClick
+    isSelected = false,
+    isDisabled = false,
+    onClick,
+    ariaLabel,
+    ariaRole,
+    onParentKeyPress,
+    ...props
 }) => (
     <li
         className={classNames(
@@ -73,19 +78,30 @@ const MenuItem = ({
             {[styles.expanded]: expanded}
         )}
         onClick={onClick}
+        tabIndex={-1}
+        aria-label={ariaLabel}
+        aria-selected={isSelected}
+        aria-disabled={isDisabled}
+        role={ariaRole}
+        onKeyDown={onParentKeyPress}
+        {...props}
     >
         {children}
     </li>
 );
 
 MenuItem.propTypes = {
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     expanded: PropTypes.bool,
-    onClick: PropTypes.func
+    isSelected: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    onParentKeyPress: PropTypes.func
 };
 
-
 const addDividerClassToFirstChild = (child, id) => (
     child && React.cloneElement(child, {
         className: classNames(
diff --git a/packages/scratch-gui/src/containers/language-selector.jsx b/packages/scratch-gui/src/containers/language-selector.jsx
index 0cb9f08846..b39ace7cd1 100644
--- a/packages/scratch-gui/src/containers/language-selector.jsx
+++ b/packages/scratch-gui/src/containers/language-selector.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import {selectLocale} from '../reducers/locales';
-import {closeLanguageMenu} from '../reducers/menus';
 
 import LanguageSelectorComponent from '../components/language-selector/language-selector.jsx';
 
@@ -56,7 +55,6 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
     onChangeLanguage: locale => {
         dispatch(selectLocale(locale));
-        dispatch(closeLanguageMenu());
     }
 });
 
diff --git a/packages/scratch-gui/src/containers/menu-item.jsx b/packages/scratch-gui/src/containers/menu-item.jsx
index 8755c19f73..3609df8e9f 100644
--- a/packages/scratch-gui/src/containers/menu-item.jsx
+++ b/packages/scratch-gui/src/containers/menu-item.jsx
@@ -18,13 +18,17 @@ class MenuItem extends React.Component {
         const {
             children,
             className,
-            onClick
+            onClick,
+            onParentKeyPress,
+            ...props
         } = this.props;
         const clickAction = onClick ? onClick : this.navigateToHref;
         return (
             <MenuItemComponent
                 className={className}
                 onClick={clickAction}
+                onParentKeyPress={onParentKeyPress}
+                {...props}
             >
                 {children}
             </MenuItemComponent>
@@ -37,7 +41,8 @@ MenuItem.propTypes = {
     className: PropTypes.string,
     // can take an onClick prop, or take an href and build an onClick handler
     href: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    onParentKeyPress: PropTypes.func
 };
 
 export default MenuItem;
diff --git a/packages/scratch-gui/src/contexts/menu-ref-context.jsx b/packages/scratch-gui/src/contexts/menu-ref-context.jsx
new file mode 100644
index 0000000000..891b2b92fe
--- /dev/null
+++ b/packages/scratch-gui/src/contexts/menu-ref-context.jsx
@@ -0,0 +1,102 @@
+import React, {useCallback, useMemo, useState} from 'react';
+import PropTypes from 'prop-types';
+
+export const MenuRefContext = React.createContext(null);
+
+/**
+ * This provider manages references to menu components in order to ensure
+ * sensible behavior for handling menu opening and closing logic
+ * @param {object} props
+ *   Provider props.
+ * @param {React.ReactNode} props.children
+ *   Child components that use the logic of the provider.
+ * @returns {React.ReactNode}
+ *   A MenuRefContext provider exposing:
+ *   - refStack: Array of currently opened menus one after the other
+ *   - openInnerMenu(ref, depth)
+ *     Adds menu at said depth, closing any inner menus that followed previously.
+ *   - closeMenuByRef(ref)
+ *     Closes the specified menu and all menus nested in it.
+ *   - closeInnerMenu()
+ *     Closes only the current innermost menu.
+ *   - closeAllMenus()
+ *     Closes all open menus.
+ *   - isOpenMenu(ref)
+ *     Returns if the given menu is currently open.
+ *   - isInnermostMenu(ref)
+ *     Returns if the given menu is currently the innermost one.
+ *   - outermostMenu
+ *     Returns ref of the outermost open menu.
+ */
+export const MenuRefProvider = ({children}) => {
+    const [refStack, setRefStack] = useState([]);
+
+    const closeMenuByRef = useCallback(ref => {
+        setRefStack(prev => {
+            const index = prev.indexOf(ref);
+            if (index === -1) return prev;
+            return prev.slice(0, index);
+        });
+    }, []);
+
+    const openInnerMenu = useCallback((ref, depth) => {
+        setRefStack(prev => {
+            let next = prev;
+
+            if (depth <= prev.length) {
+                const cutRef = prev[depth - 1];
+                const index = prev.indexOf(cutRef);
+                if (index !== -1) {
+                    next = prev.slice(0, index);
+                }
+            }
+
+            return [...next, ref];
+        });
+    }, []);
+    
+    const closeInnerMenu = useCallback(() => {
+        setRefStack(prev => prev.slice(0, prev.length - 1));
+    }, []);
+
+    const closeAllMenus = useCallback(() => {
+        setRefStack([]);
+    }, []);
+
+    const outermostMenu = useMemo(() => (refStack.length > 0 ? refStack[0] : null), [refStack]);
+
+    const isInnermostMenu = useCallback(ref => (refStack.length > 0 &&
+        refStack[refStack.length - 1] === ref), [refStack]);
+
+    const isOpenMenu = useCallback(ref => (refStack.includes(ref)), [refStack]);
+
+    const value = useMemo(() => ({
+        refStack,
+        openInnerMenu,
+        closeInnerMenu,
+        closeMenuByRef,
+        closeAllMenus,
+        isInnermostMenu,
+        isOpenMenu,
+        outermostMenu
+    }), [
+        refStack,
+        openInnerMenu,
+        closeInnerMenu,
+        closeMenuByRef,
+        closeAllMenus,
+        isInnermostMenu,
+        isOpenMenu,
+        outermostMenu
+    ]);
+
+    return (
+        <MenuRefContext.Provider value={value}>
+            {children}
+        </MenuRefContext.Provider>
+    );
+};
+
+MenuRefProvider.propTypes = {
+    children: PropTypes.node
+};
diff --git a/packages/scratch-gui/src/hooks/use-menu-navigation.jsx b/packages/scratch-gui/src/hooks/use-menu-navigation.jsx
new file mode 100644
index 0000000000..d93b94816f
--- /dev/null
+++ b/packages/scratch-gui/src/hooks/use-menu-navigation.jsx
@@ -0,0 +1,189 @@
+import {useCallback, useContext, useState, useRef} from 'react';
+import {MenuRefContext} from '../contexts/menu-ref-context';
+import {KEY} from '../lib/navigation-keys';
+
+const MENU_ITEM_SELECTOR = '[data-menu-item="true"]';
+const MENU_ITEM_WRAPPER_SELECTOR = '[data-menu-item-wrapper="true"]';
+
+/**
+ * Custom hook for keyboard navigation and focus management in menu components.
+ *
+ * This hook provides:
+ * - Opening and closing menus
+ * - Handling Escape, Enter, Arrow and Tab keys
+ * - Coordinating nested open menus via MenuRefContext
+ * - Automatically focusing the first or default menu item when opening
+ * - BFS to find first-level menu items, including wrapped items
+ *
+ * Notes:
+ * - Menu items can be direct children or wrapped in a container marked with
+ *   `data-menu-item-wrapper="true"`. The BFS will traverse until it finds menu items
+ *   or wrapped menu items, but will not go deeper than needed.
+ * - The hook automatically skips the starting element itself when looking for siblings.
+ *
+ * STEPS TO USE IT:
+ * 1. In the top-level menu trigger (button/div/...) pass:
+ *    - onClick={handleOnOpen}
+ *    - ref={menuRef}
+ *    - onKeyDown={handleKeyDown}
+ *    - tabIndex={0} if it's the core menu accessible via Tab
+ *    - aria-expanded={isExpanded()}
+ * 2. Mark each submenu item or leaf menu item with:
+ *    - data-menu-item="true"
+ * 3. If an expandable submenu is wrapped, mark the wrapper with:
+ *    - data-menu-item-wrapper="true"
+ *    - see SettingsMenu -> LanguageMenu | PreferenceMenu logic for reference
+ * @param {object} params
+ *   Parameters object
+ * @param {number} params.depth
+ *   Nesting depth of the menu (1 = top-level menu).
+ * @param {number} [params.defaultIndexOnOpen]
+ *   Default menu item index to focus when opening the menu.
+ * @returns {object} An object containing the menu state and keyboard handlers:
+ *   - menuRef: reference to element to be used in component
+ *   - focusedIndex: number — Index of the currently focused menu item.
+ *   - isExpanded: function() — Returns true if the menu is expanded.
+ *   - handleKeyDown: function(KeyboardEvent) — Handles key presses on the menu.
+ *   - handleKeyDownOpenMenu: function(KeyboardEvent) — Handles key presses when the menu is open.
+ *   - handleOnOpen: function() — Function to open the menu.
+ *   - handleOnClose: function() — Function to close the menu.
+ */
+export default function useMenuNavigation ({
+    depth,
+    defaultIndexOnOpen = 0
+}) {
+    const menuRef = useRef(null);
+    const menuContext = useContext(MenuRefContext);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+
+    // BFS to find first children with attribute
+    const findDirectSubitems = () => {
+        if (!menuRef?.current) return [];
+        const directSubitems = [];
+        // Start from the wrapper if element is inside one
+        const root = menuRef.current?.parentElement?.matches(MENU_ITEM_WRAPPER_SELECTOR) ?
+            menuRef.current.parentElement : menuRef.current;
+        const children = [...root.children];
+
+        while (children.length > 0) {
+            // if child is a menu item itself
+            const element = children.shift();
+            if (element.matches(MENU_ITEM_SELECTOR)) {
+                // Skip original starting element if we went back to the wrapper
+                if (element !== menuRef.current) {
+                    directSubitems.push(element);
+                }
+                continue;
+            }
+            if (element.matches(MENU_ITEM_WRAPPER_SELECTOR)) {
+                const wrappedItems = Array.from(element.children).filter(child =>
+                    child.matches(MENU_ITEM_SELECTOR)
+                );
+                directSubitems.push(...wrappedItems);
+            } else {
+                children.push(...element.children);
+            }
+        }
+
+        return directSubitems;
+    };
+
+    const isExpanded = useCallback(
+        () => menuContext.isOpenMenu(menuRef),
+        [menuContext, menuRef]
+    );
+
+    const refocusIndex = useCallback(index => {
+        const items = findDirectSubitems(menuRef);
+        if (items?.[index]) {
+            items[index].focus();
+            setFocusedIndex(index);
+        }
+    }, [menuRef]);
+
+    const handleOnOpen = useCallback(() => {
+        if (menuContext.isOpenMenu(menuRef)) return;
+
+        menuContext.openInnerMenu(menuRef, depth);
+
+        // Wait for the UI to be rendered before interacting with the DOM
+        requestAnimationFrame(() => {
+            refocusIndex(defaultIndexOnOpen);
+        });
+    }, [menuContext, menuRef, depth, defaultIndexOnOpen]);
+
+    const handleOnClose = useCallback(() => {
+        setFocusedIndex(-1);
+        menuContext.closeMenuByRef(menuRef);
+        menuRef?.current?.focus();
+    }, [menuContext, menuRef]);
+
+    const handleMove = useCallback(direction => {
+        const items = findDirectSubitems(menuRef);
+        if (!items?.length) return;
+
+        const nextIndex = (focusedIndex + direction + items.length) % items.length;
+        refocusIndex(nextIndex);
+    }, [focusedIndex, menuRef, refocusIndex]);
+
+    const handleKeyDownOpenMenu = useCallback(e => {
+        const items = findDirectSubitems(menuRef);
+
+        // Logic for vertical menus, will need to change when implementing for vertical
+        switch (e.key) {
+        case KEY.ARROW_DOWN:
+            e.preventDefault();
+            handleMove(1);
+            break;
+        case KEY.ARROW_UP:
+            e.preventDefault();
+            handleMove(-1);
+            break;
+        case KEY.ESCAPE:
+        case KEY.ARROW_LEFT:
+            e.preventDefault();
+            handleOnClose();
+            break;
+        case KEY.ENTER:
+            e.preventDefault();
+            e.stopPropagation();
+            items[focusedIndex]?.click();
+            break;
+        }
+
+    }, [handleMove, handleOnClose, focusedIndex]);
+
+    const handleKeyDown = useCallback(e => {
+        if (isExpanded() && depth === 1 && e.key === KEY.TAB) {
+            handleOnClose();
+            menuContext.closeAllMenus();
+            return;
+        }
+
+        if (menuContext.isInnermostMenu(menuRef)) {
+            handleKeyDownOpenMenu(e);
+        } else if (!isExpanded() && (e.key === KEY.SPACE ||
+            (e.key === KEY.ARROW_RIGHT && depth !== 1))) {
+            e.preventDefault();
+            handleOnOpen();
+        }
+    }, [
+        depth,
+        menuContext,
+        menuRef,
+        isExpanded,
+        handleKeyDownOpenMenu,
+        handleOnOpen,
+        handleOnClose
+    ]);
+
+    return {
+        menuRef,
+        focusedIndex,
+        isExpanded,
+        handleKeyDown,
+        handleKeyDownOpenMenu,
+        handleOnOpen,
+        handleOnClose
+    };
+}
diff --git a/packages/scratch-gui/src/lib/sb-file-uploader-hoc.jsx b/packages/scratch-gui/src/lib/sb-file-uploader-hoc.jsx
index 96872a7a53..2dff58329c 100644
--- a/packages/scratch-gui/src/lib/sb-file-uploader-hoc.jsx
+++ b/packages/scratch-gui/src/lib/sb-file-uploader-hoc.jsx
@@ -19,9 +19,6 @@ import {
     openLoadingProject,
     closeLoadingProject
 } from '../reducers/modals';
-import {
-    closeFileMenu
-} from '../reducers/menus';
 import {getProjectTitleFromFilename} from './sb-file-uploader-utils';
 
 const messages = defineMessages({
@@ -116,7 +113,6 @@ const SBFileUploaderHOC = function (WrappedComponent) {
                     // skips ahead to step 7
                     this.removeFileObjects();
                 }
-                this.props.closeFileMenu();
             }
         }
         // step 4 is below, in mapDispatchToProps
@@ -176,7 +172,6 @@ const SBFileUploaderHOC = function (WrappedComponent) {
             const {
                  
                 cancelFileUpload,
-                closeFileMenu: closeFileMenuProp,
                 isLoadingUpload,
                 isShowingWithoutId,
                 loadingState,
@@ -206,7 +201,6 @@ const SBFileUploaderHOC = function (WrappedComponent) {
     SBFileUploaderComponent.propTypes = {
         canSave: PropTypes.bool,
         cancelFileUpload: PropTypes.func,
-        closeFileMenu: PropTypes.func,
         intl: intlShape.isRequired,
         isLoadingUpload: PropTypes.bool,
         isShowingWithoutId: PropTypes.bool,
@@ -238,13 +232,11 @@ const SBFileUploaderHOC = function (WrappedComponent) {
     };
     const mapDispatchToProps = (dispatch, ownProps) => ({
         cancelFileUpload: loadingState => dispatch(onLoadedProject(loadingState, false, false)),
-        closeFileMenu: () => dispatch(closeFileMenu()),
         // transition project state from loading to regular, and close
         // loading screen and file menu
         onLoadingFinished: (loadingState, success) => {
             dispatch(onLoadedProject(loadingState, ownProps.canSave, success));
             dispatch(closeLoadingProject());
-            dispatch(closeFileMenu());
         },
         // show project loading screen
         onLoadingStarted: () => dispatch(openLoadingProject()),
diff --git a/packages/scratch-gui/src/reducers/menus.js b/packages/scratch-gui/src/reducers/menus.js
index 8e62120337..ff390817dc 100644
--- a/packages/scratch-gui/src/reducers/menus.js
+++ b/packages/scratch-gui/src/reducers/menus.js
@@ -1,16 +1,7 @@
 const OPEN_MENU = 'scratch-gui/menus/OPEN_MENU';
 const CLOSE_MENU = 'scratch-gui/menus/CLOSE_MENU';
 
-const MENU_ABOUT = 'aboutMenu';
-const MENU_ACCOUNT = 'accountMenu';
-const MENU_EDIT = 'editMenu';
-const MENU_FILE = 'fileMenu';
-const MENU_LANGUAGE = 'languageMenu';
 const MENU_LOGIN = 'loginMenu';
-const MENU_MODE = 'modeMenu';
-const MENU_SETTINGS = 'settingsMenu';
-const MENU_COLOR_MODE = 'colorModeMenu';
-const MENU_THEME = 'themeMenu';
 
 class Menu {
     constructor (id) {
@@ -49,31 +40,10 @@ class Menu {
 
 // Structure of nested menus, used for collapsing submenus logic.
 const rootMenu = new Menu('root')
-    .addChild(
-        new Menu(MENU_SETTINGS)
-            .addChild(new Menu(MENU_LANGUAGE))
-            .addChild(new Menu(MENU_COLOR_MODE))
-            .addChild(new Menu(MENU_THEME))
-    )
-    .addChild(new Menu(MENU_FILE))
-    .addChild(new Menu(MENU_EDIT))
-    .addChild(new Menu(MENU_MODE))
-    .addChild(new Menu(MENU_SETTINGS))
-    .addChild(new Menu(MENU_LOGIN))
-    .addChild(new Menu(MENU_ACCOUNT))
-    .addChild(new Menu(MENU_ABOUT));
+    .addChild(new Menu(MENU_LOGIN));
 
 const initialState = {
-    [MENU_ABOUT]: false,
-    [MENU_ACCOUNT]: false,
-    [MENU_EDIT]: false,
-    [MENU_FILE]: false,
-    [MENU_LANGUAGE]: false,
-    [MENU_LOGIN]: false,
-    [MENU_MODE]: false,
-    [MENU_SETTINGS]: false,
-    [MENU_COLOR_MODE]: false,
-    [MENU_THEME]: false
+    [MENU_LOGIN]: false
 };
 
 const reducer = function (state, action) {
@@ -113,77 +83,14 @@ const closeMenu = menu => ({
     menu: menu
 });
 
-const openAboutMenu = () => openMenu(MENU_ABOUT);
-const closeAboutMenu = () => closeMenu(MENU_ABOUT);
-const aboutMenuOpen = state => state.scratchGui.menus[MENU_ABOUT];
-
-const openAccountMenu = () => openMenu(MENU_ACCOUNT);
-const closeAccountMenu = () => closeMenu(MENU_ACCOUNT);
-const accountMenuOpen = state => state.scratchGui.menus[MENU_ACCOUNT];
-
-const openEditMenu = () => openMenu(MENU_EDIT);
-const closeEditMenu = () => closeMenu(MENU_EDIT);
-const editMenuOpen = state => state.scratchGui.menus[MENU_EDIT];
-
-const openFileMenu = () => openMenu(MENU_FILE);
-const closeFileMenu = () => closeMenu(MENU_FILE);
-const fileMenuOpen = state => state.scratchGui.menus[MENU_FILE];
-
-const openLanguageMenu = () => openMenu(MENU_LANGUAGE);
-const closeLanguageMenu = () => closeMenu(MENU_LANGUAGE);
-const languageMenuOpen = state => state.scratchGui.menus[MENU_LANGUAGE];
-
 const openLoginMenu = () => openMenu(MENU_LOGIN);
 const closeLoginMenu = () => closeMenu(MENU_LOGIN);
 const loginMenuOpen = state => state.scratchGui.menus[MENU_LOGIN];
 
-const openModeMenu = () => openMenu(MENU_MODE);
-const closeModeMenu = () => closeMenu(MENU_MODE);
-const modeMenuOpen = state => state.scratchGui.menus[MENU_MODE];
-
-const openSettingsMenu = () => openMenu(MENU_SETTINGS);
-const closeSettingsMenu = () => closeMenu(MENU_SETTINGS);
-const settingsMenuOpen = state => state.scratchGui.menus[MENU_SETTINGS];
-
-const openColorModeMenu = () => openMenu(MENU_COLOR_MODE);
-const closeColorModeMenu = () => closeMenu(MENU_COLOR_MODE);
-const colorModeMenuOpen = state => state.scratchGui.menus[MENU_COLOR_MODE];
-
-const openThemeMenu = () => openMenu(MENU_THEME);
-const closeThemeMenu = () => closeMenu(MENU_THEME);
-const themeMenuOpen = state => state.scratchGui.menus[MENU_THEME];
-
 export {
     reducer as default,
     initialState as menuInitialState,
-    openAboutMenu,
-    closeAboutMenu,
-    aboutMenuOpen,
-    openAccountMenu,
-    closeAccountMenu,
-    accountMenuOpen,
-    openEditMenu,
-    closeEditMenu,
-    editMenuOpen,
-    openFileMenu,
-    closeFileMenu,
-    fileMenuOpen,
-    openLanguageMenu,
-    closeLanguageMenu,
-    languageMenuOpen,
     openLoginMenu,
     closeLoginMenu,
-    loginMenuOpen,
-    openModeMenu,
-    closeModeMenu,
-    modeMenuOpen,
-    openSettingsMenu,
-    closeSettingsMenu,
-    settingsMenuOpen,
-    openColorModeMenu,
-    closeColorModeMenu,
-    colorModeMenuOpen,
-    openThemeMenu,
-    closeThemeMenu,
-    themeMenuOpen
+    loginMenuOpen
 };
diff --git a/packages/scratch-gui/test/integration/blocks-standalone.test.js b/packages/scratch-gui/test/integration/blocks-standalone.test.js
index 35afe3ed54..84926581cc 100644
--- a/packages/scratch-gui/test/integration/blocks-standalone.test.js
+++ b/packages/scratch-gui/test/integration/blocks-standalone.test.js
@@ -21,7 +21,7 @@ const uri = path.resolve(__dirname, '../../build/standalone.html');
 
 let driver;
 
-const SETTINGS_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const SETTINGS_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "settings-menu_dropdown-label")]//*[text()="Settings"]]';
 
 // A test suite cloned from `blocks.test.js` which acts as a way to check that the
diff --git a/packages/scratch-gui/test/integration/blocks.test.js b/packages/scratch-gui/test/integration/blocks.test.js
index 2521100788..1e7b4828c4 100644
--- a/packages/scratch-gui/test/integration/blocks.test.js
+++ b/packages/scratch-gui/test/integration/blocks.test.js
@@ -21,7 +21,7 @@ const uri = path.resolve(__dirname, '../../build/index.html');
 
 let driver;
 
-const SETTINGS_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const SETTINGS_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "settings-menu_dropdown-label")]//*[text()="Settings"]]';
 
 describe('Working with the blocks', () => {
diff --git a/packages/scratch-gui/test/integration/localization.test.js b/packages/scratch-gui/test/integration/localization.test.js
index 00cae10ba4..2bf032721d 100644
--- a/packages/scratch-gui/test/integration/localization.test.js
+++ b/packages/scratch-gui/test/integration/localization.test.js
@@ -17,9 +17,9 @@ const uri = path.resolve(__dirname, '../../build/index.html');
 
 let driver;
 
-const FILE_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const FILE_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "menu-bar_collapsible-label")]//*[text()="File"]]';
-const SETTINGS_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const SETTINGS_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "settings-menu_dropdown-label")]//*[text()="Settings"]]';
 
 describe('Localization', () => {
diff --git a/packages/scratch-gui/test/integration/menu-bar.test.js b/packages/scratch-gui/test/integration/menu-bar.test.js
index 9774769138..528b0e2c9a 100644
--- a/packages/scratch-gui/test/integration/menu-bar.test.js
+++ b/packages/scratch-gui/test/integration/menu-bar.test.js
@@ -16,9 +16,9 @@ const uri = path.resolve(__dirname, '../../build/index.html');
 
 let driver;
 
-const FILE_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const FILE_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "menu-bar_collapsible-label")]//*[text()="File"]]';
-const SETTINGS_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const SETTINGS_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "settings-menu_dropdown-label")]//*[text()="Settings"]]';
 
 describe('Menu bar settings', () => {
diff --git a/packages/scratch-gui/test/integration/project-loading.test.js b/packages/scratch-gui/test/integration/project-loading.test.js
index 697b136ef8..4167a733e0 100644
--- a/packages/scratch-gui/test/integration/project-loading.test.js
+++ b/packages/scratch-gui/test/integration/project-loading.test.js
@@ -16,7 +16,7 @@ const uri = path.resolve(__dirname, '../../build/index.html');
 
 let driver;
 
-const FILE_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const FILE_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "menu-bar_collapsible-label")]//*[text()="File"]]';
 
 describe('Loading scratch gui', () => {
diff --git a/packages/scratch-gui/test/integration/project-state.test.js b/packages/scratch-gui/test/integration/project-state.test.js
index cb1c245a49..6edecbfa42 100644
--- a/packages/scratch-gui/test/integration/project-state.test.js
+++ b/packages/scratch-gui/test/integration/project-state.test.js
@@ -14,7 +14,7 @@ const uri = path.resolve(__dirname, '../../build/index.html');
 
 let driver;
 
-const FILE_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const FILE_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "menu-bar_collapsible-label")]//*[text()="File"]]';
 
 describe('Project state', () => {
diff --git a/packages/scratch-gui/test/integration/sb-file-uploader-hoc.test.js b/packages/scratch-gui/test/integration/sb-file-uploader-hoc.test.js
index 1b38f4978d..1c69580241 100644
--- a/packages/scratch-gui/test/integration/sb-file-uploader-hoc.test.js
+++ b/packages/scratch-gui/test/integration/sb-file-uploader-hoc.test.js
@@ -14,7 +14,7 @@ const uri = path.resolve(__dirname, '../../build/index.html');
 
 let driver;
 
-const FILE_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+const FILE_MENU_XPATH = '//button[contains(@class, "menu-bar_menu-bar-item")]' +
     '[*[contains(@class, "menu-bar_collapsible-label")]//*[text()="File"]]';
 
 describe('Loading scratch gui', () => {
diff --git a/packages/scratch-gui/test/unit/components/menu-bar.test.jsx b/packages/scratch-gui/test/unit/components/menu-bar.test.jsx
index e679b63290..7232fbea84 100644
--- a/packages/scratch-gui/test/unit/components/menu-bar.test.jsx
+++ b/packages/scratch-gui/test/unit/components/menu-bar.test.jsx
@@ -11,6 +11,7 @@ import {PLATFORM} from '../../../src/lib/platform';
 import configureStore from 'redux-mock-store';
 import {Provider} from 'react-redux';
 import VM from '@scratch/scratch-vm';
+import {MenuRefProvider} from '../../../src/contexts/menu-ref-context.jsx';
 
 describe('MenuBar Component', () => {
     const store = configureStore()({
@@ -37,19 +38,23 @@ describe('MenuBar Component', () => {
     });
 
     const getComponent = function (props = {}) {
-        return <Provider store={store}><MenuBar {...props} /></Provider>;
+        return (<Provider store={store}>
+            <MenuRefProvider>
+                <MenuBar {...props} />
+            </MenuRefProvider>
+        </Provider>);
     };
 
     test('menu bar with no About handler has no About button', () => {
         const {container} = renderWithIntl(getComponent());
-        const button = container.querySelector('button');
+        const button = container.querySelector('button[aria-label="About menu"]');
         expect(button).toBeFalsy();
     });
 
     test('menu bar with an About handler has an About button', () => {
         const onClickAbout = jest.fn();
         const {container} = renderWithIntl(getComponent({onClickAbout}));
-        const button = container.querySelector('button');
+        const button = container.querySelector('button[aria-label="About menu"]');
         expect(button).toBeTruthy();
     });
 
@@ -57,7 +62,7 @@ describe('MenuBar Component', () => {
         test('clicking on About button calls the handler', () => {
             const onClickAbout = jest.fn();
             const {container} = renderWithIntl(getComponent({onClickAbout}));
-            const button = container.querySelector('button');
+            const button = container.querySelector('button[aria-label="About menu"]');
     
             fireEvent.click(button);
             expect(onClickAbout).toHaveBeenCalledTimes(1);
@@ -66,7 +71,7 @@ describe('MenuBar Component', () => {
         test('not clicking on About button does not call the handler', () => {
             const onClickAbout = jest.fn();
             const {container} = renderWithIntl(getComponent({onClickAbout}));
-            const button = container.querySelector('button');
+            const button = container.querySelector('button[aria-label="About menu"]');
     
             expect(onClickAbout).toHaveBeenCalledTimes(0);
         });