diff --git a/.changeset/ninety-brooms-speak.md b/.changeset/ninety-brooms-speak.md
new file mode 100644
index 00000000000..24dfe9d9163
--- /dev/null
+++ b/.changeset/ninety-brooms-speak.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Allow overflow scrolling to be controlled via an optional `overflow` property on Overlay
diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
index 849e5778200..64ed4fd176a 100644
--- a/src/ActionMenu/ActionMenu.examples.stories.tsx
+++ b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -340,6 +340,23 @@ export const OnRightSide = () => (
)
+export const SettingMaxHeight = () => {
+ return (
+
+ Open menu
+
+
+ {Array.from({length: 100}, (_, i) => (
+ alert(`Item ${i + 1} clicked`)}>
+ Item {i + 1}
+
+ ))}
+
+
+
+ )
+}
+
export const OnlyInactiveItems = () => (
Open menu
diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx
index 817e80ec992..3b1c867fe5d 100644
--- a/src/Overlay/Overlay.tsx
+++ b/src/Overlay/Overlay.tsx
@@ -17,6 +17,7 @@ type StyledOverlayProps = {
maxHeight?: keyof Omit
maxWidth?: keyof Omit
visibility?: 'visible' | 'hidden'
+ overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
anchorSide?: AnchorSide
} & SxProp
@@ -64,7 +65,7 @@ const StyledOverlay = styled.div`
max-height: ${props => props.maxHeight && heightMap[props.maxHeight]};
width: ${props => widthMap[props.width || 'auto']};
border-radius: 12px;
- overflow: hidden;
+ overflow: ${props => (props.overflow ? props.overflow : 'hidden')};
animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};
@keyframes overlay-appear {