diff --git a/packages/compass-components/src/components/actions/dropdown-menu-button.tsx b/packages/compass-components/src/components/actions/dropdown-menu-button.tsx
index 5ee1430c3eb..d24e4a031aa 100644
--- a/packages/compass-components/src/components/actions/dropdown-menu-button.tsx
+++ b/packages/compass-components/src/components/actions/dropdown-menu-button.tsx
@@ -11,12 +11,13 @@ import { actionTestId } from './utils';
 import { ActionGlyph } from './action-glyph';
 import { isSeparatorMenuAction, type MenuAction } from './item-action-menu';
 
-const hiddenOnNarrowStyles = css({
-  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
-    {
-      display: 'none',
-    },
-});
+const getHiddenOnNarrowStyles = (narrowBreakpoint: string) =>
+  css({
+    [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < ${narrowBreakpoint})`]:
+      {
+        display: 'none',
+      },
+  });
 
 export type DropdownMenuButtonProps<Action extends string> = {
   actions: MenuAction<Action>[];
@@ -29,6 +30,7 @@ export type DropdownMenuButtonProps<Action extends string> = {
   buttonText: string;
   buttonProps: ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
   hideOnNarrow?: boolean;
+  narrowBreakpoint?: string;
 };
 
 export function DropdownMenuButton<Action extends string>({
@@ -42,6 +44,7 @@ export function DropdownMenuButton<Action extends string>({
   iconSize = ItemActionButtonSize.Default,
   'data-testid': dataTestId,
   hideOnNarrow = true,
+  narrowBreakpoint = '900px',
 }: DropdownMenuButtonProps<Action>) {
   // This ref is used by the Menu component to calculate the height and position
   // of the menu.
@@ -97,7 +100,13 @@ export function DropdownMenuButton<Action extends string>({
             {...buttonProps}
           >
             {buttonText && (
-              <span className={hideOnNarrow ? hiddenOnNarrowStyles : undefined}>
+              <span
+                className={
+                  hideOnNarrow
+                    ? getHiddenOnNarrowStyles(narrowBreakpoint)
+                    : undefined
+                }
+              >
                 {buttonText}
               </span>
             )}
diff --git a/packages/compass-crud/src/components/add-data-menu.tsx b/packages/compass-crud/src/components/add-data-menu.tsx
index 5aa95bd86ae..bc684d1d693 100644
--- a/packages/compass-crud/src/components/add-data-menu.tsx
+++ b/packages/compass-crud/src/components/add-data-menu.tsx
@@ -7,6 +7,7 @@ import {
 } from '@mongodb-js/compass-components';
 import type { MenuAction } from '@mongodb-js/compass-components';
 import { usePreference } from 'compass-preferences-model/provider';
+import { DOCUMENT_NARROW_ICON_BREAKPOINT } from '../constants/document-narrow-icon-breakpoint';
 
 const tooltipContainerStyles = css({
   display: 'flex',
@@ -55,6 +56,7 @@ function AddDataMenuButton({
         leftGlyph: <Icon glyph="PlusWithCircle" />,
         disabled: isDisabled,
       }}
+      narrowBreakpoint={DOCUMENT_NARROW_ICON_BREAKPOINT}
     ></DropdownMenuButton>
   );
 }
diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx
index 15d425628f4..6b554d30e5e 100644
--- a/packages/compass-crud/src/components/crud-toolbar.tsx
+++ b/packages/compass-crud/src/components/crud-toolbar.tsx
@@ -23,6 +23,7 @@ import UpdateMenu from './update-data-menu';
 import DeleteMenu from './delete-data-menu';
 import { QueryBar } from '@mongodb-js/compass-query-bar';
 import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
+import { DOCUMENT_NARROW_ICON_BREAKPOINT } from '../constants/document-narrow-icon-breakpoint';
 
 const crudQueryBarStyles = css({
   width: '100%',
@@ -234,6 +235,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
                 size: 'xsmall',
                 leftGlyph: <Icon glyph="Export" />,
               }}
+              narrowBreakpoint={DOCUMENT_NARROW_ICON_BREAKPOINT}
             />
           )}
           {!readonly && (
diff --git a/packages/compass-crud/src/components/delete-data-menu.tsx b/packages/compass-crud/src/components/delete-data-menu.tsx
index 848fed3bcf0..92ca694b703 100644
--- a/packages/compass-crud/src/components/delete-data-menu.tsx
+++ b/packages/compass-crud/src/components/delete-data-menu.tsx
@@ -6,6 +6,7 @@ import {
   WorkspaceContainer,
   css,
 } from '@mongodb-js/compass-components';
+import { DOCUMENT_NARROW_ICON_BREAKPOINT } from '../constants/document-narrow-icon-breakpoint';
 
 type DeleteMenuButtonProps = {
   isWritable: boolean;
@@ -13,7 +14,7 @@ type DeleteMenuButtonProps = {
 };
 
 const hiddenOnNarrowStyles = css({
-  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
+  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < ${DOCUMENT_NARROW_ICON_BREAKPOINT})`]:
     {
       display: 'none',
     },
diff --git a/packages/compass-crud/src/components/update-data-menu.tsx b/packages/compass-crud/src/components/update-data-menu.tsx
index 007e7e7924e..447df6f3f6a 100644
--- a/packages/compass-crud/src/components/update-data-menu.tsx
+++ b/packages/compass-crud/src/components/update-data-menu.tsx
@@ -6,6 +6,7 @@ import {
   css,
   WorkspaceContainer,
 } from '@mongodb-js/compass-components';
+import { DOCUMENT_NARROW_ICON_BREAKPOINT } from '../constants/document-narrow-icon-breakpoint';
 
 type UpdateMenuButtonProps = {
   isWritable: boolean;
@@ -13,7 +14,7 @@ type UpdateMenuButtonProps = {
 };
 
 const hiddenOnNarrowStyles = css({
-  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
+  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < ${DOCUMENT_NARROW_ICON_BREAKPOINT})`]:
     {
       display: 'none',
     },
diff --git a/packages/compass-crud/src/constants/document-narrow-icon-breakpoint.ts b/packages/compass-crud/src/constants/document-narrow-icon-breakpoint.ts
new file mode 100644
index 00000000000..3cae9051a4f
--- /dev/null
+++ b/packages/compass-crud/src/constants/document-narrow-icon-breakpoint.ts
@@ -0,0 +1,4 @@
+/**
+ * This is the width at which the icons switch to narrow mode in the Documents tab.
+ */
+export const DOCUMENT_NARROW_ICON_BREAKPOINT = '960px';