diff --git a/.changeset/many-suns-promise.md b/.changeset/many-suns-promise.md
new file mode 100644
index 00000000000..6b465792c8e
--- /dev/null
+++ b/.changeset/many-suns-promise.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Replace `ActionBar` overflow calculations with CSS wrapping approach to improve performance and stability
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png
index ef3267dde68..6af220f5785 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png
index 3a19d585a19..b1223a04106 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png
index 994ae8599e0..31409602eee 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-linux.png
index ef3267dde68..6af220f5785 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-linux.png differ
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-tritanopia-linux.png
index ef3267dde68..6af220f5785 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-tritanopia-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-colorblind-linux.png
index 4496dfcd203..962d8bdd744 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-colorblind-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-high-contrast-linux.png
index 18fecbaec71..1602e7d1d10 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-high-contrast-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-linux.png
index 4496dfcd203..962d8bdd744 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-linux.png differ
diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-tritanopia-linux.png
index 4496dfcd203..962d8bdd744 100644
Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-tritanopia-linux.png and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-tritanopia-linux.png differ
diff --git a/e2e/components/drafts/ActionBar.test.ts b/e2e/components/drafts/ActionBar.test.ts
index c39e4d1a9d0..31e1af1ea65 100644
--- a/e2e/components/drafts/ActionBar.test.ts
+++ b/e2e/components/drafts/ActionBar.test.ts
@@ -47,12 +47,12 @@ test.describe('ActionBar', () => {
             },
           })
           const toolbarButtonSelector = `button[data-component="IconButton"]`
-          await expect(page.locator(toolbarButtonSelector)).toHaveCount(10)
-          await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
+          await expect(page.locator(toolbarButtonSelector).filter({visible: true})).toHaveCount(10)
+          await page.setViewportSize({width: viewports['primer.breakpoint.xs'] - 64, height: 768})
           await page.getByLabel('Task List').waitFor({
             state: 'hidden',
           })
-          await expect(page.locator(toolbarButtonSelector)).toHaveCount(8)
+          await expect(page.locator(toolbarButtonSelector).filter({visible: true})).toHaveCount(8)
           const moreButtonSelector = page.getByLabel('More Comment box toolbar items')
           await moreButtonSelector.click()
           await expect(page.locator('ul[role="menu"] [role="menuitem"]')).toHaveCount(3)
diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.module.css b/packages/react/src/ActionBar/ActionBar.examples.stories.module.css
index ba8f3744204..5183a4842a7 100644
--- a/packages/react/src/ActionBar/ActionBar.examples.stories.module.css
+++ b/packages/react/src/ActionBar/ActionBar.examples.stories.module.css
@@ -12,23 +12,32 @@
 
 .CommentBoxHeader {
   display: flex;
-  flex-direction: row;
+  gap: var(--base-size-16);
   background-color: var(--bgColor-muted);
   border-top-left-radius: var(--borderRadius-medium);
   border-top-right-radius: var(--borderRadius-medium);
-  justify-content: space-between;
 }
 
-.CommentBoxHeaderLeft {
-  width: 100%;
-  min-width: 0;
+.CommentBoxHeaderViewSwitch {
+  flex-basis: 0;
+  display: flex;
+  height: 37px;
 }
 
-.CommentBoxHeaderRight {
-  display: flex;
-  gap: var(--base-size-8);
+.CommentBoxHeaderToolbar {
+  flex: 1;
   justify-content: flex-end;
   align-items: center;
+  min-width: 0;
+  display: flex;
+  padding-right: var(--base-size-4);
+
+  .CommentBoxHeaderActionBar {
+    flex: 1;
+    justify-content: flex-end;
+    padding-inline: 0;
+    overflow: hidden;
+  }
 }
 
 .DialogContent {
@@ -69,3 +78,7 @@
 .MultipleActionBarsSection {
   padding: var(--base-size-16);
 }
+
+.OverflowHidden {
+  overflow: hidden;
+}
diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
index 6ef573c6341..dd568fa1cfd 100644
--- a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
@@ -56,14 +56,6 @@ export const WithGroups = () => (
   </ActionBar>
 )
 
-export const TextLabels = () => (
-  <ActionBar aria-label="Toolbar">
-    <Button>Edit</Button>
-    <Button>Duplicate</Button>
-    <Button>Export to CSV</Button>
-  </ActionBar>
-)
-
 export const SmallActionBar = () => (
   <ActionBar size="small" aria-label="Toolbar">
     <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
@@ -128,8 +120,13 @@ export const CommentBox = (props: CommentBoxProps) => {
   return (
     <div className={classes.CommentBoxContainer}>
       <header className={classes.CommentBoxHeader}>
-        <div className={classes.CommentBoxHeaderLeft}>
-          <ActionBar aria-label={toolBarLabel}>
+        <div className={classes.CommentBoxHeaderViewSwitch}>
+          <Button variant="invisible">Write</Button>
+          <Button variant="invisible">Preview</Button>
+        </div>
+
+        <div className={classes.CommentBoxHeaderToolbar}>
+          <ActionBar aria-label={toolBarLabel} className={classes.CommentBoxHeaderActionBar} gap="none">
             <ActionBar.IconButton icon={HeadingIcon} aria-label="Heading"></ActionBar.IconButton>
             <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
             <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
@@ -148,10 +145,6 @@ export const CommentBox = (props: CommentBoxProps) => {
             ></ActionBar.IconButton>
           </ActionBar>
         </div>
-        <div className={classes.CommentBoxHeaderRight}>
-          <Button variant="invisible">Write</Button>
-          <Button variant="invisible">Preview</Button>
-        </div>
       </header>
       <Textarea value={value} onChange={e => setValue(e.target.value)} id="markdowninput" aria-label="Markdown value" />
       <Dialog aria-labelledby="header" returnFocusRef={buttonRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
diff --git a/packages/react/src/ActionBar/ActionBar.module.css b/packages/react/src/ActionBar/ActionBar.module.css
index 13aab764f53..1a40bcf05fa 100644
--- a/packages/react/src/ActionBar/ActionBar.module.css
+++ b/packages/react/src/ActionBar/ActionBar.module.css
@@ -6,10 +6,35 @@
   /* wonder why this is here */
   /* stylelint-disable-next-line primer/spacing */
   margin-bottom: -1px;
-  white-space: nowrap;
   list-style: none;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--actionbar-gap, var(--stack-gap-condensed));
+  overflow: hidden;
+  /* Explicit height is required to clip wrapped items */
+  height: var(--actionbar-height, var(--control-small-size));
+
+  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)
+  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but
+  browser support for scroll-driven animations is slightly better. */
+  animation: detect-overflow linear;
+  animation-timeline: scroll(self block);
+
+  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */
+  &[data-has-overflow='true'] {
+    --morebutton-display: flex;
+  }
+
+  &:where([data-size='small']) {
+    --actionbar-height: var(--control-small-size);
+  }
+
+  &:where([data-size='medium']) {
+    --actionbar-height: var(--control-medium-size);
+  }
+
+  &:where([data-size='large']) {
+    --actionbar-height: var(--control-large-size);
+  }
 
   /* Gap scale (mirrors Stack) */
   &:where([data-gap='none']) {
@@ -23,6 +48,20 @@
   &:where([data-gap='condensed']) {
     --actionbar-gap: var(--stack-gap-condensed);
   }
+
+  & [data-overflowing] {
+    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures
+    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents
+    consumers from unintentionally overriding this and breaking accessibility. */
+    visibility: hidden !important;
+  }
+}
+
+@keyframes detect-overflow {
+  0%,
+  100% {
+    --morebutton-display: flex;
+  }
 }
 
 .Nav {
@@ -44,6 +83,8 @@
     content: '';
     /* stylelint-disable-next-line primer/colors */
     background: var(--borderColor-muted);
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);
   }
 }
 
@@ -51,3 +92,15 @@
   display: flex;
   gap: inherit;
 }
+
+.OverflowContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: inherit;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+
+.MoreButton {
+  display: var(--morebutton-display, none);
+}
diff --git a/packages/react/src/ActionBar/ActionBar.test.tsx b/packages/react/src/ActionBar/ActionBar.test.tsx
index bce7afda03f..98fd2d4b777 100644
--- a/packages/react/src/ActionBar/ActionBar.test.tsx
+++ b/packages/react/src/ActionBar/ActionBar.test.tsx
@@ -228,13 +228,14 @@ describe('ActionBar Registry System', () => {
     render(
       <div style={{width: 0, overflow: 'hidden'}}>
         <ActionBar aria-label="Zero width">
-          <ActionBar.IconButton icon={BoldIcon} aria-label="Zero width button" />
+          <ActionBar.IconButton icon={BoldIcon} aria-label="Zero width button" data-testid="zero-width-button" />
         </ActionBar>
       </div>,
     )
 
     // Component should still render even with zero width
-    expect(screen.getByRole('button', {name: 'Zero width button'})).toBeInTheDocument()
+    // Button is unlabeled because the label is hidden, so we select by test id instead
+    expect(screen.getByTestId('zero-width-button')).toBeInTheDocument()
   })
 
   it('should clean up registry on unmount', async () => {
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index a2c03125535..0e873a6e4e5 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -1,10 +1,7 @@
-import type {RefObject, MouseEventHandler} from 'react'
-import React, {useState, useCallback, useRef, forwardRef, useMemo} from 'react'
+import {type RefObject, type MouseEventHandler, useContext} from 'react'
+import React, {useState, useCallback, useRef, forwardRef, useMemo, useSyncExternalStore} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {ActionList, type ActionListItemProps} from '../ActionList'
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
-import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
-import {useResizeObserver} from '../hooks/useResizeObserver'
 
 import type {IconButtonProps} from '../Button'
 import {IconButton} from '../Button'
@@ -15,8 +12,6 @@ import {clsx} from 'clsx'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import {createDescendantRegistry} from '../utils/descendant-registry'
 
-const ACTIONBAR_ITEM_GAP = 8
-
 type ChildProps =
   | {
       type: 'action'
@@ -24,33 +19,20 @@ type ChildProps =
       disabled: boolean
       icon: ActionBarIconButtonProps['icon']
       onClick: MouseEventHandler
-      width: number
-      groupId?: string
     }
-  | {type: 'divider' | 'group'; width: number}
+  | {type: 'divider' | 'group'}
   | {
       type: 'menu'
-      width: number
       label: string
       icon: ActionBarIconButtonProps['icon'] | 'none'
       items: ActionBarMenuProps['items']
       returnFocusRef?: React.RefObject<HTMLElement>
     }
 
-/**
- * Registry of descendants to render in the list or menu. To preserve insertion order across updates, children are
- * set to `null` when unregistered rather than fully dropped from the map.
- */
-type ChildRegistry = ReadonlyMap<string, ChildProps | null>
-
 const ActionBarContext = React.createContext<{
   size: Size
-  isVisibleChild: (id: string) => boolean
-  groupId?: string
 }>({
   size: 'medium',
-  isVisibleChild: () => true,
-  groupId: undefined,
 })
 
 /*
@@ -157,30 +139,10 @@ export type ActionBarMenuProps = {
   returnFocusRef?: React.RefObject<HTMLElement>
 } & IconButtonProps
 
-const MORE_BTN_WIDTH = 32
-
-const ActionBarItemsRegistry = createDescendantRegistry<ChildProps>()
-
-const calculatePossibleItems = (
-  registryEntries: Array<[string, ChildProps]>,
-  navWidth: number,
-  gap: number,
-  moreMenuWidth = 0,
-) => {
-  const widthToFit = navWidth - moreMenuWidth
-  let breakpoint = registryEntries.length // assume all items will fit
-  let sumsOfChildWidth = 0
-  for (const [index, [, child]] of registryEntries.entries()) {
-    sumsOfChildWidth += index > 0 ? child.width + gap : child.width
-    if (sumsOfChildWidth > widthToFit) {
-      breakpoint = index
-      break
-    } else {
-      continue
-    }
-  }
-  return breakpoint
-}
+const ActionBarItemsRegistry = createDescendantRegistry<ChildProps | null>()
+
+const FOCUSABLE_ITEM_SELECTOR =
+  ':is(button, a, input, [tabindex]):not(:disabled):not([data-overflowing]):not([data-more-button-inactive])'
 
 const renderMenuItem = (item: ActionBarMenuItemProps, index: number): React.ReactNode => {
   if (item.type === 'divider') {
@@ -231,240 +193,156 @@ const renderMenuItem = (item: ActionBarMenuItemProps, index: number): React.Reac
   )
 }
 
-const getMenuItems = (
-  navWidth: number,
-  moreMenuWidth: number,
-  childRegistry: ChildRegistry | undefined,
-  hasActiveMenu: boolean,
-  gap: number,
-): Set<string> | void => {
-  const registryEntries = Array.from(childRegistry?.entries() ?? []).filter(
-    (entry): entry is [string, ChildProps] =>
-      entry[1] !== null && (entry[1].type !== 'action' || entry[1].groupId === undefined),
-  )
-
-  if (registryEntries.length === 0) return new Set()
-  const numberOfItemsPossible = calculatePossibleItems(registryEntries, navWidth, gap)
-
-  const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(
-    registryEntries,
-    navWidth,
-    gap,
-    moreMenuWidth || MORE_BTN_WIDTH,
-  )
-  const menuItems = new Set<string>()
-
-  // First, we check if we can fit all the items with their icons
-  if (registryEntries.length >= numberOfItemsPossible) {
-    /* Below is an accessibility requirement. Never show only one item in the overflow menu.
-     * If there is only one item left to display in the overflow menu according to the calculation,
-     * we need to pull another item from the list into the overflow menu.
-     */
-    const numberOfItemsInMenu = registryEntries.length - numberOfItemsPossibleWithMoreMenu
-    const numberOfListItems =
-      numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu
-    for (const [index, [id, child]] of registryEntries.entries()) {
-      if (index < numberOfListItems) {
-        continue
-        //if the last item is a divider
-      } else if (child.type === 'divider') {
-        if (index === numberOfListItems - 1 || index === numberOfListItems) {
-          continue
-        } else {
-          menuItems.add(id)
-        }
-      } else {
-        menuItems.add(id)
-      }
-    }
-
-    return menuItems
-  } else if (numberOfItemsPossible > registryEntries.length && hasActiveMenu) {
-    /* If the items fit in the list and there are items in the overflow menu, we need to move them back to the list */
-    return new Set()
-  }
-}
-
-export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = props => {
-  const {
-    size = 'medium',
-    children,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    flush = false,
-    className,
-    gap = 'condensed',
-  } = props
-
-  // We derive the numeric gap from computed style so layout math stays in sync with CSS
-  const listRef = useRef<HTMLDivElement>(null)
-  const [computedGap, setComputedGap] = useState<number>(ACTIONBAR_ITEM_GAP)
-
+export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = ({
+  size = 'medium',
+  children,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  flush = false,
+  className,
+  gap = 'condensed',
+}) => {
   const [childRegistry, setChildRegistry] = ActionBarItemsRegistry.useRegistryState()
 
-  const [menuItemIds, setMenuItemIds] = useState<Set<string>>(() => new Set())
-
-  const navRef = useRef<HTMLDivElement>(null)
-  // measure gap after first render & whenever gap scale changes
-  useIsomorphicLayoutEffect(() => {
-    if (!listRef.current) return
-    const g = window.getComputedStyle(listRef.current).gap
-    const parsed = parseFloat(g)
-    if (!Number.isNaN(parsed)) setComputedGap(parsed)
-  }, [gap])
-  const moreMenuRef = useRef<HTMLLIElement>(null)
-
-  useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
-    const navWidth = resizeObserverEntries[0].contentRect.width
-    const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
-    const hasActiveMenu = menuItemIds.size > 0
-
-    if (navWidth > 0) {
-      const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap)
-      if (newMenuItemIds) setMenuItemIds(newMenuItemIds)
-    }
-  }, navRef as RefObject<HTMLElement>)
+  const overflowItems = useMemo(
+    () =>
+      childRegistry &&
+      Array.from(childRegistry.entries()).filter((entry): entry is [string, ChildProps] => entry[1] !== null),
+    [childRegistry],
+  )
 
-  const isVisibleChild = useCallback(
-    (id: string) => {
-      return !menuItemIds.has(id)
+  const {containerRef} = useFocusZone(
+    {
+      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusOutBehavior: 'wrap',
+      focusableElementFilter: element => element.matches(FOCUSABLE_ITEM_SELECTOR),
     },
-    [menuItemIds],
+    [overflowItems],
   )
 
-  useFocusZone({
-    containerRef: listRef,
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusOutBehavior: 'wrap',
-  })
-
-  const groupedItems = React.useMemo(() => {
-    const groupedItemsMap = new Map<string, Array<[string, ChildProps]>>()
-
-    for (const [key, childProps] of childRegistry ?? []) {
-      if (childProps.type === 'action' && childProps.groupId) {
-        const existingGroup = groupedItemsMap.get(childProps.groupId) || []
-        existingGroup.push([key, childProps])
-        groupedItemsMap.set(childProps.groupId, existingGroup)
-      }
-    }
-    return groupedItemsMap
-  }, [childRegistry])
-
   return (
-    <ActionBarContext.Provider value={{size, isVisibleChild}}>
-      <div ref={navRef} className={clsx(className, styles.Nav)} data-component="ActionBar" data-flush={flush}>
+    <ActionBarContext.Provider value={{size}}>
+      <div className={clsx(className, styles.Nav)} data-component="ActionBar" data-flush={flush}>
         <div
-          ref={listRef}
+          ref={containerRef as RefObject<HTMLDivElement>}
           role="toolbar"
           className={styles.List}
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledBy}
           data-gap={gap}
+          data-size={size}
+          data-has-overflow={overflowItems ? overflowItems.length > 0 : undefined}
         >
-          <ActionBarItemsRegistry.Provider setRegistry={setChildRegistry}>{children}</ActionBarItemsRegistry.Provider>
-          {menuItemIds.size > 0 && (
-            <ActionMenu>
-              <ActionMenu.Anchor>
-                <IconButton variant="invisible" aria-label={`More ${ariaLabel} items`} icon={KebabHorizontalIcon} />
-              </ActionMenu.Anchor>
-              <ActionMenu.Overlay>
-                <ActionList>
-                  {Array.from(menuItemIds).map(id => {
-                    const menuItem = childRegistry?.get(id)
-                    if (!menuItem) return null
-
-                    if (menuItem.type === 'divider') {
-                      return <ActionList.Divider key={id} />
-                    } else if (menuItem.type === 'action') {
-                      const {onClick, icon: Icon, label, disabled} = menuItem
-                      return (
-                        <ActionList.Item
-                          key={label}
-                          onSelect={event => {
-                            typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
-                          }}
-                          disabled={disabled}
-                        >
-                          <ActionList.LeadingVisual>
-                            <Icon />
-                          </ActionList.LeadingVisual>
-                          {label}
-                        </ActionList.Item>
-                      )
-                    }
-
-                    if (menuItem.type === 'menu') {
-                      const menuItems = menuItem.items
-                      const {icon: Icon, label, returnFocusRef} = menuItem
-
-                      return (
-                        <ActionMenu key={id}>
-                          <ActionMenu.Anchor>
-                            <ActionList.Item>
-                              {Icon !== 'none' ? (
-                                <ActionList.LeadingVisual>
-                                  <Icon />
-                                </ActionList.LeadingVisual>
-                              ) : null}
-                              {label}
-                            </ActionList.Item>
-                          </ActionMenu.Anchor>
-                          <ActionMenu.Overlay {...(returnFocusRef && {returnFocusRef})}>
-                            <ActionList>{menuItems.map((item, index) => renderMenuItem(item, index))}</ActionList>
-                          </ActionMenu.Overlay>
-                        </ActionMenu>
-                      )
-                    }
-
-                    // Use the memoized map instead of filtering each time
-                    const groupedMenuItems = groupedItems.get(id) || []
-
-                    // If we ever add additional types, this condition will be necessary
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    if (menuItem.type === 'group') {
-                      return (
-                        <React.Fragment key={id}>
-                          {groupedMenuItems.map(([key, childProps]) => {
-                            if (childProps.type === 'action') {
-                              const {onClick, icon: Icon, label, disabled} = childProps
-                              return (
-                                <ActionList.Item
-                                  key={key}
-                                  onSelect={event => {
-                                    typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
-                                  }}
-                                  disabled={disabled}
-                                >
-                                  <ActionList.LeadingVisual>
-                                    <Icon />
-                                  </ActionList.LeadingVisual>
-                                  {label}
-                                </ActionList.Item>
-                              )
-                            }
-                            return null
-                          })}
-                        </React.Fragment>
-                      )
-                    }
-                  })}
-                </ActionList>
-              </ActionMenu.Overlay>
-            </ActionMenu>
-          )}
+          <div className={styles.OverflowContainer}>
+            {/* An empty first element allows the real first item to wrap to the next line and get clipped. */}
+            <div />
+            <ActionBarItemsRegistry.Provider setRegistry={setChildRegistry}>{children}</ActionBarItemsRegistry.Provider>
+          </div>
+          <ActionMenu>
+            <ActionMenu.Anchor>
+              <IconButton
+                variant="invisible"
+                aria-label={`More ${ariaLabel} items ${overflowItems?.length}`}
+                icon={KebabHorizontalIcon}
+                className={styles.MoreButton}
+                data-more-button-inactive={overflowItems?.length ? undefined : true}
+                size={size}
+              />
+            </ActionMenu.Anchor>
+            <ActionMenu.Overlay>
+              <ActionList>
+                {overflowItems?.map(([id, menuItem]) => {
+                  if (menuItem.type === 'divider') {
+                    return <ActionList.Divider key={id} />
+                  }
+
+                  if (menuItem.type === 'action') {
+                    const {onClick, icon: Icon, label, disabled} = menuItem
+                    return (
+                      <ActionList.Item
+                        key={label}
+                        onSelect={event => {
+                          typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
+                        }}
+                        disabled={disabled}
+                      >
+                        <ActionList.LeadingVisual>
+                          <Icon />
+                        </ActionList.LeadingVisual>
+                        {label}
+                      </ActionList.Item>
+                    )
+                  }
+
+                  if (menuItem.type === 'menu') {
+                    const menuItems = menuItem.items
+                    const {icon: Icon, label, returnFocusRef} = menuItem
+
+                    return (
+                      <ActionMenu key={id}>
+                        <ActionMenu.Anchor>
+                          <ActionList.Item>
+                            {Icon !== 'none' ? (
+                              <ActionList.LeadingVisual>
+                                <Icon />
+                              </ActionList.LeadingVisual>
+                            ) : null}
+                            {label}
+                          </ActionList.Item>
+                        </ActionMenu.Anchor>
+                        <ActionMenu.Overlay {...(returnFocusRef && {returnFocusRef})}>
+                          <ActionList>{menuItems.map((item, index) => renderMenuItem(item, index))}</ActionList>
+                        </ActionMenu.Overlay>
+                      </ActionMenu>
+                    )
+                  }
+                })}
+              </ActionList>
+            </ActionMenu.Overlay>
+          </ActionMenu>
         </div>
       </div>
     </ActionBarContext.Provider>
   )
 }
 
-function useWidth(ref: React.RefObject<HTMLElement | null>) {
-  const [width, setWidth] = useState(-1)
+function useActionBarItem(ref: React.RefObject<HTMLElement | null>, registryProps: ChildProps) {
+  const isGroupOverflowing = useContext(ActionBarGroupContext)?.isOverflowing
+  const isInGroup = isGroupOverflowing !== undefined
+
+  const subscribeIntersectionObserver = useCallback(
+    (onChange: () => void) => {
+      // There's no need to register observers on items inside of a group
+      // since the entire group overflows at once
+      if (isInGroup) return () => {}
 
-  useIsomorphicLayoutEffect(() => setWidth(ref.current?.getBoundingClientRect().width ?? -1), [ref])
+      // Technically 1 should work as the threshold, but in some scenarios that
+      // doesn't seem to trigger correctly - probably because the browser still
+      // thinks a tiny bit of the button is not visible, since the container
+      // height is exactly the button height. So 75% should be more reliable.
+      const observer = new IntersectionObserver(() => onChange(), {threshold: 0.75})
 
-  return width
+      if (ref.current) observer.observe(ref.current)
+      return () => observer.disconnect()
+    },
+    [ref, isInGroup],
+  )
+
+  const isItemOverflowing = useSyncExternalStore(
+    subscribeIntersectionObserver,
+    // Note: the IntersectionObserver is just being used as a trigger to re-check
+    // `offsetTop > 0`; this is fast and simpler than checking visibility from
+    // the observed entry. When an item wraps, it will move to the next row which
+    // increases its `offsetTop`
+    () => (ref.current ? ref.current.offsetTop > 0 : false),
+    () => false,
+  )
+
+  const isOverflowing = isGroupOverflowing || isItemOverflowing
+
+  ActionBarItemsRegistry.useRegisterDescendant(isOverflowing ? registryProps : null)
+
+  return {isOverflowing, dataOverflowingAttr: isOverflowing ? '' : undefined}
 }
 
 export const ActionBarIconButton = forwardRef(
@@ -472,28 +350,24 @@ export const ActionBarIconButton = forwardRef(
     const ref = useRef<HTMLButtonElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, ref)
 
-    const {size, isVisibleChild} = React.useContext(ActionBarContext)
-    const {groupId} = React.useContext(ActionBarGroupContext)
-
-    const width = useWidth(ref)
+    const {size} = React.useContext(ActionBarContext)
 
     const {['aria-label']: ariaLabel, icon} = props
 
-    const registryProps = useMemo(
-      (): ChildProps => ({
-        type: 'action',
-        label: ariaLabel ?? '',
-        icon,
-        disabled: !!disabled,
-        onClick: onClick as MouseEventHandler,
-        width,
-        groupId: groupId ?? undefined,
-      }),
-      [ariaLabel, icon, disabled, onClick, groupId, width],
+    const {dataOverflowingAttr} = useActionBarItem(
+      ref,
+      useMemo(
+        (): ChildProps => ({
+          type: 'action',
+          label: ariaLabel ?? '',
+          icon,
+          disabled: !!disabled,
+          onClick: onClick as MouseEventHandler,
+        }),
+        [ariaLabel, icon, disabled, onClick],
+      ),
     )
 
-    const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps)
-
     const clickHandler = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
         if (disabled) return
@@ -502,8 +376,6 @@ export const ActionBarIconButton = forwardRef(
       [disabled, onClick],
     )
 
-    if (!isVisibleChild(id) || (groupId && !isVisibleChild(groupId))) return null
-
     return (
       <IconButton
         aria-disabled={disabled}
@@ -512,27 +384,27 @@ export const ActionBarIconButton = forwardRef(
         onClick={clickHandler}
         {...props}
         variant="invisible"
+        data-overflowing={dataOverflowingAttr}
       />
     )
   },
 )
 
 const ActionBarGroupContext = React.createContext<{
-  groupId: string | null
-}>({groupId: null})
+  isOverflowing: boolean
+} | null>(null)
 
 export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, forwardedRef) => {
   const backupRef = useRef<HTMLDivElement>(null)
   const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement>
-  const width = useWidth(ref)
-
-  const registryProps = useMemo((): ChildProps => ({type: 'group', width}), [width])
-
-  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps)
+  const {dataOverflowingAttr, isOverflowing} = useActionBarItem(
+    ref,
+    useMemo((): ChildProps => ({type: 'group'}), []),
+  )
 
   return (
-    <ActionBarGroupContext.Provider value={{groupId: id}}>
-      <div className={styles.Group} data-component="ActionBar.Group" ref={ref}>
+    <ActionBarGroupContext.Provider value={{isOverflowing}}>
+      <div className={styles.Group} data-component="ActionBar.Group" ref={ref} data-overflowing={dataOverflowingAttr}>
         {children}
       </div>
     </ActionBarGroupContext.Provider>
@@ -546,28 +418,23 @@ export const ActionBarMenu = forwardRef(
   ) => {
     const backupRef = useRef<HTMLButtonElement>(null)
     const ref = (forwardedRef ?? backupRef) as RefObject<HTMLButtonElement>
-    const {isVisibleChild} = React.useContext(ActionBarContext)
 
     const [menuOpen, setMenuOpen] = useState(false)
 
-    const width = useWidth(ref)
-
-    const registryProps = useMemo(
-      (): ChildProps => ({
-        type: 'menu',
-        width,
-        label: ariaLabel,
-        icon: overflowIcon ? overflowIcon : icon,
-        returnFocusRef,
-        items,
-      }),
-      [ariaLabel, overflowIcon, icon, items, returnFocusRef, width],
+    const {dataOverflowingAttr} = useActionBarItem(
+      ref,
+      useMemo(
+        (): ChildProps => ({
+          type: 'menu',
+          label: ariaLabel,
+          icon: overflowIcon ? overflowIcon : icon,
+          returnFocusRef,
+          items,
+        }),
+        [ariaLabel, overflowIcon, icon, items, returnFocusRef],
+      ),
     )
 
-    const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps)
-
-    if (!isVisibleChild(id)) return null
-
     return (
       <ActionMenu anchorRef={ref} open={menuOpen} onOpenChange={setMenuOpen}>
         <ActionMenu.Anchor>
@@ -576,6 +443,7 @@ export const ActionBarMenu = forwardRef(
             aria-label={ariaLabel}
             icon={icon}
             {...props}
+            data-overflowing={dataOverflowingAttr}
             // overriding IconButton's data-component so that the ActionBar's "More Menu" Icon can be targeted specifically
             data-component="ActionBar.Menu.IconButton"
           />
@@ -590,14 +458,18 @@ export const ActionBarMenu = forwardRef(
 
 export const VerticalDivider = () => {
   const ref = useRef<HTMLDivElement>(null)
-  const {isVisibleChild} = React.useContext(ActionBarContext)
-
-  const width = useWidth(ref)
-
-  const registryProps = useMemo((): ChildProps => ({type: 'divider', width}), [width])
-
-  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps)
+  const {dataOverflowingAttr} = useActionBarItem(
+    ref,
+    useMemo((): ChildProps => ({type: 'divider'}), []),
+  )
 
-  if (!isVisibleChild(id)) return null
-  return <div ref={ref} data-component="ActionBar.VerticalDivider" aria-hidden="true" className={styles.Divider} />
+  return (
+    <div
+      ref={ref}
+      data-component="ActionBar.VerticalDivider"
+      aria-hidden="true"
+      className={styles.Divider}
+      data-overflowing={dataOverflowingAttr}
+    />
+  )
 }