fix(menu): place submenu on left when no room on right (#22261)

wkeese · heloiselui · web-flow · commit 84de066995ca · 2026-05-15T15:05:59.000Z
Also fix alignment of menu when on the left. IMO we want the left submenu and right submenu to appear in mirror positions. According to https://floating-ui.com/docs/offset a simple setting like this should do that, regardless of which side the menu appears on: middleware: [offset({ mainAxis: 6, crossAxis: -6 })], But for some reason that doesn't work. I needed to adjust the mainAxis setting depending on whether the menu is to the left or right. Fixes #22252. Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>
diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx
@@ -29,6 +29,7 @@ import {
   autoUpdate,
   offset,
   FloatingFocusManager,
+  flip,
 } from '@floating-ui/react';
 import { CaretRight, CaretLeft, Checkmark } from '@carbon/icons-react';
 import { keys, match } from '../../internal/keyboard';
@@ -149,7 +150,13 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
       },
       placement: rtl ? 'left-start' : 'right-start',
       whileElementsMounted: autoUpdate,
-      middleware: [offset({ mainAxis: -6, crossAxis: -6 })],
+      middleware: [
+        flip(),
+        offset(({ placement }) => ({
+          mainAxis: placement.startsWith('left') ? 10 : -6,
+          crossAxis: -6,
+        })),
+      ],
       strategy: 'fixed',
     });
     const { getReferenceProps, getFloatingProps } = useInteractions([
