diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js
index 716d7d13b75d..a2fa40c5f05a 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js
@@ -95,6 +95,63 @@ export const CustomIcon = () => {
);
};
+export const WithMenuAlignment = (args) => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
export const Playground = (args) => {
return (
@@ -128,4 +185,11 @@ Playground.argTypes = {
disable: true,
},
},
+ menuAlignment: {
+ options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+ control: { type: 'select' },
+ description:
+ 'Specify how the menu should align with the button element `bottom-start` `bottom-end` `top-start` `top-end`',
+ default: 'bottom-start',
+ },
};
diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js
index 90fee14c033c..519c0783a64a 100644
--- a/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js
+++ b/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js
@@ -11,6 +11,8 @@ import { MenuItem } from '../../Menu';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+const prefix = 'cds';
+
describe('OverflowMenu (enable-v12-overflowmenu)', () => {
it('should render closed by default', () => {
render(
@@ -103,4 +105,24 @@ describe('OverflowMenu (enable-v12-overflowmenu)', () => {
'false'
);
});
+
+ describe('supports props.menuAlignment', () => {
+ const alignments = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
+
+ alignments.forEach((alignment) => {
+ it(`menuAlignment="${alignment}"`, async () => {
+ render(
+
+
+
+ );
+
+ await userEvent.click(screen.getByRole('button'));
+
+ expect(screen.getAllByRole('menu')[0]).toHaveClass(
+ `${prefix}--overflow-menu__${alignment}`
+ );
+ });
+ });
+ });
});
diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx b/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx
index 2f7d7013462e..ef2984a7399b 100644
--- a/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx
+++ b/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx
@@ -29,6 +29,20 @@ This version of the `OverflowMenu` can be enabled by using the
```
+## Menu Alignment
+
+The `menuAlignment` prop enables you to define the placement of the Menu in
+relation to the `OverflowMenu`. For instance, setting
+`menuAlignment="top-start"` on the `OverflowMenu` will render the Menu above the
+button.
+
+If it seems your specified `menuAlignment` isn't working, it's because we
+prioritize ensuring the Menu remains visible. We calculate the optimal position
+to display the Menu in case the provided `menuAlignment` obscures it.
+
+We encourage you to play around in the Storybook playground to better understand
+the `menuAlignment` prop.
+
## Component API
diff --git a/packages/react/src/components/OverflowMenu/next/index.js b/packages/react/src/components/OverflowMenu/next/index.js
index 331be0ad6275..d9abb0707de2 100644
--- a/packages/react/src/components/OverflowMenu/next/index.js
+++ b/packages/react/src/components/OverflowMenu/next/index.js
@@ -26,6 +26,7 @@ const OverflowMenu = React.forwardRef(function OverflowMenu(
label = 'Options',
renderIcon: IconElement = OverflowMenuVertical,
size = defaultSize,
+ menuAlignment = 'bottom-start',
tooltipAlignment,
...rest
},
@@ -35,14 +36,28 @@ const OverflowMenu = React.forwardRef(function OverflowMenu(
const prefix = usePrefix();
const triggerRef = useRef(null);
- const { open, x, y, handleClick, handleMousedown, handleClose } =
- useAttachedMenu(triggerRef);
+ const {
+ open,
+ x,
+ y,
+ handleClick: hookOnClick,
+ handleMousedown,
+ handleClose,
+ } = useAttachedMenu(triggerRef);
+
+ function handleTriggerClick() {
+ if (triggerRef.current) {
+ hookOnClick();
+ }
+ }
const containerClasses = classNames(
className,
`${prefix}--overflow-menu__container`
);
+ const menuClasses = classNames(`${prefix}--overflow-menu__${menuAlignment}`);
+
const triggerClasses = classNames(
`${prefix}--overflow-menu`,
{
@@ -62,7 +77,7 @@ const OverflowMenu = React.forwardRef(function OverflowMenu(
aria-haspopup
aria-expanded={open}
className={triggerClasses}
- onClick={handleClick}
+ onClick={handleTriggerClick}
onMouseDown={handleMousedown}
ref={triggerRef}
label={label}
@@ -70,6 +85,9 @@ const OverflowMenu = React.forwardRef(function OverflowMenu(