diff --git a/packages/react/src/SideMenu/components/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx b/packages/react/src/SideMenu/components/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx
index c968543c9e..f8ea41fa56 100644
--- a/packages/react/src/SideMenu/components/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx
+++ b/packages/react/src/SideMenu/components/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx
@@ -59,38 +59,38 @@ export const BlockColorsButton = <BSchema extends BlockSchema>(
           </div>
         </Menu.Target>
         <div ref={ref}>
-        <Menu.Dropdown
-          onMouseLeave={startMenuCloseTimer}
-          onMouseOver={stopMenuCloseTimer}
-          style={{ marginLeft: "5px" }}>
-          <ColorPicker
-            iconSize={18}
-            text={
-              "textColor" in props.block.props &&
-              typeof props.block.props.textColor === "string"
-                ? {
-                    color: props.block.props.textColor,
-                    setColor: (color) =>
-                      props.editor.updateBlock(props.block, {
-                        props: { textColor: color },
-                      } as PartialBlock<BSchema>),
-                  }
-                : undefined
-            }
-            background={
-              "backgroundColor" in props.block.props &&
-              typeof props.block.props.backgroundColor === "string"
-                ? {
-                    color: props.block.props.backgroundColor,
-                    setColor: (color) =>
-                      props.editor.updateBlock(props.block, {
-                        props: { backgroundColor: color },
-                      } as PartialBlock<BSchema>),
-                  }
-                : undefined
-            }
-          />
-        </Menu.Dropdown>
+          <Menu.Dropdown
+            onMouseLeave={startMenuCloseTimer}
+            onMouseOver={stopMenuCloseTimer}
+            style={{ marginLeft: "5px" }}>
+            <ColorPicker
+              iconSize={18}
+              text={
+                "textColor" in props.block.props &&
+                typeof props.block.props.textColor === "string"
+                  ? {
+                      color: props.block.props.textColor,
+                      setColor: (color) =>
+                        props.editor.updateBlock(props.block, {
+                          props: { textColor: color },
+                        } as PartialBlock<BSchema>),
+                    }
+                  : undefined
+              }
+              background={
+                "backgroundColor" in props.block.props &&
+                typeof props.block.props.backgroundColor === "string"
+                  ? {
+                      color: props.block.props.backgroundColor,
+                      setColor: (color) =>
+                        props.editor.updateBlock(props.block, {
+                          props: { backgroundColor: color },
+                        } as PartialBlock<BSchema>),
+                    }
+                  : undefined
+              }
+            />
+          </Menu.Dropdown>
         </div>
       </Menu>
     </DragHandleMenuItem>
diff --git a/packages/react/src/SideMenu/components/DragHandleMenu/DragHandleMenuItem.tsx b/packages/react/src/SideMenu/components/DragHandleMenu/DragHandleMenuItem.tsx
index e5da796147..e9b46cbba3 100644
--- a/packages/react/src/SideMenu/components/DragHandleMenu/DragHandleMenuItem.tsx
+++ b/packages/react/src/SideMenu/components/DragHandleMenu/DragHandleMenuItem.tsx
@@ -1,8 +1,8 @@
-import { Menu } from "@mantine/core";
+import { Menu, MenuItemProps } from "@mantine/core";
 import { PolymorphicComponentProps } from "@mantine/utils";
 
 export const DragHandleMenuItem = (
-  props: PolymorphicComponentProps<"button">
+  props: PolymorphicComponentProps<"button"> & MenuItemProps
 ) => {
   const { children, ...remainingProps } = props;
   return <Menu.Item {...remainingProps}>{children}</Menu.Item>;
diff --git a/packages/website/docs/docs/side-menu.md b/packages/website/docs/docs/side-menu.md
index 4446068601..bdd0dca59f 100644
--- a/packages/website/docs/docs/side-menu.md
+++ b/packages/website/docs/docs/side-menu.md
@@ -177,6 +177,7 @@ type SideMenuButtonProps = {
 }
 export const SideMenuButton = (props: SideMenuButtonProps) => ...;
 
-// Takes same props as `button` elements, e.g. onClick.
-export const DragHandleMenuItem = (props) => ...;
+// Contains all props that a regular button element would take, as well as all props from the Mantine `Menu.Item` component.
+type DragHandleMenuItemProps = PolymorphicComponentProps<"button"> & MenuItemProps
+export const DragHandleMenuItem = (props: DragHandleMenuItemProps) => ...;
 ```