diff --git a/package-lock.json b/package-lock.json
index 46263feba..3fe70e210 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reablocks",
-  "version": "9.2.1",
+  "version": "9.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reablocks",
-      "version": "9.2.1",
+      "version": "9.2.2",
       "license": "Apache-2.0",
       "dependencies": {
         "@floating-ui/react": "^0.27.16",
diff --git a/src/form/Textarea/Textarea.tsx b/src/form/Textarea/Textarea.tsx
index 98bf7d7f5..bf1760184 100644
--- a/src/form/Textarea/Textarea.tsx
+++ b/src/form/Textarea/Textarea.tsx
@@ -79,7 +79,7 @@ export const Textarea = forwardRef<TextAreaRef, TextareaProps>(
     const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
     useImperativeHandle(inputRef, () => ({
-      textareaRef,
+      inputRef: textareaRef,
       containerRef,
       blur: () => textareaRef.current?.blur(),
       focus: () => textareaRef.current?.focus()
diff --git a/src/layers/Menu/Menu.story.tsx b/src/layers/Menu/Menu.story.tsx
index 8de1c8971..e8c23483b 100644
--- a/src/layers/Menu/Menu.story.tsx
+++ b/src/layers/Menu/Menu.story.tsx
@@ -67,27 +67,29 @@ export const Nested = () => {
       </Button>
       <MenuComponent style={{ background: 'var(--slate-500)' }}>
         <h5 style={{ margin: 4 }}>My Menu</h5>
-        <div role="list">
-          <div role="listitem" style={itemStyle}>
+        <List>
+          <ListItem role="listitem" style={itemStyle} onClick={() => null}>
             1
-          </div>
+          </ListItem>
           <NestedMenu
             label="2"
             style={itemStyle}
             menuStyle={{ background: 'var(--slate-500)', marginLeft: 4 }}
           >
-            <div role="listitem" style={itemStyle}>
-              2.1
-            </div>
-            <div role="listitem" style={itemStyle}>
-              2.2
-            </div>
-            <div role="listitem" style={itemStyle}>
-              2.3
-            </div>
-            <div role="listitem" style={itemStyle}>
-              2.4
-            </div>
+            <List>
+              <ListItem role="listitem" style={itemStyle} onClick={() => null}>
+                2.1
+              </ListItem>
+              <ListItem role="listitem" style={itemStyle} onClick={() => null}>
+                2.2
+              </ListItem>
+              <ListItem role="listitem" style={itemStyle} onClick={() => null}>
+                2.3
+              </ListItem>
+              <ListItem role="listitem" style={itemStyle} onClick={() => null}>
+                2.4
+              </ListItem>
+            </List>
           </NestedMenu>
           <NestedMenu
             ref={nestedMenuRef}
@@ -95,42 +97,62 @@ export const Nested = () => {
             style={itemStyle}
             menuStyle={{ background: 'var(--slate-500)', marginLeft: 4 }}
           >
-            <div role="listitem" style={itemStyle}>
-              3.1
-            </div>
-            <NestedMenu
-              label="3.2"
-              style={itemStyle}
-              menuStyle={{ background: 'var(--slate-500)', marginLeft: 4 }}
-            >
-              <div role="listitem" style={itemStyle}>
-                3.2.1
-              </div>
-              <div role="listitem" style={itemStyle}>
-                3.2.2
-              </div>
-              <div role="listitem" style={itemStyle}>
-                3.2.3
-              </div>
-              <div role="listitem" style={itemStyle}>
-                3.2.4
-              </div>
-            </NestedMenu>
-            <div role="listitem" style={itemStyle}>
-              3.3
-            </div>
-            <ListItem
-              onClick={() => {
-                nestedMenuRef.current?.close();
-              }}
-            >
-              Close
-            </ListItem>
+            <List>
+              <ListItem role="listitem" style={itemStyle} onClick={() => null}>
+                3.1
+              </ListItem>
+              <NestedMenu
+                label="3.2"
+                style={itemStyle}
+                menuStyle={{ background: 'var(--slate-500)', marginLeft: 4 }}
+              >
+                <List>
+                  <ListItem
+                    role="listitem"
+                    style={itemStyle}
+                    onClick={() => null}
+                  >
+                    3.2.1
+                  </ListItem>
+                  <ListItem
+                    role="listitem"
+                    style={itemStyle}
+                    onClick={() => null}
+                  >
+                    3.2.2
+                  </ListItem>
+                  <ListItem
+                    role="listitem"
+                    style={itemStyle}
+                    onClick={() => null}
+                  >
+                    3.2.3
+                  </ListItem>
+                  <ListItem
+                    role="listitem"
+                    style={itemStyle}
+                    onClick={() => null}
+                  >
+                    3.2.4
+                  </ListItem>
+                </List>
+              </NestedMenu>
+              <ListItem role="listitem" style={itemStyle} onClick={() => null}>
+                3.3
+              </ListItem>
+              <ListItem
+                onClick={() => {
+                  nestedMenuRef.current?.close();
+                }}
+              >
+                Close
+              </ListItem>
+            </List>
           </NestedMenu>
-          <div role="listitem" style={itemStyle}>
+          <ListItem role="listitem" style={itemStyle} onClick={() => null}>
             4
-          </div>
-        </div>
+          </ListItem>
+        </List>
       </MenuComponent>
     </Fragment>
   );
diff --git a/src/layers/Menu/NestedMenu.tsx b/src/layers/Menu/NestedMenu.tsx
index 7eec6aa2f..40779f97d 100644
--- a/src/layers/Menu/NestedMenu.tsx
+++ b/src/layers/Menu/NestedMenu.tsx
@@ -1,6 +1,9 @@
+import { ListItem } from '@/layout';
 import React, {
   forwardRef,
   Fragment,
+  KeyboardEvent,
+  ReactNode,
   useCallback,
   useImperativeHandle,
   useRef,
@@ -23,7 +26,7 @@ export interface NestedMenuProps {
   /**
    * Menu contents.
    */
-  children: any;
+  children: ReactNode | ((args: NestedMenuRef) => ReactNode);
 
   /**
    * Label element for the menu item.
@@ -150,7 +153,7 @@ export const NestedMenu = forwardRef<NestedMenuRef, NestedMenuProps>(
       }, leaveDelay);
     }, [leaveDelay]);
 
-    const onMouseEnterMenu = useCallback(event => {
+    const onMouseEnterMenu = useCallback(() => {
       clearTimeout(enterTimeoutRef.current);
       clearTimeout(leaveTimeoutRef.current);
       menuEntered.current = true;
@@ -179,6 +182,13 @@ export const NestedMenu = forwardRef<NestedMenuRef, NestedMenuProps>(
       [onClose]
     );
 
+    const onKeyDown = useCallback((e: KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+        setActive(false);
+      }
+    }, []);
+
     /**
      * Expose the close ability to the outside
      */
@@ -190,7 +200,7 @@ export const NestedMenu = forwardRef<NestedMenuRef, NestedMenuProps>(
 
     return (
       <Fragment>
-        <div
+        <ListItem
           className={classNames(className, { [activeClassName]: active })}
           style={style}
           ref={itemRef}
@@ -199,7 +209,7 @@ export const NestedMenu = forwardRef<NestedMenuRef, NestedMenuProps>(
           onMouseLeave={onMouseLeaveItem}
         >
           {label}
-        </div>
+        </ListItem>
         <Menu
           className={menuClassName}
           autofocus={autofocus}
@@ -216,7 +226,13 @@ export const NestedMenu = forwardRef<NestedMenuRef, NestedMenuProps>(
           onMouseLeave={onMouseLeaveMenu}
           onClose={onNestedMenuClose}
         >
-          {children}
+          {() => (
+            <div onKeyDown={onKeyDown}>
+              {typeof children === 'function'
+                ? children({ close: () => setActive(false) })
+                : children}
+            </div>
+          )}
         </Menu>
       </Fragment>
     );
diff --git a/src/layout/List/List.tsx b/src/layout/List/List.tsx
index 203a67fb6..022614496 100644
--- a/src/layout/List/List.tsx
+++ b/src/layout/List/List.tsx
@@ -1,4 +1,13 @@
-import React, { FC, forwardRef, InputHTMLAttributes, LegacyRef } from 'react';
+import React, {
+  Children,
+  cloneElement,
+  FC,
+  forwardRef,
+  InputHTMLAttributes,
+  isValidElement,
+  LegacyRef,
+  useRef
+} from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useComponentTheme } from '@/utils';
 import { ListTheme } from './ListTheme';
@@ -22,14 +31,55 @@ export const List: FC<ListProps & ListRef> = forwardRef<
   ListProps
 >(({ className, children, theme: customTheme, ...rest }, ref) => {
   const theme: ListTheme = useComponentTheme('list', customTheme);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    // Remove the first invisible item when navigating with keyboard is started
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      containerRef.current
+        ?.querySelector<HTMLElement>('[data-first-item="true"]')
+        ?.remove();
+    }
+    const focusableItems = Array.from(
+      containerRef.current?.querySelectorAll<HTMLElement>(
+        '[tabindex]:not(.disabled)'
+      ) || []
+    );
+    const currentIndex = focusableItems.indexOf(
+      document.activeElement as HTMLElement
+    );
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      const nextIndex = (currentIndex + 1) % focusableItems.length;
+      focusableItems[nextIndex]?.focus();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      const prevIndex =
+        (currentIndex - 1 + focusableItems.length) % focusableItems.length;
+      focusableItems[prevIndex]?.focus();
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      (document.activeElement as HTMLElement)?.click();
+    }
+  };
+
+  const focusableChildren = Children.map(children, child =>
+    isValidElement(child) ? cloneElement(child, { tabIndex: 0 }) : child
+  );
+
   return (
-    <div
-      {...rest}
-      ref={ref}
-      role="list"
-      className={twMerge(theme.base, className)}
-    >
-      {children}
+    <div ref={containerRef} onKeyDown={handleKeyDown}>
+      {/* First invisible item which takes focus for correct keyboard navigation*/}
+      <div data-first-item="true" tabIndex={0} />
+      <div
+        {...rest}
+        ref={ref}
+        role="list"
+        className={twMerge(theme.base, className)}
+      >
+        {focusableChildren}
+      </div>
     </div>
   );
 });
diff --git a/src/layout/List/ListItem/ListItem.tsx b/src/layout/List/ListItem/ListItem.tsx
index 25b0d7256..06de1dc09 100644
--- a/src/layout/List/ListItem/ListItem.tsx
+++ b/src/layout/List/ListItem/ListItem.tsx
@@ -89,12 +89,15 @@ export const ListItem: FC<ListItemProps & ListItemRef> = forwardRef<
         onClick={e => !disabled && onClick?.(e)}
         className={cn(
           theme.listItem.base,
-          dense && theme.listItem.dense.base,
-          disabled && theme.listItem.disabled,
-          active && theme.listItem.active,
-          onClick && !disabled && theme.listItem.clickable,
-          disablePadding && theme.listItem.disablePadding,
-          disableGutters && theme.listItem.disableGutters,
+          {
+            disabled: disabled,
+            [theme.listItem.disabled]: disabled,
+            [theme.listItem.dense.base]: dense,
+            [theme.listItem.active]: active,
+            [theme.listItem.clickable]: onClick && !disabled,
+            [theme.listItem.disablePadding]: disablePadding,
+            [theme.listItem.disableGutters]: disableGutters
+          },
           className
         )}
       >