diff --git a/client/components/Menubar/Menubar.jsx b/client/components/Menubar/Menubar.jsx
new file mode 100644
index 0000000000..b806246515
--- /dev/null
+++ b/client/components/Menubar/Menubar.jsx
@@ -0,0 +1,86 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import useModalClose from '../../common/useModalClose';
+import { MenuOpenContext, MenubarContext } from './contexts';
+
+function Menubar({ children, className }) {
+  const [menuOpen, setMenuOpen] = useState('none');
+
+  const timerRef = useRef(null);
+
+  const handleClose = useCallback(() => {
+    setMenuOpen('none');
+  }, [setMenuOpen]);
+
+  const nodeRef = useModalClose(handleClose);
+
+  const clearHideTimeout = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, [timerRef]);
+
+  const handleBlur = useCallback(() => {
+    timerRef.current = setTimeout(() => setMenuOpen('none'), 10);
+  }, [timerRef, setMenuOpen]);
+
+  const toggleMenuOpen = useCallback(
+    (menu) => {
+      setMenuOpen((prevState) => (prevState === menu ? 'none' : menu));
+    },
+    [setMenuOpen]
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      createMenuHandlers: (menu) => ({
+        onMouseOver: () => {
+          setMenuOpen((prevState) => (prevState === 'none' ? 'none' : menu));
+        },
+        onClick: () => {
+          toggleMenuOpen(menu);
+        },
+        onBlur: handleBlur,
+        onFocus: clearHideTimeout
+      }),
+      createMenuItemHandlers: (menu) => ({
+        onMouseUp: (e) => {
+          if (e.button === 2) {
+            return;
+          }
+          setMenuOpen('none');
+        },
+        onBlur: handleBlur,
+        onFocus: () => {
+          clearHideTimeout();
+          setMenuOpen(menu);
+        }
+      }),
+      toggleMenuOpen
+    }),
+    [setMenuOpen, toggleMenuOpen, clearHideTimeout, handleBlur]
+  );
+
+  return (
+    <MenubarContext.Provider value={contextValue}>
+      <div className={className} ref={nodeRef}>
+        <MenuOpenContext.Provider value={menuOpen}>
+          {children}
+        </MenuOpenContext.Provider>
+      </div>
+    </MenubarContext.Provider>
+  );
+}
+
+Menubar.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+
+Menubar.defaultProps = {
+  children: null,
+  className: 'nav'
+};
+
+export default Menubar;
diff --git a/client/components/Menubar/MenubarItem.jsx b/client/components/Menubar/MenubarItem.jsx
new file mode 100644
index 0000000000..8d595bb5cd
--- /dev/null
+++ b/client/components/Menubar/MenubarItem.jsx
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React, { useContext, useMemo } from 'react';
+import ButtonOrLink from '../../common/ButtonOrLink';
+import { MenubarContext, ParentMenuContext } from './contexts';
+
+function MenubarItem({
+  hideIf,
+  className,
+  role: customRole,
+  selected,
+  ...rest
+}) {
+  const parent = useContext(ParentMenuContext);
+
+  const { createMenuItemHandlers } = useContext(MenubarContext);
+
+  const handlers = useMemo(() => createMenuItemHandlers(parent), [
+    createMenuItemHandlers,
+    parent
+  ]);
+
+  if (hideIf) {
+    return null;
+  }
+
+  const role = customRole || 'menuitem';
+  const ariaSelected = role === 'option' ? { 'aria-selected': selected } : {};
+
+  return (
+    <li className={className}>
+      <ButtonOrLink {...rest} {...handlers} {...ariaSelected} role={role} />
+    </li>
+  );
+}
+
+MenubarItem.propTypes = {
+  ...ButtonOrLink.propTypes,
+  onClick: PropTypes.func,
+  value: PropTypes.string,
+  /**
+   * Provides a way to deal with optional items.
+   */
+  hideIf: PropTypes.bool,
+  className: PropTypes.string,
+  role: PropTypes.oneOf(['menuitem', 'option']),
+  selected: PropTypes.bool
+};
+
+MenubarItem.defaultProps = {
+  onClick: null,
+  value: null,
+  hideIf: false,
+  className: 'nav__dropdown-item',
+  role: 'menuitem',
+  selected: false
+};
+
+export default MenubarItem;
diff --git a/client/components/Menubar/MenubarSubmenu.jsx b/client/components/Menubar/MenubarSubmenu.jsx
new file mode 100644
index 0000000000..13b0e33177
--- /dev/null
+++ b/client/components/Menubar/MenubarSubmenu.jsx
@@ -0,0 +1,135 @@
+// https://blog.logrocket.com/building-accessible-menubar-component-react
+
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useContext, useMemo } from 'react';
+import TriangleIcon from '../../images/down-filled-triangle.svg';
+import { MenuOpenContext, MenubarContext, ParentMenuContext } from './contexts';
+
+export function useMenuProps(id) {
+  const activeMenu = useContext(MenuOpenContext);
+
+  const isOpen = id === activeMenu;
+
+  const { createMenuHandlers } = useContext(MenubarContext);
+
+  const handlers = useMemo(() => createMenuHandlers(id), [
+    createMenuHandlers,
+    id
+  ]);
+
+  return { isOpen, handlers };
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * MenubarTrigger
+ * -----------------------------------------------------------------------------------------------*/
+
+function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
+  const { isOpen, handlers } = useMenuProps(id);
+
+  return (
+    <button
+      {...handlers}
+      {...props}
+      role={role}
+      aria-haspopup={hasPopup}
+      aria-expanded={isOpen}
+    >
+      <span className="nav__item-header">{title}</span>
+      <TriangleIcon
+        className="nav__item-header-triangle"
+        focusable="false"
+        aria-hidden="true"
+      />
+    </button>
+  );
+}
+
+MenubarTrigger.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
+  role: PropTypes.string,
+  hasPopup: PropTypes.oneOf(['menu', 'listbox', 'true'])
+};
+
+MenubarTrigger.defaultProps = {
+  role: 'menuitem',
+  hasPopup: 'menu'
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * MenubarList
+ * -----------------------------------------------------------------------------------------------*/
+
+function MenubarList({ id, children, role, ...props }) {
+  return (
+    <ul className="nav__dropdown" role={role} {...props}>
+      <ParentMenuContext.Provider value={id}>
+        {children}
+      </ParentMenuContext.Provider>
+    </ul>
+  );
+}
+
+MenubarList.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  role: PropTypes.oneOf(['menu', 'listbox'])
+};
+
+MenubarList.defaultProps = {
+  children: null,
+  role: 'menu'
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * MenubarSubmenu
+ * -----------------------------------------------------------------------------------------------*/
+
+function MenubarSubmenu({
+  id,
+  title,
+  children,
+  triggerRole: customTriggerRole,
+  listRole: customListRole,
+  ...props
+}) {
+  const { isOpen } = useMenuProps(id);
+
+  const triggerRole = customTriggerRole || 'menuitem';
+  const listRole = customListRole || 'menu';
+
+  const hasPopup = listRole === 'listbox' ? 'listbox' : 'menu';
+
+  return (
+    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
+      <MenubarTrigger
+        id={id}
+        title={title}
+        role={triggerRole}
+        hasPopup={hasPopup}
+        {...props}
+      />
+      <MenubarList id={id} role={listRole}>
+        {children}
+      </MenubarList>
+    </li>
+  );
+}
+
+MenubarSubmenu.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
+  children: PropTypes.node,
+  triggerRole: PropTypes.string,
+  listRole: PropTypes.string
+};
+
+MenubarSubmenu.defaultProps = {
+  children: null,
+  triggerRole: 'menuitem',
+  listRole: 'menu'
+};
+
+export default MenubarSubmenu;
diff --git a/client/components/Nav/contexts.jsx b/client/components/Menubar/contexts.jsx
similarity index 62%
rename from client/components/Nav/contexts.jsx
rename to client/components/Menubar/contexts.jsx
index 896d7283f4..ab3bb9ffcf 100644
--- a/client/components/Nav/contexts.jsx
+++ b/client/components/Menubar/contexts.jsx
@@ -4,8 +4,8 @@ export const ParentMenuContext = createContext('none');
 
 export const MenuOpenContext = createContext('none');
 
-export const NavBarContext = createContext({
-  createDropdownHandlers: () => ({}),
+export const MenubarContext = createContext({
+  createMenuHandlers: () => ({}),
   createMenuItemHandlers: () => ({}),
-  toggleDropdownOpen: () => {}
+  toggleMenuOpen: () => {}
 });
diff --git a/client/components/Nav/NavBar.jsx b/client/components/Nav/NavBar.jsx
deleted file mode 100644
index c8ae7c6377..0000000000
--- a/client/components/Nav/NavBar.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import useModalClose from '../../common/useModalClose';
-import { MenuOpenContext, NavBarContext } from './contexts';
-
-function NavBar({ children, className }) {
-  const [dropdownOpen, setDropdownOpen] = useState('none');
-
-  const timerRef = useRef(null);
-
-  const handleClose = useCallback(() => {
-    setDropdownOpen('none');
-  }, [setDropdownOpen]);
-
-  const nodeRef = useModalClose(handleClose);
-
-  const clearHideTimeout = useCallback(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  }, [timerRef]);
-
-  const handleBlur = useCallback(() => {
-    timerRef.current = setTimeout(() => setDropdownOpen('none'), 10);
-  }, [timerRef, setDropdownOpen]);
-
-  const toggleDropdownOpen = useCallback(
-    (dropdown) => {
-      setDropdownOpen((prevState) =>
-        prevState === dropdown ? 'none' : dropdown
-      );
-    },
-    [setDropdownOpen]
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      createDropdownHandlers: (dropdown) => ({
-        onMouseOver: () => {
-          setDropdownOpen((prevState) =>
-            prevState === 'none' ? 'none' : dropdown
-          );
-        },
-        onClick: () => {
-          toggleDropdownOpen(dropdown);
-        },
-        onBlur: handleBlur,
-        onFocus: clearHideTimeout
-      }),
-      createMenuItemHandlers: (dropdown) => ({
-        onMouseUp: (e) => {
-          if (e.button === 2) {
-            return;
-          }
-          setDropdownOpen('none');
-        },
-        onBlur: handleBlur,
-        onFocus: () => {
-          clearHideTimeout();
-          setDropdownOpen(dropdown);
-        }
-      }),
-      toggleDropdownOpen
-    }),
-    [setDropdownOpen, toggleDropdownOpen, clearHideTimeout, handleBlur]
-  );
-
-  return (
-    <NavBarContext.Provider value={contextValue}>
-      <header>
-        <div className={className} ref={nodeRef}>
-          <MenuOpenContext.Provider value={dropdownOpen}>
-            {children}
-          </MenuOpenContext.Provider>
-        </div>
-      </header>
-    </NavBarContext.Provider>
-  );
-}
-
-NavBar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-NavBar.defaultProps = {
-  children: null,
-  className: 'nav'
-};
-
-export default NavBar;
diff --git a/client/components/Nav/NavDropdownMenu.jsx b/client/components/Nav/NavDropdownMenu.jsx
deleted file mode 100644
index d2c5744c46..0000000000
--- a/client/components/Nav/NavDropdownMenu.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
-import TriangleIcon from '../../images/down-filled-triangle.svg';
-import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
-
-export function useMenuProps(id) {
-  const activeMenu = useContext(MenuOpenContext);
-
-  const isOpen = id === activeMenu;
-
-  const { createDropdownHandlers } = useContext(NavBarContext);
-
-  const handlers = useMemo(() => createDropdownHandlers(id), [
-    createDropdownHandlers,
-    id
-  ]);
-
-  return { isOpen, handlers };
-}
-
-function NavDropdownMenu({ id, title, children }) {
-  const { isOpen, handlers } = useMenuProps(id);
-
-  return (
-    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
-      <button
-        {...handlers}
-        role="menuitem"
-        aria-haspopup="menu"
-        aria-expanded={isOpen}
-      >
-        <span className="nav__item-header">{title}</span>
-        <TriangleIcon
-          className="nav__item-header-triangle"
-          focusable="false"
-          aria-hidden="true"
-        />
-      </button>
-      <ul className="nav__dropdown" role="menu">
-        <ParentMenuContext.Provider value={id}>
-          {children}
-        </ParentMenuContext.Provider>
-      </ul>
-    </li>
-  );
-}
-
-NavDropdownMenu.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired,
-  children: PropTypes.node
-};
-
-NavDropdownMenu.defaultProps = {
-  children: null
-};
-
-export default NavDropdownMenu;
diff --git a/client/components/Nav/NavMenuItem.jsx b/client/components/Nav/NavMenuItem.jsx
deleted file mode 100644
index 09436e43ee..0000000000
--- a/client/components/Nav/NavMenuItem.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
-import ButtonOrLink from '../../common/ButtonOrLink';
-import { NavBarContext, ParentMenuContext } from './contexts';
-
-function NavMenuItem({ hideIf, className, ...rest }) {
-  const parent = useContext(ParentMenuContext);
-
-  const { createMenuItemHandlers } = useContext(NavBarContext);
-
-  const handlers = useMemo(() => createMenuItemHandlers(parent), [
-    createMenuItemHandlers,
-    parent
-  ]);
-
-  if (hideIf) {
-    return null;
-  }
-
-  return (
-    <li className={className}>
-      <ButtonOrLink {...rest} {...handlers} role="menuitem" />
-    </li>
-  );
-}
-
-NavMenuItem.propTypes = {
-  ...ButtonOrLink.propTypes,
-  onClick: PropTypes.func,
-  value: PropTypes.string,
-  /**
-   * Provides a way to deal with optional items.
-   */
-  hideIf: PropTypes.bool,
-  className: PropTypes.string
-};
-
-NavMenuItem.defaultProps = {
-  onClick: null,
-  value: null,
-  hideIf: false,
-  className: 'nav__dropdown-item'
-};
-
-export default NavMenuItem;
diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx
index 37fa16bed3..349d3d1709 100644
--- a/client/modules/IDE/components/Header/MobileNav.jsx
+++ b/client/modules/IDE/components/Header/MobileNav.jsx
@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { sortBy } from 'lodash';
 import classNames from 'classnames';
-import { ParentMenuContext } from '../../../../components/Nav/contexts';
-import NavBar from '../../../../components/Nav/NavBar';
-import { useMenuProps } from '../../../../components/Nav/NavDropdownMenu';
-import NavMenuItem from '../../../../components/Nav/NavMenuItem';
+import { ParentMenuContext } from '../../../../components/Menubar/contexts';
+import Menubar from '../../../../components/Menubar/Menubar';
+import { useMenuProps } from '../../../../components/Menubar/MenubarSubmenu';
+import NavMenuItem from '../../../../components/Menubar/MenubarItem';
 import { prop, remSize } from '../../../../theme';
 import AsteriskIcon from '../../../../images/p5-asterisk.svg';
 import IconButton from '../../../../common/IconButton';
@@ -36,7 +36,7 @@ import Overlay from '../../../App/components/Overlay';
 import ProjectName from './ProjectName';
 import CollectionCreate from '../../../User/components/CollectionCreate';
 
-const Nav = styled(NavBar)`
+const Nav = styled(Menubar)`
   background: ${prop('MobilePanel.default.background')};
   color: ${prop('primaryTextColor')};
   padding: ${remSize(8)} 0;
diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index 3492c4388a..f40e9137bf 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -4,13 +4,13 @@ import { sortBy } from 'lodash';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import NavDropdownMenu from '../../../../components/Nav/NavDropdownMenu';
-import NavMenuItem from '../../../../components/Nav/NavMenuItem';
+import MenubarSubmenu from '../../../../components/Menubar/MenubarSubmenu';
+import MenubarItem from '../../../../components/Menubar/MenubarItem';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
 import getConfig from '../../../../utils/getConfig';
 import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
-import NavBar from '../../../../components/Nav/NavBar';
+import Menubar from '../../../../components/Menubar/Menubar';
 import CaretLeftIcon from '../../../../images/left-arrow.svg';
 import LogoIcon from '../../../../images/p5js-logo-small.svg';
 import { selectRootFile } from '../../selectors/files';
@@ -37,10 +37,14 @@ const Nav = ({ layout }) => {
   return isMobile ? (
     <MobileNav />
   ) : (
-    <NavBar>
-      <LeftLayout layout={layout} />
-      <UserMenu />
-    </NavBar>
+    <>
+      <header className="nav__header">
+        <Menubar>
+          <LeftLayout layout={layout} />
+          <UserMenu />
+        </Menubar>
+      </header>
+    </>
   );
 };
 
@@ -159,9 +163,9 @@ const ProjectMenu = () => {
           </a>
         )}
       </li>
-      <NavDropdownMenu id="file" title={t('Nav.File.Title')}>
-        <NavMenuItem onClick={newSketch}>{t('Nav.File.New')}</NavMenuItem>
-        <NavMenuItem
+      <MenubarSubmenu id="file" title={t('Nav.File.Title')}>
+        <MenubarItem onClick={newSketch}>{t('Nav.File.New')}</MenubarItem>
+        <MenubarItem
           hideIf={
             !getConfig('LOGIN_ENABLED') || (project?.owner && !isUserOwner)
           }
@@ -169,26 +173,26 @@ const ProjectMenu = () => {
         >
           {t('Common.Save')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
-        </NavMenuItem>
-        <NavMenuItem
+        </MenubarItem>
+        <MenubarItem
           hideIf={isUnsaved || !user.authenticated}
           onClick={() => dispatch(cloneProject())}
         >
           {t('Nav.File.Duplicate')}
-        </NavMenuItem>
-        <NavMenuItem hideIf={isUnsaved} onClick={shareSketch}>
+        </MenubarItem>
+        <MenubarItem hideIf={isUnsaved} onClick={shareSketch}>
           {t('Nav.File.Share')}
-        </NavMenuItem>
-        <NavMenuItem hideIf={isUnsaved} onClick={downloadSketch}>
+        </MenubarItem>
+        <MenubarItem hideIf={isUnsaved} onClick={downloadSketch}>
           {t('Nav.File.Download')}
-        </NavMenuItem>
-        <NavMenuItem
+        </MenubarItem>
+        <MenubarItem
           hideIf={!user.authenticated}
           href={`/${user.username}/sketches`}
         >
           {t('Nav.File.Open')}
-        </NavMenuItem>
-        <NavMenuItem
+        </MenubarItem>
+        <MenubarItem
           hideIf={
             !getConfig('UI_COLLECTIONS_ENABLED') ||
             !user.authenticated ||
@@ -197,56 +201,57 @@ const ProjectMenu = () => {
           href={`/${user.username}/sketches/${project?.id}/add-to-collection`}
         >
           {t('Nav.File.AddToCollection')}
-        </NavMenuItem>
-        <NavMenuItem
+        </MenubarItem>
+        <MenubarItem
           hideIf={!getConfig('EXAMPLES_ENABLED')}
           href="/p5/sketches"
         >
           {t('Nav.File.Examples')}
-        </NavMenuItem>
-      </NavDropdownMenu>
-      <NavDropdownMenu id="edit" title={t('Nav.Edit.Title')}>
-        <NavMenuItem onClick={cmRef.current?.tidyCode}>
+        </MenubarItem>
+      </MenubarSubmenu>
+      <MenubarSubmenu id="edit" title={t('Nav.Edit.Title')}>
+        <MenubarItem onClick={cmRef.current?.tidyCode}>
           {t('Nav.Edit.TidyCode')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+Shift+F</span>
-        </NavMenuItem>
-        <NavMenuItem onClick={cmRef.current?.showFind}>
+        </MenubarItem>
+        <MenubarItem onClick={cmRef.current?.showFind}>
           {t('Nav.Edit.Find')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
-        </NavMenuItem>
-        <NavMenuItem onClick={cmRef.current?.showReplace}>
+        </MenubarItem>
+        <MenubarItem onClick={cmRef.current?.showReplace}>
           {t('Nav.Edit.Replace')}
           <span className="nav__keyboard-shortcut">{replaceCommand}</span>
-        </NavMenuItem>
-      </NavDropdownMenu>
-      <NavDropdownMenu id="sketch" title={t('Nav.Sketch.Title')}>
-        <NavMenuItem onClick={() => dispatch(newFile(rootFile.id))}>
+        </MenubarItem>
+      </MenubarSubmenu>
+      <MenubarSubmenu id="sketch" title={t('Nav.Sketch.Title')}>
+        <MenubarItem onClick={() => dispatch(newFile(rootFile.id))}>
           {t('Nav.Sketch.AddFile')}
           <span className="nav__keyboard-shortcut">{newFileCommand}</span>
-        </NavMenuItem>
-        <NavMenuItem onClick={() => dispatch(newFolder(rootFile.id))}>
+        </MenubarItem>
+        <MenubarItem onClick={() => dispatch(newFolder(rootFile.id))}>
           {t('Nav.Sketch.AddFolder')}
-        </NavMenuItem>
-        <NavMenuItem onClick={() => dispatch(startSketch())}>
+        </MenubarItem>
+        <MenubarItem onClick={() => dispatch(startSketch())}>
           {t('Nav.Sketch.Run')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
-        </NavMenuItem>
-        <NavMenuItem onClick={() => dispatch(stopSketch())}>
+        </MenubarItem>
+        <MenubarItem onClick={() => dispatch(stopSketch())}>
           {t('Nav.Sketch.Stop')}
           <span className="nav__keyboard-shortcut">
             Shift+{metaKeyName}+Enter
           </span>
-        </NavMenuItem>
-      </NavDropdownMenu>
-      <NavDropdownMenu id="help" title={t('Nav.Help.Title')}>
-        <NavMenuItem onClick={() => dispatch(showKeyboardShortcutModal())}>
+        </MenubarItem>
+      </MenubarSubmenu>
+      <MenubarSubmenu id="help" title={t('Nav.Help.Title')}>
+        <MenubarItem onClick={() => dispatch(showKeyboardShortcutModal())}>
           {t('Nav.Help.KeyboardShortcuts')}
-        </NavMenuItem>
-        <NavMenuItem href="https://p5js.org/reference/">
+        </MenubarItem>
+        <MenubarItem href="https://p5js.org/reference/">
           {t('Nav.Help.Reference')}
-        </NavMenuItem>
-        <NavMenuItem href="/about">{t('Nav.Help.About')}</NavMenuItem>
-      </NavDropdownMenu>
+        </MenubarItem>
+        <MenubarItem href="/about">{t('Nav.Help.About')}</MenubarItem>
+      </MenubarSubmenu>
+      {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
     </ul>
   );
 };
@@ -261,32 +266,44 @@ const LanguageMenu = () => {
   }
 
   return (
-    <NavDropdownMenu id="lang" title={languageKeyToLabel(language)}>
+    <MenubarSubmenu
+      id="lang"
+      title={languageKeyToLabel(language)}
+      triggerRole="button"
+      listRole="listbox"
+    >
       {sortBy(availableLanguages).map((key) => (
         // eslint-disable-next-line react/jsx-no-bind
-        <NavMenuItem key={key} value={key} onClick={handleLangSelection}>
+        <MenubarItem
+          key={key}
+          value={key}
+          onClick={handleLangSelection}
+          role="option"
+          selected={key === language}
+        >
           {languageKeyToLabel(key)}
-        </NavMenuItem>
+        </MenubarItem>
       ))}
-    </NavDropdownMenu>
+    </MenubarSubmenu>
   );
 };
 
 const UnauthenticatedUserMenu = () => {
   const { t } = useTranslation();
   return (
-    <ul className="nav__items-right" title="user-menu" role="navigation">
-      {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
+    <ul className="nav__items-right" title="user-menu">
       <li className="nav__item">
-        <Link to="/login" className="nav__auth-button" role="menuitem">
+        <Link to="/login" className="nav__auth-button">
           <span className="nav__item-header" title="Login">
             {t('Nav.Login')}
           </span>
         </Link>
       </li>
-      <li className="nav__item-or">{t('Nav.LoginOr')}</li>
+      <li className="nav__item-or" role="presentation">
+        {t('Nav.LoginOr')}
+      </li>
       <li className="nav__item">
-        <Link to="/signup" className="nav__auth-button" role="menuitem">
+        <Link to="/signup" className="nav__auth-button">
           <span className="nav__item-header" title="SignUp">
             {t('Nav.SignUp')}
           </span>
@@ -303,9 +320,8 @@ const AuthenticatedUserMenu = () => {
   const dispatch = useDispatch();
 
   return (
-    <ul className="nav__items-right" title="user-menu" role="navigation">
-      {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
-      <NavDropdownMenu
+    <ul className="nav__items-right" title="user-menu">
+      <MenubarSubmenu
         id="account"
         title={
           <span>
@@ -313,23 +329,23 @@ const AuthenticatedUserMenu = () => {
           </span>
         }
       >
-        <NavMenuItem href={`/${username}/sketches`}>
+        <MenubarItem href={`/${username}/sketches`}>
           {t('Nav.Auth.MySketches')}
-        </NavMenuItem>
-        <NavMenuItem
+        </MenubarItem>
+        <MenubarItem
           href={`/${username}/collections`}
           hideIf={!getConfig('UI_COLLECTIONS_ENABLED')}
         >
           {t('Nav.Auth.MyCollections')}
-        </NavMenuItem>
-        <NavMenuItem href={`/${username}/assets`}>
+        </MenubarItem>
+        <MenubarItem href={`/${username}/assets`}>
           {t('Nav.Auth.MyAssets')}
-        </NavMenuItem>
-        <NavMenuItem href="/account">{t('Preferences.Settings')}</NavMenuItem>
-        <NavMenuItem onClick={() => dispatch(logoutUser())}>
+        </MenubarItem>
+        <MenubarItem href="/account">{t('Preferences.Settings')}</MenubarItem>
+        <MenubarItem onClick={() => dispatch(logoutUser())}>
           {t('Nav.Auth.LogOut')}
-        </NavMenuItem>
-      </NavDropdownMenu>
+        </MenubarItem>
+      </MenubarSubmenu>
     </ul>
   );
 };
diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
index af56a1a418..d9140653c1 100644
--- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
+++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
@@ -2,7 +2,9 @@
 
 exports[`Nav renders dashboard version for desktop 1`] = `
 <DocumentFragment>
-  <header>
+  <header
+    class="nav__header"
+  >
     <div
       class="nav"
     >
@@ -265,71 +267,54 @@ exports[`Nav renders dashboard version for mobile 1`] = `
   color: #FFF;
 }
 
-<header>
+<div
+    class="c0"
+  >
     <div
-      class="c0"
+      class="c1"
     >
-      <div
-        class="c1"
-      >
-        <test-file-stub />
-      </div>
-      <div
-        class="c2"
-      >
-        <h1>
-          <span
-            class="editable-input editable-input--is-not-editing editable-input--has-value "
+      <test-file-stub />
+    </div>
+    <div
+      class="c2"
+    >
+      <h1>
+        <span
+          class="editable-input editable-input--is-not-editing editable-input--has-value "
+        >
+          <button
+            aria-hidden="false"
+            aria-label="Edit sketch name"
+            class="editable-input__label"
           >
-            <button
-              aria-hidden="false"
-              aria-label="Edit sketch name"
-              class="editable-input__label"
-            >
-              <span>
-                Test project name
-              </span>
-              <test-file-stub
-                aria-hidden="true"
-                classname="editable-input__icon"
-                focusable="false"
-              />
-            </button>
-            <input
+            <span>
+              Test project name
+            </span>
+            <test-file-stub
               aria-hidden="true"
-              aria-label="New sketch name"
-              class="editable-input__input"
-              disabled=""
-              maxlength="128"
-              type="text"
-              value="Test project name"
-            />
-          </span>
-        </h1>
-      </div>
-      <div
-        class="c3"
-      >
-        <div>
-          <a
-            href="/login"
-          >
-            <button
-              class="c4 c5"
-              display="inline"
+              classname="editable-input__icon"
               focusable="false"
-              kind="primary"
-              type="button"
-            >
-              <test-file-stub
-                aria-hidden="true"
-                classname="sc-fujyAs cSTVlM"
-                focusable="false"
-              />
-            </button>
-          </a>
-        </div>
-        <div>
+            />
+          </button>
+          <input
+            aria-hidden="true"
+            aria-label="New sketch name"
+            class="editable-input__input"
+            disabled=""
+            maxlength="128"
+            type="text"
+            value="Test project name"
+          />
+        </span>
+      </h1>
+    </div>
+    <div
+      class="c3"
+    >
+      <div>
+        <a
+          href="/login"
+        >
           <button
             class="c4 c5"
             display="inline"
@@ -339,152 +324,169 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-iqAclL iOZiVo"
+              classname="sc-fujyAs cSTVlM"
               focusable="false"
             />
           </button>
-          <ul
-            class=""
+        </a>
+      </div>
+      <div>
+        <button
+          class="c4 c5"
+          display="inline"
+          focusable="false"
+          kind="primary"
+          type="button"
+        >
+          <test-file-stub
+            aria-hidden="true"
+            classname="sc-iqAclL iOZiVo"
+            focusable="false"
+          />
+        </button>
+        <ul
+          class=""
+        >
+          <b>
+            File
+          </b>
+          <li
+            class="nav__dropdown-item"
           >
-            <b>
-              File
-            </b>
-            <li
-              class="nav__dropdown-item"
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                New
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              New
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Save
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Save
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <a
+              href="/p5/sketches"
+              role="menuitem"
             >
-              <a
-                href="/p5/sketches"
-                role="menuitem"
-              >
-                Examples
-              </a>
-            </li>
-            <b>
-              Edit
-            </b>
-            <li
-              class="nav__dropdown-item"
+              Examples
+            </a>
+          </li>
+          <b>
+            Edit
+          </b>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Tidy Code
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Tidy Code
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Find
-              </button>
-            </li>
-            <b>
-              Sketch
-            </b>
-            <li
-              class="nav__dropdown-item"
+              Find
+            </button>
+          </li>
+          <b>
+            Sketch
+          </b>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Add File
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Add File
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Add Folder
-              </button>
-            </li>
-            <b>
-              Settings
-            </b>
-            <li
-              class="nav__dropdown-item"
+              Add Folder
+            </button>
+          </li>
+          <b>
+            Settings
+          </b>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Preferences
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Preferences
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Language
-              </button>
-            </li>
-            <b>
-              Help
-            </b>
-            <li
-              class="nav__dropdown-item"
+              Language
+            </button>
+          </li>
+          <b>
+            Help
+          </b>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Keyboard Shortcuts
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Keyboard Shortcuts
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <a
+              href="https://p5js.org/reference/"
+              rel="noopener noreferrer"
+              role="menuitem"
+              target="_blank"
             >
-              <a
-                href="https://p5js.org/reference/"
-                rel="noopener noreferrer"
-                role="menuitem"
-                target="_blank"
-              >
-                Reference
-              </a>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Reference
+            </a>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <a
+              href="/about"
+              role="menuitem"
             >
-              <a
-                href="/about"
-                role="menuitem"
-              >
-                About
-              </a>
-            </li>
-          </ul>
-        </div>
+              About
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
-  </header>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`Nav renders editor version for desktop 1`] = `
 <DocumentFragment>
-  <header>
+  <header
+    class="nav__header"
+  >
     <div
       class="nav"
     >
@@ -966,71 +968,54 @@ exports[`Nav renders editor version for mobile 1`] = `
   color: #FFF;
 }
 
-<header>
+<div
+    class="c0"
+  >
     <div
-      class="c0"
+      class="c1"
     >
-      <div
-        class="c1"
-      >
-        <test-file-stub />
-      </div>
-      <div
-        class="c2"
-      >
-        <h1>
-          <span
-            class="editable-input editable-input--is-not-editing editable-input--has-value "
+      <test-file-stub />
+    </div>
+    <div
+      class="c2"
+    >
+      <h1>
+        <span
+          class="editable-input editable-input--is-not-editing editable-input--has-value "
+        >
+          <button
+            aria-hidden="false"
+            aria-label="Edit sketch name"
+            class="editable-input__label"
           >
-            <button
-              aria-hidden="false"
-              aria-label="Edit sketch name"
-              class="editable-input__label"
-            >
-              <span>
-                Test project name
-              </span>
-              <test-file-stub
-                aria-hidden="true"
-                classname="editable-input__icon"
-                focusable="false"
-              />
-            </button>
-            <input
+            <span>
+              Test project name
+            </span>
+            <test-file-stub
               aria-hidden="true"
-              aria-label="New sketch name"
-              class="editable-input__input"
-              disabled=""
-              maxlength="128"
-              type="text"
-              value="Test project name"
-            />
-          </span>
-        </h1>
-      </div>
-      <div
-        class="c3"
-      >
-        <div>
-          <a
-            href="/login"
-          >
-            <button
-              class="c4 c5"
-              display="inline"
+              classname="editable-input__icon"
               focusable="false"
-              kind="primary"
-              type="button"
-            >
-              <test-file-stub
-                aria-hidden="true"
-                classname="sc-fujyAs cSTVlM"
-                focusable="false"
-              />
-            </button>
-          </a>
-        </div>
-        <div>
+            />
+          </button>
+          <input
+            aria-hidden="true"
+            aria-label="New sketch name"
+            class="editable-input__input"
+            disabled=""
+            maxlength="128"
+            type="text"
+            value="Test project name"
+          />
+        </span>
+      </h1>
+    </div>
+    <div
+      class="c3"
+    >
+      <div>
+        <a
+          href="/login"
+        >
           <button
             class="c4 c5"
             display="inline"
@@ -1040,145 +1025,160 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-iqAclL iOZiVo"
+              classname="sc-fujyAs cSTVlM"
               focusable="false"
             />
           </button>
-          <ul
-            class=""
+        </a>
+      </div>
+      <div>
+        <button
+          class="c4 c5"
+          display="inline"
+          focusable="false"
+          kind="primary"
+          type="button"
+        >
+          <test-file-stub
+            aria-hidden="true"
+            classname="sc-iqAclL iOZiVo"
+            focusable="false"
+          />
+        </button>
+        <ul
+          class=""
+        >
+          <b>
+            File
+          </b>
+          <li
+            class="nav__dropdown-item"
           >
-            <b>
-              File
-            </b>
-            <li
-              class="nav__dropdown-item"
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                New
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              New
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Save
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Save
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <a
+              href="/p5/sketches"
+              role="menuitem"
             >
-              <a
-                href="/p5/sketches"
-                role="menuitem"
-              >
-                Examples
-              </a>
-            </li>
-            <b>
-              Edit
-            </b>
-            <li
-              class="nav__dropdown-item"
+              Examples
+            </a>
+          </li>
+          <b>
+            Edit
+          </b>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Tidy Code
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Tidy Code
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Find
-              </button>
-            </li>
-            <b>
-              Sketch
-            </b>
-            <li
-              class="nav__dropdown-item"
+              Find
+            </button>
+          </li>
+          <b>
+            Sketch
+          </b>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Add File
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Add File
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Add Folder
-              </button>
-            </li>
-            <b>
-              Settings
-            </b>
-            <li
-              class="nav__dropdown-item"
+              Add Folder
+            </button>
+          </li>
+          <b>
+            Settings
+          </b>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Preferences
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Preferences
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Language
-              </button>
-            </li>
-            <b>
-              Help
-            </b>
-            <li
-              class="nav__dropdown-item"
+              Language
+            </button>
+          </li>
+          <b>
+            Help
+          </b>
+          <li
+            class="nav__dropdown-item"
+          >
+            <button
+              role="menuitem"
             >
-              <button
-                role="menuitem"
-              >
-                Keyboard Shortcuts
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Keyboard Shortcuts
+            </button>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <a
+              href="https://p5js.org/reference/"
+              rel="noopener noreferrer"
+              role="menuitem"
+              target="_blank"
             >
-              <a
-                href="https://p5js.org/reference/"
-                rel="noopener noreferrer"
-                role="menuitem"
-                target="_blank"
-              >
-                Reference
-              </a>
-            </li>
-            <li
-              class="nav__dropdown-item"
+              Reference
+            </a>
+          </li>
+          <li
+            class="nav__dropdown-item"
+          >
+            <a
+              href="/about"
+              role="menuitem"
             >
-              <a
-                href="/about"
-                role="menuitem"
-              >
-                About
-              </a>
-            </li>
-          </ul>
-        </div>
+              About
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
-  </header>
+  </div>
 </DocumentFragment>
 `;
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 1f4a7fc364..58691ff251 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -3,26 +3,34 @@
 .nav {
   height: #{math.div(42, $base-font-size)}rem;
   display: flex;
+  width: 100%;
   flex-direction: row;
   justify-content: space-between;
 
-  @include themify() {
-    border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
-  }
-
   & button {
     padding: 0;
   }
 }
 
+.nav__header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  @include themify() {
+    border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
+  }
+  // padding-left: #{math.div(20, $base-font-size)}rem;
+}
+
 .nav__items-left,
 .nav__items-right {
   list-style: none;
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
-  height: 100%;
   align-items: center;
+  height: 100%;
 }
 
 .preview-nav__editor-svg {