diff --git a/client/common/ButtonOrLink.jsx b/client/common/ButtonOrLink.jsx
index 924f10802..fa7258dff 100644
--- a/client/common/ButtonOrLink.jsx
+++ b/client/common/ButtonOrLink.jsx
@@ -5,23 +5,34 @@ import PropTypes from 'prop-types';
 /**
  * Helper for switching between <button>, <a>, and <Link>
  */
-const ButtonOrLink = ({ href, children, ...props }) => {
+
+const ButtonOrLink = React.forwardRef(({ href, children, ...props }, ref) => {
   if (href) {
     if (href.startsWith('http')) {
       return (
-        <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        <a
+          ref={ref}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          {...props}
+        >
           {children}
         </a>
       );
     }
     return (
-      <Link to={href} {...props}>
+      <Link ref={ref} to={href} {...props}>
         {children}
       </Link>
     );
   }
-  return <button {...props}>{children}</button>;
-};
+  return (
+    <button ref={ref} {...props}>
+      {children}
+    </button>
+  );
+});
 
 /**
  * Accepts all the props of an HTML <a> or <button> tag.
diff --git a/client/common/usePrevious.js b/client/common/usePrevious.js
new file mode 100644
index 000000000..ed46581cb
--- /dev/null
+++ b/client/common/usePrevious.js
@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious(value) {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}
diff --git a/client/components/Menubar/Menubar.jsx b/client/components/Menubar/Menubar.jsx
index b80624651..439aa0768 100644
--- a/client/components/Menubar/Menubar.jsx
+++ b/client/components/Menubar/Menubar.jsx
@@ -1,19 +1,135 @@
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  useEffect
+} from 'react';
 import useModalClose from '../../common/useModalClose';
 import { MenuOpenContext, MenubarContext } from './contexts';
+import usePrevious from '../../common/usePrevious';
+
+/**
+ * @component
+ * @param {object} props
+ * @param {React.ReactNode} props.children - Menu items that will be rendered in the menubar
+ * @param {string} [props.className='nav__menubar'] - CSS class name to apply to the menubar
+ * @returns {JSX.Element}
+ */
+
+/**
+ * Menubar manages a collection of menu items and their submenus. It provides keyboard navigation,
+ * focus and state management, and other accessibility features for the menu items and submenus.
+ *
+ * @example
+ * <Menubar>
+ *  <MenubarSubmenu id="file" title="File">
+ *  ... menu items
+ *  </MenubarSubmenu>
+ * </Menubar>
+ */
 
 function Menubar({ children, className }) {
+  // core state for menu management
   const [menuOpen, setMenuOpen] = useState('none');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const prevIndex = usePrevious(activeIndex);
+  const [hasFocus, setHasFocus] = useState(false);
+
+  // refs for menu items and their ids
+  const menuItems = useRef(new Set()).current;
+  const menuItemToId = useRef(new Map()).current;
 
+  // ref for hiding submenus
   const timerRef = useRef(null);
 
-  const handleClose = useCallback(() => {
+  // get the id of a menu item by its index
+  const getMenuId = useCallback(
+    (index) => {
+      const items = Array.from(menuItems);
+      const itemNode = items[index];
+      return menuItemToId.get(itemNode);
+    },
+    [menuItems, menuItemToId, activeIndex]
+  );
+
+  /**
+   * navigation functions
+   */
+  const prev = useCallback(() => {
+    const newIndex = (activeIndex - 1 + menuItems.size) % menuItems.size;
+    setActiveIndex(newIndex);
+
+    if (menuOpen !== 'none') {
+      const newMenuId = getMenuId(newIndex);
+      setMenuOpen(newMenuId);
+    }
+  }, [activeIndex, menuItems, menuOpen, getMenuId]);
+
+  const next = useCallback(() => {
+    const newIndex = (activeIndex + 1) % menuItems.size;
+    setActiveIndex(newIndex);
+
+    if (menuOpen !== 'none') {
+      const newMenuId = getMenuId(newIndex);
+      setMenuOpen(newMenuId);
+    }
+  }, [activeIndex, menuItems, menuOpen, getMenuId]);
+
+  const first = useCallback(() => {
+    setActiveIndex(0);
+  }, []);
+
+  const last = useCallback(() => {
+    setActiveIndex(menuItems.size - 1);
+  }, []);
+
+  // closes the menu and returns focus to the active menu item
+  // is called on Escape key press
+  const close = useCallback(() => {
+    if (menuOpen === 'none') return;
+
+    const items = Array.from(menuItems);
+    const activeNode = items[activeIndex];
     setMenuOpen('none');
-  }, [setMenuOpen]);
+    activeNode.focus();
+  }, [activeIndex, menuItems, menuOpen]);
 
-  const nodeRef = useModalClose(handleClose);
+  // toggle the open state of a submenu
+  const toggleMenuOpen = useCallback((id) => {
+    setMenuOpen((prevState) => (prevState === id ? 'none' : id));
+  });
+
+  /**
+   * Register top level menu items. Stores both the DOM node and the id of the submenu.
+   * Access to the DOM node is needed for focus management and tabindex control,
+   * while the id is needed to toggle the submenu open and closed.
+   *
+   * @param {React.RefObject} ref - a ref to the DOM node of the menu item
+   * @param {string} submenuId - the id of the submenu that the menu item opens
+   *
+   */
+  const registerTopLevelItem = useCallback(
+    (ref, submenuId) => {
+      const menuItemNode = ref.current;
+
+      if (menuItemNode) {
+        menuItems.add(menuItemNode);
+        menuItemToId.set(menuItemNode, submenuId); // store the id of the submenu
+      }
 
+      return () => {
+        menuItems.delete(menuItemNode);
+        menuItemToId.delete(menuItemNode);
+      };
+    },
+    [menuItems, menuItemToId]
+  );
+
+  /**
+   * focus and blur management
+   */
   const clearHideTimeout = useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
@@ -21,17 +137,77 @@ function Menubar({ children, className }) {
     }
   }, [timerRef]);
 
+  const handleClose = useCallback(() => {
+    clearHideTimeout();
+    setMenuOpen('none');
+  }, [setMenuOpen]);
+
+  const nodeRef = useModalClose(handleClose);
+
+  const handleFocus = useCallback(() => {
+    setHasFocus(true);
+  }, []);
+
   const handleBlur = useCallback(() => {
-    timerRef.current = setTimeout(() => setMenuOpen('none'), 10);
-  }, [timerRef, setMenuOpen]);
+    const isInMenu = nodeRef.current?.contains(document.activeElement);
 
-  const toggleMenuOpen = useCallback(
-    (menu) => {
-      setMenuOpen((prevState) => (prevState === menu ? 'none' : menu));
+    if (!isInMenu) {
+      timerRef.current = setTimeout(() => {
+        setMenuOpen('none');
+        setHasFocus(false);
+      }, 10);
+    }
+  }, [nodeRef]);
+
+  // keyboard navigation
+  const keyHandlers = {
+    ArrowLeft: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      prev();
     },
-    [setMenuOpen]
-  );
+    ArrowRight: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      next();
+    },
+    Escape: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      close();
+    },
+    Tab: (e) => {
+      e.stopPropagation();
+      // close
+    },
+    Home: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      first();
+    },
+    End: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      last();
+    }
+    // to do: support direct access keys
+  };
 
+  // focus the active menu item and set its tabindex
+  useEffect(() => {
+    if (activeIndex !== prevIndex) {
+      const items = Array.from(menuItems);
+      const activeNode = items[activeIndex];
+      const prevNode = items[prevIndex];
+
+      // roving tabindex
+      prevNode?.setAttribute('tabindex', '-1');
+      activeNode?.setAttribute('tabindex', '0');
+      activeNode.focus();
+    }
+  }, [activeIndex, prevIndex, menuItems]);
+
+  // context value for dropdowns and menu items
   const contextValue = useMemo(
     () => ({
       createMenuHandlers: (menu) => ({
@@ -40,6 +216,15 @@ function Menubar({ children, className }) {
         },
         onClick: () => {
           toggleMenuOpen(menu);
+          const items = Array.from(menuItems);
+          const index = items.findIndex(
+            (item) => menuItemToId.get(item) === menu
+          );
+          const item = items[index];
+          if (index !== -1) {
+            setActiveIndex(index);
+            item.focus();
+          }
         },
         onBlur: handleBlur,
         onFocus: clearHideTimeout
@@ -57,18 +242,48 @@ function Menubar({ children, className }) {
           setMenuOpen(menu);
         }
       }),
-      toggleMenuOpen
+      menuItems,
+      activeIndex,
+      setActiveIndex,
+      registerTopLevelItem,
+      setMenuOpen,
+      toggleMenuOpen,
+      hasFocus,
+      setHasFocus
     }),
-    [setMenuOpen, toggleMenuOpen, clearHideTimeout, handleBlur]
+    [
+      menuItems,
+      activeIndex,
+      setActiveIndex,
+      registerTopLevelItem,
+      menuOpen,
+      toggleMenuOpen,
+      hasFocus,
+      setHasFocus,
+      clearHideTimeout,
+      handleBlur
+    ]
   );
 
   return (
     <MenubarContext.Provider value={contextValue}>
-      <div className={className} ref={nodeRef}>
+      <ul
+        className={className}
+        role="menubar"
+        ref={nodeRef}
+        aria-orientation="horizontal"
+        onFocus={handleFocus}
+        onKeyDown={(e) => {
+          const handler = keyHandlers[e.key];
+          if (handler) {
+            handler(e);
+          }
+        }}
+      >
         <MenuOpenContext.Provider value={menuOpen}>
           {children}
         </MenuOpenContext.Provider>
-      </div>
+      </ul>
     </MenubarContext.Provider>
   );
 }
@@ -80,7 +295,7 @@ Menubar.propTypes = {
 
 Menubar.defaultProps = {
   children: null,
-  className: 'nav'
+  className: 'nav__menubar'
 };
 
 export default Menubar;
diff --git a/client/components/Menubar/Menubar.test.jsx b/client/components/Menubar/Menubar.test.jsx
new file mode 100644
index 000000000..0f78d2f54
--- /dev/null
+++ b/client/components/Menubar/Menubar.test.jsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../../test-utils';
+import Menubar from './Menubar';
+import MenubarSubmenu from './MenubarSubmenu';
+import MenubarItem from './MenubarItem';
+
+describe('Menubar', () => {
+  const renderMenubar = () => {
+    render(
+      <Menubar>
+        <MenubarSubmenu id="file" title="File">
+          <MenubarItem id="file-new" title="New" onClick={jest.fn()}>
+            New
+          </MenubarItem>
+          <MenubarItem id="file-save" title="Save" onClick={jest.fn()}>
+            Save
+          </MenubarItem>
+          <MenubarItem id="file-open" title="Open" onClick={jest.fn()}>
+            Open
+          </MenubarItem>
+        </MenubarSubmenu>
+        <MenubarSubmenu id="edit" title="Edit">
+          <MenubarItem id="edit-tidy" title="Tidy" onClick={jest.fn()}>
+            Tidy
+          </MenubarItem>
+          <MenubarItem id="edit-find" title="Find" onClick={jest.fn()}>
+            Find
+          </MenubarItem>
+          <MenubarItem id="edit-replace" title="Replace" onClick={jest.fn()}>
+            Replace
+          </MenubarItem>
+        </MenubarSubmenu>
+      </Menubar>
+    );
+  };
+
+  it('should render a menubar with submenu triggers', () => {
+    renderMenubar();
+
+    const fileMenuTrigger = screen.getByRole('menuitem', { name: 'File' });
+    const editMenuTrigger = screen.getByRole('menuitem', { name: 'Edit' });
+
+    expect(fileMenuTrigger).toBeInTheDocument();
+    expect(editMenuTrigger).toBeInTheDocument();
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should open a submenu when clicked', () => {
+    renderMenubar();
+
+    const fileMenuTrigger = screen.getByRole('menuitem', { name: 'File' });
+    const editMenuTrigger = screen.getByRole('menuitem', { name: 'Edit' });
+
+    fireEvent.click(fileMenuTrigger);
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'true');
+    expect(editMenuTrigger).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(document.body);
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should support top-level keyboard navigation', () => {
+    renderMenubar();
+
+    const fileMenuTrigger = screen.getByRole('menuitem', { name: 'File' });
+    const editMenuTrigger = screen.getByRole('menuitem', { name: 'Edit' });
+    fireEvent.focus(fileMenuTrigger);
+
+    fireEvent.keyDown(fileMenuTrigger, { key: 'ArrowRight' });
+    expect(editMenuTrigger).toHaveFocus();
+
+    fireEvent.keyDown(editMenuTrigger, { key: 'ArrowLeft' });
+    expect(fileMenuTrigger).toHaveFocus();
+
+    const newMenuItem = screen.getByRole('menuitem', { name: 'New' });
+
+    fireEvent.keyDown(fileMenuTrigger, { key: 'ArrowDown' });
+    expect(newMenuItem).toHaveFocus();
+
+    fireEvent.keyDown(newMenuItem, { key: 'Escape' });
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should support submenu keyboard navigation', () => {
+    renderMenubar();
+
+    const fileMenuTrigger = screen.getByRole('menuitem', { name: 'File' });
+    const newMenuItem = screen.getByRole('menuitem', { name: 'New' });
+    const openMenuItem = screen.getByRole('menuitem', { name: 'Open' });
+
+    const editMenuTrigger = screen.getByRole('menuitem', { name: 'Edit' });
+
+    fireEvent.click(fileMenuTrigger);
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.keyDown(fileMenuTrigger, { key: 'ArrowDown' });
+    expect(newMenuItem).toHaveFocus();
+
+    fireEvent.keyDown(newMenuItem, { key: 'ArrowUp' });
+    expect(newMenuItem).not.toHaveFocus();
+    expect(openMenuItem).toHaveFocus();
+
+    fireEvent.keyDown(openMenuItem, { key: 'ArrowRight' });
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'false');
+    expect(openMenuItem).not.toHaveFocus();
+    expect(editMenuTrigger).toHaveFocus();
+    expect(editMenuTrigger).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.keyDown(editMenuTrigger, { key: 'ArrowLeft' });
+    expect(editMenuTrigger).toHaveAttribute('aria-expanded', 'false');
+    expect(editMenuTrigger).not.toHaveFocus();
+    expect(fileMenuTrigger).toHaveFocus();
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.keyDown(newMenuItem, { key: 'Escape' });
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should activate a menu item when clicked', () => {
+    const handleClick = jest.fn();
+
+    render(
+      <Menubar>
+        <MenubarSubmenu id="file" title="File">
+          <MenubarItem id="file-new" title="New" onClick={handleClick}>
+            New
+          </MenubarItem>
+        </MenubarSubmenu>
+      </Menubar>
+    );
+
+    const fileMenuTrigger = screen.getByRole('menuitem', { name: 'File' });
+    const newMenuItem = screen.getByRole('menuitem', { name: 'New' });
+    fireEvent.click(fileMenuTrigger);
+    fireEvent.mouseUp(newMenuItem);
+    fireEvent.click(newMenuItem);
+
+    expect(handleClick).toHaveBeenCalled();
+    expect(fileMenuTrigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should have proper ARIA attributes', () => {
+    renderMenubar();
+
+    const menubar = screen.getByRole('menubar');
+    expect(menubar).toHaveAttribute('aria-orientation', 'horizontal');
+
+    const fileMenu = screen.getByRole('menuitem', { name: 'File' });
+    expect(fileMenu).toHaveAttribute('aria-haspopup', 'menu');
+    expect(fileMenu).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(fileMenu);
+    expect(fileMenu).toHaveAttribute('aria-expanded', 'true');
+  });
+});
diff --git a/client/components/Menubar/MenubarItem.jsx b/client/components/Menubar/MenubarItem.jsx
index 8d595bb5c..687541b74 100644
--- a/client/components/Menubar/MenubarItem.jsx
+++ b/client/components/Menubar/MenubarItem.jsx
@@ -1,40 +1,111 @@
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, { useEffect, useContext, useRef } from 'react';
+import { MenubarContext, SubmenuContext, ParentMenuContext } from './contexts';
 import ButtonOrLink from '../../common/ButtonOrLink';
-import { MenubarContext, ParentMenuContext } from './contexts';
+
+/**
+ * @component
+ * @param {object} props
+ * @param {string} [props.className='nav__dropdown-item'] - CSS class name to apply to the list item
+ * @param {string} props.id - The id of the list item
+ * @param {string} [props.role='menuitem'] - The role of the list item
+ * @param {boolean} [props.hideIf=false] - Whether to hide the item
+ * @param {boolean} [props.selected=false] - Whether the item is selected
+ * @returns {JSX.Element}
+ */
+
+/**
+ * MenubarItem wraps a button or link in an accessible list item that
+ * integrates with keyboard navigation and other submenu behaviors.
+ *
+ * @example
+ * ```jsx
+ * // basic MenubarItem with click handler and keyboard shortcut
+ * <MenubarItem id="sketch-run" onClick={() => dispatch(startSketch())}>
+ *   Run
+ *   <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
+ * </MenubarItem>
+ *
+ * // as an option in a listbox
+ * <MenubarItem
+ *   id={key}
+ *   key={key}
+ *   value={key}
+ *   onClick={handleLangSelection}
+ *   role="option"
+ *   selected={key === language}
+ * >
+ *   {languageKeyToLabel(key)}
+ * </MenubarItem>
+ * ```
+ */
 
 function MenubarItem({
-  hideIf,
   className,
+  id,
   role: customRole,
+  hideIf,
   selected,
   ...rest
 }) {
-  const parent = useContext(ParentMenuContext);
-
-  const { createMenuItemHandlers } = useContext(MenubarContext);
-
-  const handlers = useMemo(() => createMenuItemHandlers(parent), [
-    createMenuItemHandlers,
-    parent
-  ]);
-
+  // moved to top bc of rules of hooks error, may remove if not needed
   if (hideIf) {
     return null;
   }
 
+  // core context and state management
+  const { createMenuItemHandlers, hasFocus } = useContext(MenubarContext);
+  const {
+    setSubmenuActiveIndex,
+    submenuItems,
+    registerSubmenuItem
+  } = useContext(SubmenuContext);
+  const parent = useContext(ParentMenuContext);
+
+  // ref for the list item
+  const menuItemRef = useRef(null);
+
+  // handlers from parent menu
+  const handlers = createMenuItemHandlers(parent);
+
+  // role and aria-selected
   const role = customRole || 'menuitem';
   const ariaSelected = role === 'option' ? { 'aria-selected': selected } : {};
 
+  // focus submenu item on mouse enter
+  const handleMouseEnter = () => {
+    if (hasFocus) {
+      const items = Array.from(submenuItems);
+      const index = items.findIndex((item) => item === menuItemRef.current);
+      if (index !== -1) {
+        setSubmenuActiveIndex(index);
+      }
+    }
+  };
+
+  // register with parent submenu for keyboard navigation
+  useEffect(() => {
+    const unregister = registerSubmenuItem(menuItemRef);
+    return unregister;
+  }, [submenuItems, registerSubmenuItem]);
+
   return (
-    <li className={className}>
-      <ButtonOrLink {...rest} {...handlers} {...ariaSelected} role={role} />
+    <li className={className} ref={menuItemRef} onMouseEnter={handleMouseEnter}>
+      <ButtonOrLink
+        {...rest}
+        {...handlers}
+        {...ariaSelected}
+        role={role}
+        tabIndex={-1}
+        id={id}
+      />
     </li>
   );
 }
 
 MenubarItem.propTypes = {
   ...ButtonOrLink.propTypes,
+  id: PropTypes.string,
   onClick: PropTypes.func,
   value: PropTypes.string,
   /**
@@ -52,6 +123,7 @@ MenubarItem.defaultProps = {
   hideIf: false,
   className: 'nav__dropdown-item',
   role: 'menuitem',
+  id: undefined,
   selected: false
 };
 
diff --git a/client/components/Menubar/MenubarSubmenu.jsx b/client/components/Menubar/MenubarSubmenu.jsx
index 13b0e3317..c62dbd8e5 100644
--- a/client/components/Menubar/MenubarSubmenu.jsx
+++ b/client/components/Menubar/MenubarSubmenu.jsx
@@ -2,9 +2,21 @@
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  useCallback,
+  useRef,
+  useMemo
+} from 'react';
+import {
+  MenuOpenContext,
+  MenubarContext,
+  SubmenuContext,
+  ParentMenuContext
+} from './contexts';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
-import { MenuOpenContext, MenubarContext, ParentMenuContext } from './contexts';
 
 export function useMenuProps(id) {
   const activeMenu = useContext(MenuOpenContext);
@@ -25,14 +37,101 @@ export function useMenuProps(id) {
  * MenubarTrigger
  * -----------------------------------------------------------------------------------------------*/
 
-function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} [props.role='menuitem'] - The ARIA role of the trigger button
+ * @param {string} [props.hasPopup='menu'] - The ARIA property that indicates the presence of a popup
+ * @returns {JSX.Element}
+ */
+
+/**
+ * MenubarTrigger renders a button that toggles a submenu. It handles keyboard navigations and supports
+ * screen readers. It needs to be within a submenu context.
+ *
+ * @example
+ * <li
+ *  className={classNames('nav__item', isOpen && 'nav__item--open')}
+ *  ref={listItemRef}
+ * >
+ *  <MenubarTrigger
+ *    ref={buttonRef}
+ *    role={triggerRole}
+ *    hasPopup={hasPopup}
+ *    {...handlers}
+ *    {...props}
+ *    tabIndex={-1}
+ *  />
+ *  ... menubar list
+ * </li>
+ */
+
+const MenubarTrigger = React.forwardRef(({ role, hasPopup, ...props }, ref) => {
+  const {
+    setActiveIndex,
+    menuItems,
+    registerTopLevelItem,
+    hasFocus
+  } = useContext(MenubarContext);
+  const { id, title, first, last } = useContext(SubmenuContext);
   const { isOpen, handlers } = useMenuProps(id);
 
+  // update active index when mouse enters the trigger and the menu has focus
+  const handleMouseEnter = () => {
+    if (hasFocus) {
+      const items = Array.from(menuItems);
+      const index = items.findIndex((item) => item === ref.current);
+
+      if (index !== -1) {
+        setActiveIndex(index);
+      }
+    }
+  };
+
+  // keyboard handlers
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case 'ArrowDown':
+        if (!isOpen) {
+          e.preventDefault();
+          e.stopPropagation();
+          first();
+        }
+        break;
+      case 'ArrowUp':
+        if (!isOpen) {
+          e.preventDefault();
+          e.stopPropagation();
+          last();
+        }
+        break;
+      case 'Enter':
+      case ' ':
+        if (!isOpen) {
+          e.preventDefault();
+          e.stopPropagation();
+          first();
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
+  // register trigger with parent menubar
+  useEffect(() => {
+    const unregister = registerTopLevelItem(ref, id);
+    return unregister;
+  }, [menuItems, registerTopLevelItem]);
+
   return (
     <button
-      {...handlers}
       {...props}
+      {...handlers}
+      ref={ref}
       role={role}
+      onMouseEnter={handleMouseEnter}
+      onKeyDown={handleKeyDown}
       aria-haspopup={hasPopup}
       aria-expanded={isOpen}
     >
@@ -44,11 +143,9 @@ function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
       />
     </button>
   );
-}
+});
 
 MenubarTrigger.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired,
   role: PropTypes.string,
   hasPopup: PropTypes.oneOf(['menu', 'listbox', 'true'])
 };
@@ -62,9 +159,33 @@ MenubarTrigger.defaultProps = {
  * MenubarList
  * -----------------------------------------------------------------------------------------------*/
 
-function MenubarList({ id, children, role, ...props }) {
+/**
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - MenubarItems that should be rendered in the list
+ * @param {string} [props.role='menu'] - The ARIA role of the list element
+ * @returns {JSX.Element}
+ */
+
+/**
+ * MenubarList renders the container for menu items in a submenu. It provides context and handles ARIA roles.
+ *
+ * @example
+ * <MenubarList role={listRole}>
+ *  ... <MenubarItem> elements
+ * </MenubarList>
+ */
+
+function MenubarList({ children, role, ...props }) {
+  const { id, title } = useContext(SubmenuContext);
+
   return (
-    <ul className="nav__dropdown" role={role} {...props}>
+    <ul
+      className="nav__dropdown"
+      role={role}
+      aria-label={`${title} menu`}
+      {...props}
+    >
       <ParentMenuContext.Provider value={id}>
         {children}
       </ParentMenuContext.Provider>
@@ -73,7 +194,6 @@ function MenubarList({ id, children, role, ...props }) {
 }
 
 MenubarList.propTypes = {
-  id: PropTypes.string.isRequired,
   children: PropTypes.node,
   role: PropTypes.oneOf(['menu', 'listbox'])
 };
@@ -87,41 +207,273 @@ MenubarList.defaultProps = {
  * MenubarSubmenu
  * -----------------------------------------------------------------------------------------------*/
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - A list of menu items that will be rendered in the menubar
+ * @param {string} props.id - The unique id of the submenu
+ * @param {string} props.title - The title of the submenu
+ * @param {string} [props.triggerRole='menuitem'] - The ARIA role of the trigger button
+ * @param {string} [props.listRole='menu'] - The ARIA role of the list element
+ * @returns {JSX.Element}
+ */
+
+/**
+ * MenubarSubmenu manages a triggerable submenu within a menubar. It is a compound component
+ * that manages the state of the submenu and its items. It also provides keyboard navigation
+ * and screen reader support. Supports menu and listbox roles. Needs to be a direct child of Menubar.
+ *
+ * @example
+ * <Menubar>
+ *  <MenubarSubmenu id="file" title="File">
+ *    <MenubarItem id="file-new" onClick={handleNew}>New</MenubarItem>
+ *    <MenubarItem id="file-save" onClick={handleSave}>Save</MenubarItem>
+ *  </MenubarSubmenu>
+ * </Menubar>
+ */
+
 function MenubarSubmenu({
+  children,
   id,
   title,
-  children,
   triggerRole: customTriggerRole,
   listRole: customListRole,
   ...props
 }) {
-  const { isOpen } = useMenuProps(id);
+  // core state for submenu management
+  const { isOpen, handlers } = useMenuProps(id);
+  const [submenuActiveIndex, setSubmenuActiveIndex] = useState(0);
+  const { setMenuOpen, toggleMenuOpen } = useContext(MenubarContext);
+  const submenuItems = useRef(new Set()).current;
 
+  // refs for the button and list elements
+  const buttonRef = useRef(null);
+  const listItemRef = useRef(null);
+
+  // roles and properties for the button and list elements
   const triggerRole = customTriggerRole || 'menuitem';
   const listRole = customListRole || 'menu';
-
   const hasPopup = listRole === 'listbox' ? 'listbox' : 'menu';
 
+  /**
+   * navigation functions for the submenu
+   */
+  const prev = useCallback(() => {
+    const newIndex =
+      submenuActiveIndex < 0
+        ? submenuItems.size - 1
+        : (submenuActiveIndex - 1 + submenuItems.size) % submenuItems.size;
+    setSubmenuActiveIndex(newIndex);
+  }, [submenuActiveIndex, submenuItems]);
+
+  const next = useCallback(() => {
+    const newIndex = (submenuActiveIndex + 1) % submenuItems.size;
+    setSubmenuActiveIndex(newIndex);
+  }, [submenuActiveIndex, submenuItems]);
+
+  const first = useCallback(() => {
+    toggleMenuOpen(id);
+
+    if (submenuItems.size > 0) {
+      setSubmenuActiveIndex(0);
+    }
+  }, [submenuItems]);
+
+  const last = useCallback(() => {
+    toggleMenuOpen(id);
+    if (submenuItems.size > 0) {
+      setSubmenuActiveIndex(submenuItems.size - 1);
+    }
+  }, [submenuItems]);
+
+  // activate the selected item
+  const activate = useCallback(() => {
+    const items = Array.from(submenuItems);
+    const activeItem = items[submenuActiveIndex]; // get the active item
+
+    if (activeItem) {
+      // since active item is a <li> element, we need to get the button or link inside it
+      const activeItemNode = activeItem.firstChild;
+      activeItemNode.click();
+
+      toggleMenuOpen(id);
+
+      // check if buttonRef is available and focus it
+      // we check because the button might be unmounted when activating a link or button
+      if (buttonRef.current) {
+        buttonRef.current.focus();
+      }
+    }
+  }, [submenuActiveIndex, submenuItems, buttonRef]);
+
+  const close = useCallback(() => {
+    setMenuOpen('none');
+
+    if (buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, [buttonRef]);
+
+  /**
+   * Register submenu items for keyboard navigation.
+   *
+   * @param {React.RefObject} ref - a ref to the DOM node of the menu item
+   *
+   */
+  const registerSubmenuItem = useCallback(
+    (ref) => {
+      const submenuItemNode = ref.current;
+
+      if (submenuItemNode) {
+        submenuItems.add(submenuItemNode);
+      }
+
+      return () => {
+        submenuItems.delete(submenuItemNode);
+      };
+    },
+    [submenuItems]
+  );
+
+  // key handlers for submenu navigation
+  const keyHandlers = {
+    ArrowUp: (e) => {
+      if (!isOpen) return;
+      e.preventDefault();
+      e.stopPropagation();
+      prev();
+    },
+    ArrowDown: (e) => {
+      if (!isOpen) return;
+      e.preventDefault();
+      e.stopPropagation();
+      next();
+    },
+    Enter: (e) => {
+      if (!isOpen) return;
+      e.preventDefault();
+      e.stopPropagation();
+      activate();
+    },
+    ' ': (e) => {
+      // same as Enter
+      if (!isOpen) return;
+      e.preventDefault();
+      e.stopPropagation();
+      activate();
+    },
+    Escape: (e) => {
+      if (!isOpen) return;
+      e.preventDefault();
+      e.stopPropagation();
+      close();
+    },
+    Tab: (e) => {
+      // close
+      if (!isOpen) return;
+      // e.preventDefault();
+      e.stopPropagation();
+      setMenuOpen('none');
+    }
+    // support direct access keys
+  };
+
+  // our custom keydown handler
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) return;
+
+      const handler = keyHandlers[e.key];
+
+      if (handler) {
+        handler(e);
+      }
+    },
+    [isOpen, keyHandlers]
+  );
+
+  // reset submenu active index when submenu is closed
+  useEffect(() => {
+    if (!isOpen) {
+      setSubmenuActiveIndex(-1);
+    }
+  }, [isOpen]);
+
+  // add keydown event listener to list when submenu is open
+  useEffect(() => {
+    const el = listItemRef.current;
+    if (!el) return () => {};
+
+    el.addEventListener('keydown', handleKeyDown);
+    return () => {
+      el.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, keyHandlers]);
+
+  // focus the active item when submenu is open
+  useEffect(() => {
+    if (isOpen && submenuItems.size > 0) {
+      const items = Array.from(submenuItems);
+      const activeItem = items[submenuActiveIndex];
+
+      if (activeItem) {
+        const activeNode = activeItem.querySelector(
+          '[role="menuitem"], [role="option"]'
+        );
+        if (activeNode) {
+          activeNode.focus();
+        }
+      }
+    }
+  }, [isOpen, submenuItems, submenuActiveIndex]);
+
+  const submenuContext = useMemo(
+    () => ({
+      id,
+      title,
+      submenuItems,
+      submenuActiveIndex,
+      setSubmenuActiveIndex,
+      registerSubmenuItem,
+      first,
+      last
+    }),
+    [
+      id,
+      title,
+      submenuItems,
+      submenuActiveIndex,
+      setSubmenuActiveIndex,
+      registerSubmenuItem,
+      first,
+      last
+    ]
+  );
+
   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>
+    <SubmenuContext.Provider value={submenuContext}>
+      <li
+        className={classNames('nav__item', isOpen && 'nav__item--open')}
+        ref={listItemRef}
+      >
+        <MenubarTrigger
+          ref={buttonRef}
+          role={triggerRole}
+          hasPopup={hasPopup}
+          {...handlers}
+          {...props}
+          tabIndex={-1}
+        />
+        <MenubarList role={listRole}>{children}</MenubarList>
+      </li>
+    </SubmenuContext.Provider>
   );
 }
 
 MenubarSubmenu.propTypes = {
   id: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired,
   children: PropTypes.node,
+  title: PropTypes.node.isRequired,
   triggerRole: PropTypes.string,
   listRole: PropTypes.string
 };
diff --git a/client/components/Menubar/contexts.jsx b/client/components/Menubar/contexts.jsx
index ab3bb9ffc..18cad6c36 100644
--- a/client/components/Menubar/contexts.jsx
+++ b/client/components/Menubar/contexts.jsx
@@ -9,3 +9,5 @@ export const MenubarContext = createContext({
   createMenuItemHandlers: () => ({}),
   toggleMenuOpen: () => {}
 });
+
+export const SubmenuContext = createContext({});
diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index f40e9137b..4da1e13ff 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -39,10 +39,16 @@ const Nav = ({ layout }) => {
   ) : (
     <>
       <header className="nav__header">
-        <Menubar>
-          <LeftLayout layout={layout} />
-          <UserMenu />
-        </Menubar>
+        <div className="nav__item-logo">
+          <Logo />
+        </div>
+
+        <nav className="nav">
+          <Menubar>
+            <LeftLayout layout={layout} />
+            <UserMenu />
+          </Menubar>
+        </nav>
       </header>
     </>
   );
@@ -87,19 +93,40 @@ const UserMenu = () => {
   return null;
 };
 
-const DashboardMenu = () => {
+const Logo = () => {
   const { t } = useTranslation();
-  const editorLink = useSelector(selectSketchPath);
-  return (
-    <ul className="nav__items-left">
-      <li className="nav__item-logo">
+  const user = useSelector((state) => state.user);
+
+  if (user?.username) {
+    return (
+      <Link to={`/${user.username}/sketches`}>
         <LogoIcon
           role="img"
           aria-label={t('Common.p5logoARIA')}
           focusable="false"
           className="svg__logo"
         />
-      </li>
+      </Link>
+    );
+  }
+
+  return (
+    <a href="https://p5js.org">
+      <LogoIcon
+        role="img"
+        aria-label={t('Common.p5logoARIA')}
+        focusable="true"
+        className="svg__logo"
+      />
+    </a>
+  );
+};
+
+const DashboardMenu = () => {
+  const { t } = useTranslation();
+  const editorLink = useSelector(selectSketchPath);
+  return (
+    <ul className="nav__items-left" role="group">
       <li className="nav__item nav__item--no-icon">
         <Link to={editorLink} className="nav__back-link">
           <CaretLeftIcon
@@ -118,7 +145,7 @@ const ProjectMenu = () => {
   const isUserOwner = useSelector(getIsUserOwner);
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
-  const userSketches = `/${user.username}/sketches`;
+
   const isUnsaved = !project?.id;
 
   const rootFile = useSelector(selectRootFile);
@@ -141,31 +168,13 @@ const ProjectMenu = () => {
     metaKey === 'Ctrl' ? `${metaKeyName}+Alt+N` : `${metaKeyName}+⌥+N`;
 
   return (
-    <ul className="nav__items-left" role="menubar">
-      <li className="nav__item-logo">
-        {user && user.username !== undefined ? (
-          <Link to={userSketches}>
-            <LogoIcon
-              role="img"
-              aria-label={t('Common.p5logoARIA')}
-              focusable="false"
-              className="svg__logo"
-            />
-          </Link>
-        ) : (
-          <a href="https://p5js.org">
-            <LogoIcon
-              role="img"
-              aria-label={t('Common.p5logoARIA')}
-              focusable="false"
-              className="svg__logo"
-            />
-          </a>
-        )}
-      </li>
+    <ul className="nav__items-left" role="group">
       <MenubarSubmenu id="file" title={t('Nav.File.Title')}>
-        <MenubarItem onClick={newSketch}>{t('Nav.File.New')}</MenubarItem>
+        <MenubarItem id="file-new" onClick={newSketch}>
+          {t('Nav.File.New')}
+        </MenubarItem>
         <MenubarItem
+          id="file-save"
           hideIf={
             !getConfig('LOGIN_ENABLED') || (project?.owner && !isUserOwner)
           }
@@ -175,24 +184,31 @@ const ProjectMenu = () => {
           <span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
         </MenubarItem>
         <MenubarItem
+          id="file-duplicate"
           hideIf={isUnsaved || !user.authenticated}
           onClick={() => dispatch(cloneProject())}
         >
           {t('Nav.File.Duplicate')}
         </MenubarItem>
-        <MenubarItem hideIf={isUnsaved} onClick={shareSketch}>
+        <MenubarItem id="file-share" hideIf={isUnsaved} onClick={shareSketch}>
           {t('Nav.File.Share')}
         </MenubarItem>
-        <MenubarItem hideIf={isUnsaved} onClick={downloadSketch}>
+        <MenubarItem
+          id="file-download"
+          hideIf={isUnsaved}
+          onClick={downloadSketch}
+        >
           {t('Nav.File.Download')}
         </MenubarItem>
         <MenubarItem
+          id="file-open"
           hideIf={!user.authenticated}
           href={`/${user.username}/sketches`}
         >
           {t('Nav.File.Open')}
         </MenubarItem>
         <MenubarItem
+          id="file-add-to-collection"
           hideIf={
             !getConfig('UI_COLLECTIONS_ENABLED') ||
             !user.authenticated ||
@@ -203,6 +219,7 @@ const ProjectMenu = () => {
           {t('Nav.File.AddToCollection')}
         </MenubarItem>
         <MenubarItem
+          id="file-examples"
           hideIf={!getConfig('EXAMPLES_ENABLED')}
           href="/p5/sketches"
         >
@@ -210,32 +227,38 @@ const ProjectMenu = () => {
         </MenubarItem>
       </MenubarSubmenu>
       <MenubarSubmenu id="edit" title={t('Nav.Edit.Title')}>
-        <MenubarItem onClick={cmRef.current?.tidyCode}>
+        <MenubarItem id="edit-tidy" onClick={cmRef.current?.tidyCode}>
           {t('Nav.Edit.TidyCode')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+Shift+F</span>
         </MenubarItem>
-        <MenubarItem onClick={cmRef.current?.showFind}>
+        <MenubarItem id="edit-find" onClick={cmRef.current?.showFind}>
           {t('Nav.Edit.Find')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
         </MenubarItem>
-        <MenubarItem onClick={cmRef.current?.showReplace}>
+        <MenubarItem id="edit-replace" onClick={cmRef.current?.showReplace}>
           {t('Nav.Edit.Replace')}
           <span className="nav__keyboard-shortcut">{replaceCommand}</span>
         </MenubarItem>
       </MenubarSubmenu>
       <MenubarSubmenu id="sketch" title={t('Nav.Sketch.Title')}>
-        <MenubarItem onClick={() => dispatch(newFile(rootFile.id))}>
+        <MenubarItem
+          id="sketch-add-file"
+          onClick={() => dispatch(newFile(rootFile.id))}
+        >
           {t('Nav.Sketch.AddFile')}
           <span className="nav__keyboard-shortcut">{newFileCommand}</span>
         </MenubarItem>
-        <MenubarItem onClick={() => dispatch(newFolder(rootFile.id))}>
+        <MenubarItem
+          id="sketch-add-folder"
+          onClick={() => dispatch(newFolder(rootFile.id))}
+        >
           {t('Nav.Sketch.AddFolder')}
         </MenubarItem>
-        <MenubarItem onClick={() => dispatch(startSketch())}>
+        <MenubarItem id="sketch-run" onClick={() => dispatch(startSketch())}>
           {t('Nav.Sketch.Run')}
           <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
         </MenubarItem>
-        <MenubarItem onClick={() => dispatch(stopSketch())}>
+        <MenubarItem id="sketch-stop" onClick={() => dispatch(stopSketch())}>
           {t('Nav.Sketch.Stop')}
           <span className="nav__keyboard-shortcut">
             Shift+{metaKeyName}+Enter
@@ -243,13 +266,18 @@ const ProjectMenu = () => {
         </MenubarItem>
       </MenubarSubmenu>
       <MenubarSubmenu id="help" title={t('Nav.Help.Title')}>
-        <MenubarItem onClick={() => dispatch(showKeyboardShortcutModal())}>
+        <MenubarItem
+          id="help-shortcuts"
+          onClick={() => dispatch(showKeyboardShortcutModal())}
+        >
           {t('Nav.Help.KeyboardShortcuts')}
         </MenubarItem>
-        <MenubarItem href="https://p5js.org/reference/">
+        <MenubarItem id="help-reference" href="https://p5js.org/reference/">
           {t('Nav.Help.Reference')}
         </MenubarItem>
-        <MenubarItem href="/about">{t('Nav.Help.About')}</MenubarItem>
+        <MenubarItem id="help-about" href="/about">
+          {t('Nav.Help.About')}
+        </MenubarItem>
       </MenubarSubmenu>
       {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
     </ul>
@@ -275,6 +303,7 @@ const LanguageMenu = () => {
       {sortBy(availableLanguages).map((key) => (
         // eslint-disable-next-line react/jsx-no-bind
         <MenubarItem
+          id={key}
           key={key}
           value={key}
           onClick={handleLangSelection}
@@ -291,7 +320,7 @@ const LanguageMenu = () => {
 const UnauthenticatedUserMenu = () => {
   const { t } = useTranslation();
   return (
-    <ul className="nav__items-right" title="user-menu">
+    <ul className="nav__items-right" title="user-menu" role="group">
       <li className="nav__item">
         <Link to="/login" className="nav__auth-button">
           <span className="nav__item-header" title="Login">
@@ -320,7 +349,7 @@ const AuthenticatedUserMenu = () => {
   const dispatch = useDispatch();
 
   return (
-    <ul className="nav__items-right" title="user-menu">
+    <ul className="nav__items-right" title="user-menu" role="group">
       <MenubarSubmenu
         id="account"
         title={
@@ -329,20 +358,23 @@ const AuthenticatedUserMenu = () => {
           </span>
         }
       >
-        <MenubarItem href={`/${username}/sketches`}>
+        <MenubarItem id="account-sketches" href={`/${username}/sketches`}>
           {t('Nav.Auth.MySketches')}
         </MenubarItem>
         <MenubarItem
+          id="account-collections"
           href={`/${username}/collections`}
           hideIf={!getConfig('UI_COLLECTIONS_ENABLED')}
         >
           {t('Nav.Auth.MyCollections')}
         </MenubarItem>
-        <MenubarItem href={`/${username}/assets`}>
+        <MenubarItem id="account-assets" href={`/${username}/assets`}>
           {t('Nav.Auth.MyAssets')}
         </MenubarItem>
-        <MenubarItem href="/account">{t('Preferences.Settings')}</MenubarItem>
-        <MenubarItem onClick={() => dispatch(logoutUser())}>
+        <MenubarItem id="account-settings" href="/account">
+          {t('Preferences.Settings')}
+        </MenubarItem>
+        <MenubarItem id="account-logout" onClick={() => dispatch(logoutUser())}>
           {t('Nav.Auth.LogOut')}
         </MenubarItem>
       </MenubarSubmenu>
diff --git a/client/modules/IDE/components/Header/Nav.unit.test.jsx b/client/modules/IDE/components/Header/Nav.unit.test.jsx
index 4ee6b8dae..a15df02f4 100644
--- a/client/modules/IDE/components/Header/Nav.unit.test.jsx
+++ b/client/modules/IDE/components/Header/Nav.unit.test.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { reduxRender } from '../../../../test-utils';
 
@@ -5,6 +6,51 @@ import Nav from './Nav';
 
 jest.mock('../../../../utils/generateRandomName');
 
+// mock Menubar
+jest.mock(
+  '../../../../components/Menubar/Menubar',
+  () =>
+    function Menubar({ children, className = 'nav__menubar' }) {
+      return (
+        <ul className={className} role="menubar">
+          {children}
+        </ul>
+      );
+    }
+);
+
+// mock MenubarSubmenu
+jest.mock('../../../../components/Menubar/MenubarSubmenu', () => {
+  function MenubarSubmenu({ children, title }) {
+    return (
+      <li className="nav__item">
+        <span role="menuitem">{title}</span>
+        <ul role="menu" aria-label={`${title} menu`}>
+          {children}
+        </ul>
+      </li>
+    );
+  }
+
+  MenubarSubmenu.useMenuProps = () => ({
+    isOpen: false,
+    handlers: {}
+  });
+
+  return MenubarSubmenu;
+});
+
+// mock MenubarItem
+jest.mock(
+  '../../../../components/Menubar/MenubarItem',
+  () =>
+    function MenubarItem({ children, hideIf }) {
+      if (hideIf) return null;
+
+      return <li>{children}</li>;
+    }
+);
+
 describe('Nav', () => {
   it('renders editor version for desktop', () => {
     const { asFragment } = reduxRender(<Nav />, { mobile: false });
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 d9140653c..1a3aa9f5e 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
@@ -6,42 +6,52 @@ exports[`Nav renders dashboard version for desktop 1`] = `
     class="nav__header"
   >
     <div
+      class="nav__item-logo"
+    >
+      <a
+        href="https://p5js.org"
+      >
+        <test-file-stub
+          aria-label="p5.js Logo"
+          classname="svg__logo"
+          focusable="true"
+          role="img"
+        />
+      </a>
+    </div>
+    <nav
       class="nav"
     >
       <ul
-        class="nav__items-left"
+        class="nav__menubar"
+        role="menubar"
       >
-        <li
-          class="nav__item-logo"
-        >
-          <test-file-stub
-            aria-label="p5.js Logo"
-            classname="svg__logo"
-            focusable="false"
-            role="img"
-          />
-        </li>
-        <li
-          class="nav__item nav__item--no-icon"
+        <ul
+          class="nav__items-left"
+          role="group"
         >
-          <a
-            class="nav__back-link"
-            href="/"
+          <li
+            class="nav__item nav__item--no-icon"
           >
-            <test-file-stub
-              aria-hidden="true"
-              classname="nav__back-icon"
-              focusable="false"
-            />
-            <span
-              class="nav__item-header"
-            >
-              Back to Editor
-            </span>
-          </a>
-        </li>
+            <a
+              class="nav__back-link"
+              href="/"
+            >
+              <test-file-stub
+                aria-hidden="true"
+                classname="nav__back-icon"
+                focusable="false"
+              />
+              <span
+                class="nav__item-header"
+              >
+                Back to Editor
+              </span>
+            </a>
+          </li>
+        </ul>
       </ul>
-    </div>
+    </nav>
   </header>
 </DocumentFragment>
 `;
@@ -267,8 +277,9 @@ exports[`Nav renders dashboard version for mobile 1`] = `
   color: #FFF;
 }
 
-<div
+<ul
     class="c0"
+    role="menubar"
   >
     <div
       class="c1"
@@ -350,135 +361,58 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           <b>
             File
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              New
-            </button>
+          <li>
+            New
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Save
-            </button>
+          <li>
+            Save
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <a
-              href="/p5/sketches"
-              role="menuitem"
-            >
-              Examples
-            </a>
+          <li>
+            Examples
           </li>
           <b>
             Edit
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Tidy Code
-            </button>
+          <li>
+            Tidy Code
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Find
-            </button>
+          <li>
+            Find
           </li>
           <b>
             Sketch
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Add File
-            </button>
+          <li>
+            Add File
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Add Folder
-            </button>
+          <li>
+            Add Folder
           </li>
           <b>
             Settings
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Preferences
-            </button>
+          <li>
+            Preferences
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Language
-            </button>
+          <li>
+            Language
           </li>
           <b>
             Help
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Keyboard Shortcuts
-            </button>
+          <li>
+            Keyboard Shortcuts
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <a
-              href="https://p5js.org/reference/"
-              rel="noopener noreferrer"
-              role="menuitem"
-              target="_blank"
-            >
-              Reference
-            </a>
+          <li>
+            Reference
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <a
-              href="/about"
-              role="menuitem"
-            >
-              About
-            </a>
+          <li>
+            About
           </li>
         </ul>
       </div>
     </div>
-  </div>
+  </ul>
 </DocumentFragment>
 `;
 
@@ -488,261 +422,152 @@ exports[`Nav renders editor version for desktop 1`] = `
     class="nav__header"
   >
     <div
+      class="nav__item-logo"
+    >
+      <a
+        href="https://p5js.org"
+      >
+        <test-file-stub
+          aria-label="p5.js Logo"
+          classname="svg__logo"
+          focusable="true"
+          role="img"
+        />
+      </a>
+    </div>
+    <nav
       class="nav"
     >
       <ul
-        class="nav__items-left"
+        class="nav__menubar"
         role="menubar"
       >
-        <li
-          class="nav__item-logo"
-        >
-          <a
-            href="https://p5js.org"
-          >
-            <test-file-stub
-              aria-label="p5.js Logo"
-              classname="svg__logo"
-              focusable="false"
-              role="img"
-            />
-          </a>
-        </li>
-        <li
-          class="nav__item"
+        <ul
+          class="nav__items-left"
+          role="group"
         >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            role="menuitem"
+          <li
+            class="nav__item"
           >
             <span
-              class="nav__item-header"
+              role="menuitem"
             >
               File
             </span>
-            <test-file-stub
-              aria-hidden="true"
-              classname="nav__item-header-triangle"
-              focusable="false"
-            />
-          </button>
-          <ul
-            class="nav__dropdown"
-            role="menu"
-          >
-            <li
-              class="nav__dropdown-item"
+            <ul
+              aria-label="File menu"
+              role="menu"
             >
-              <button
-                role="menuitem"
-              >
+              <li>
                 New
-              </button>
-            </li>
-          </ul>
-        </li>
-        <li
-          class="nav__item"
-        >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            role="menuitem"
+              </li>
+            </ul>
+          </li>
+          <li
+            class="nav__item"
           >
             <span
-              class="nav__item-header"
+              role="menuitem"
             >
               Edit
             </span>
-            <test-file-stub
-              aria-hidden="true"
-              classname="nav__item-header-triangle"
-              focusable="false"
-            />
-          </button>
-          <ul
-            class="nav__dropdown"
-            role="menu"
-          >
-            <li
-              class="nav__dropdown-item"
+            <ul
+              aria-label="Edit menu"
+              role="menu"
             >
-              <button
-                role="menuitem"
-              >
+              <li>
                 Tidy Code
                 <span
                   class="nav__keyboard-shortcut"
                 >
                   Ctrl+Shift+F
                 </span>
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
-            >
-              <button
-                role="menuitem"
-              >
+              </li>
+              <li>
                 Find
                 <span
                   class="nav__keyboard-shortcut"
                 >
                   Ctrl+F
                 </span>
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
-            >
-              <button
-                role="menuitem"
-              >
+              </li>
+              <li>
                 Replace
                 <span
                   class="nav__keyboard-shortcut"
                 >
                   Ctrl+H
                 </span>
-              </button>
-            </li>
-          </ul>
-        </li>
-        <li
-          class="nav__item"
-        >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            role="menuitem"
+              </li>
+            </ul>
+          </li>
+          <li
+            class="nav__item"
           >
             <span
-              class="nav__item-header"
+              role="menuitem"
             >
               Sketch
             </span>
-            <test-file-stub
-              aria-hidden="true"
-              classname="nav__item-header-triangle"
-              focusable="false"
-            />
-          </button>
-          <ul
-            class="nav__dropdown"
-            role="menu"
-          >
-            <li
-              class="nav__dropdown-item"
+            <ul
+              aria-label="Sketch menu"
+              role="menu"
             >
-              <button
-                role="menuitem"
-              >
+              <li>
                 Add File
                 <span
                   class="nav__keyboard-shortcut"
                 >
                   Ctrl+Alt+N
                 </span>
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
-            >
-              <button
-                role="menuitem"
-              >
+              </li>
+              <li>
                 Add Folder
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
-            >
-              <button
-                role="menuitem"
-              >
+              </li>
+              <li>
                 Run
                 <span
                   class="nav__keyboard-shortcut"
                 >
                   Ctrl+Enter
                 </span>
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
-            >
-              <button
-                role="menuitem"
-              >
+              </li>
+              <li>
                 Stop
                 <span
                   class="nav__keyboard-shortcut"
                 >
                   Shift+Ctrl+Enter
                 </span>
-              </button>
-            </li>
-          </ul>
-        </li>
-        <li
-          class="nav__item"
-        >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            role="menuitem"
+              </li>
+            </ul>
+          </li>
+          <li
+            class="nav__item"
           >
             <span
-              class="nav__item-header"
+              role="menuitem"
             >
               Help
             </span>
-            <test-file-stub
-              aria-hidden="true"
-              classname="nav__item-header-triangle"
-              focusable="false"
-            />
-          </button>
-          <ul
-            class="nav__dropdown"
-            role="menu"
-          >
-            <li
-              class="nav__dropdown-item"
+            <ul
+              aria-label="Help menu"
+              role="menu"
             >
-              <button
-                role="menuitem"
-              >
+              <li>
                 Keyboard Shortcuts
-              </button>
-            </li>
-            <li
-              class="nav__dropdown-item"
-            >
-              <a
-                href="https://p5js.org/reference/"
-                rel="noopener noreferrer"
-                role="menuitem"
-                target="_blank"
-              >
+              </li>
+              <li>
                 Reference
-              </a>
-            </li>
-            <li
-              class="nav__dropdown-item"
-            >
-              <a
-                href="/about"
-                role="menuitem"
-              >
+              </li>
+              <li>
                 About
-              </a>
-            </li>
-          </ul>
-        </li>
+              </li>
+            </ul>
+          </li>
+        </ul>
       </ul>
-    </div>
+    </nav>
   </header>
 </DocumentFragment>
 `;
@@ -968,8 +793,9 @@ exports[`Nav renders editor version for mobile 1`] = `
   color: #FFF;
 }
 
-<div
+<ul
     class="c0"
+    role="menubar"
   >
     <div
       class="c1"
@@ -1051,134 +877,57 @@ exports[`Nav renders editor version for mobile 1`] = `
           <b>
             File
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              New
-            </button>
+          <li>
+            New
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Save
-            </button>
+          <li>
+            Save
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <a
-              href="/p5/sketches"
-              role="menuitem"
-            >
-              Examples
-            </a>
+          <li>
+            Examples
           </li>
           <b>
             Edit
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Tidy Code
-            </button>
+          <li>
+            Tidy Code
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Find
-            </button>
+          <li>
+            Find
           </li>
           <b>
             Sketch
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Add File
-            </button>
+          <li>
+            Add File
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Add Folder
-            </button>
+          <li>
+            Add Folder
           </li>
           <b>
             Settings
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Preferences
-            </button>
+          <li>
+            Preferences
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Language
-            </button>
+          <li>
+            Language
           </li>
           <b>
             Help
           </b>
-          <li
-            class="nav__dropdown-item"
-          >
-            <button
-              role="menuitem"
-            >
-              Keyboard Shortcuts
-            </button>
+          <li>
+            Keyboard Shortcuts
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <a
-              href="https://p5js.org/reference/"
-              rel="noopener noreferrer"
-              role="menuitem"
-              target="_blank"
-            >
-              Reference
-            </a>
+          <li>
+            Reference
           </li>
-          <li
-            class="nav__dropdown-item"
-          >
-            <a
-              href="/about"
-              role="menuitem"
-            >
-              About
-            </a>
+          <li>
+            About
           </li>
         </ul>
       </div>
     </div>
-  </div>
+  </ul>
 </DocumentFragment>
 `;
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 58691ff25..03261aa5c 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -24,6 +24,13 @@
   // padding-left: #{math.div(20, $base-font-size)}rem;
 }
 
+.nav__menubar {
+  display: flex;
+  flex-direction: row;
+  width:100%;
+  justify-content: space-between;
+}
+
 .nav__items-left,
 .nav__items-right {
   list-style: none;
@@ -58,6 +65,62 @@
   }
 }
 
+// base focus styles
+.nav__item button:focus {
+  outline: none;
+  
+  .nav__item-header {
+    @include themify() {
+      color: getThemifyVariable('nav-hover-color');
+    }
+  }
+  
+  & g, & path {
+    @include themify() {
+      fill: getThemifyVariable('nav-hover-color');
+    }
+  }
+}
+
+// for keyboard navigation
+.nav__item button:focus-visible {
+  @include themify() {
+    box-shadow: 0 0 0 2px getThemifyVariable('nav-hover-color');
+  }
+}
+
+// focus styles for mouse interactions
+.nav__item button:focus:not(:focus-visible) {
+  @include themify() {
+    box-shadow: 0 0 0 2px getThemifyVariable('nav-hover-color');
+  }
+}
+
+.nav__dropdown-item {
+  & button:focus,
+  & a:focus {
+    outline: none;
+    @include themify() {
+      color: getThemifyVariable('button-hover-color');
+      background-color: getThemifyVariable('nav-hover-color');
+    }
+  }
+
+  & button:focus-visible,
+  & a:focus-visible {
+    @include themify() {
+      box-shadow: 0 0 0 2px getThemifyVariable('nav-hover-color');
+    }
+  }
+
+  & button:focus .nav__keyboard-shortcut,
+  & a:focus .nav__keyboard-shortcut {
+    @include themify() {
+      color: getThemifyVariable('button-hover-color');
+    }
+  }
+}
+
 .nav__item--no-icon {
   padding-left: #{math.div(15, $base-font-size)}rem;
 }