Repository: Sage/carbon (ts)

Issue:
MenuItem padding not applied to correct element
### Description

When assigning padding values to a clickable MenuItem, this padding is added to the span wrapping the button, which has its own 16px left/right padding.

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-rb1szg?file=src%2FApp.tsx

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

SBS-100370

### Suggested solution

_No response_

### Carbon version

141.4.4

### Design tokens version

_No response_

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request description:
feat(menu-item): add `submenuMaxWidth` prop to allow setting of `max-width` on submenus
### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
Adds `submenuMaxWidth` prop to allow setting of `max-width` on the `submenu` child of a `MenuItem`. When the prop is set any submenu items will wrap so they do not overflow the bounds of the container.

![image](https://github.com/user-attachments/assets/7efad75d-f22c-46c8-8b5e-746f2e25aaf2)

Replaces display inline-block with flex and removes height and line-height as it makes the spacing incorrect when the items wrap

Updates how padding is applied so it is set on the button/anchor elements rather than the wrapper
fix #6889

![image](https://github.com/user-attachments/assets/b0ecc832-81f6-47bc-b478-4a6e4df1de50)

### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
There is no support for setting max width on the submenu elements, child menu-items do not wrap.
Height and line-height are 40px and display is inline-block
Padding is applied to the wrapper element rather than the button/anchor element so that even when it is set to zero the underlying element's padding means there's no visual update

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Screenshots are included in the PR if useful
- [x] Unit tests added or updated if required
- [x] Playwright automation tests added or updated if required
- [x] Storybook added or updated if required
- [x] Typescript `d.ts` file added or updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->
`menu--truncation-and-submenu-width` added for testing/demoing of updates
`menu-test--menu-with-submenu-custom-padding` added for padding regression

- As I have had to make changes to how the items display I suggest that `Menu` is thoroughly tested to ensure there have been no visual regressions

Patch:
diff --git a/src/components/global-header/global-header.stories.tsx b/src/components/global-header/global-header.stories.tsx
index 1e7883cd7..d8d04695a 100644
--- a/src/components/global-header/global-header.stories.tsx
+++ b/src/components/global-header/global-header.stories.tsx
@@ -161,7 +161,9 @@ export const GlobalLocalNavBarLayout: Story = () => {
       </GlobalHeader>
       <NavigationBar position="fixed" orientation="top" offset="40px">
         <Menu display="flex" flex="1">
-          <MenuItem flex="1">Menu Item One</MenuItem>
+          <MenuItem href="#" flex="1">
+            Menu Item One
+          </MenuItem>
           <MenuItem flex="0 0 auto" href="#">
             Menu Item Two
           </MenuItem>
diff --git a/src/components/link/link.style.ts b/src/components/link/link.style.ts
index e6b343e4e..8e284a416 100644
--- a/src/components/link/link.style.ts
+++ b/src/components/link/link.style.ts
@@ -118,7 +118,6 @@ const StyledLink = styled.span<StyledLinkProps & PrivateStyledLinkProps>`
             text-decoration: underline var(--colorsUtilityYin100);
             text-decoration-thickness: 4px;
             text-underline-offset: 3px;
-
             -webkit-text-decoration: underline var(--colorsUtilityYin100);
             -webkit-text-decoration-thickness: 4px;
             -webkit-text-underline-offset: 3px;
@@ -127,7 +126,7 @@ const StyledLink = styled.span<StyledLinkProps & PrivateStyledLinkProps>`
 
         a:focus {
           top: var(--spacing100);
-          left: 0;
+          left: var(--spacing000);
         }
       `}
 
diff --git a/src/components/menu/__internal__/submenu/submenu.component.tsx b/src/components/menu/__internal__/submenu/submenu.component.tsx
index 4c19bd7ec..c2c85e93a 100644
--- a/src/components/menu/__internal__/submenu/submenu.component.tsx
+++ b/src/components/menu/__internal__/submenu/submenu.component.tsx
@@ -69,8 +69,10 @@ export interface SubmenuProps {
       | React.MouseEvent<HTMLAnchorElement>
       | React.MouseEvent<HTMLButtonElement>
   ) => void;
-
+  /** Accessible label for when no text children are passed to menu item */
   ariaLabel?: string;
+  /** Sets the max-width of the submenu container element */
+  submenuMaxWidth?: string;
 }
 
 const Submenu = React.forwardRef<
@@ -94,6 +96,7 @@ const Submenu = React.forwardRef<
       onSubmenuOpen: onSubmenuOpenProp,
       onSubmenuClose,
       onClick,
+      submenuMaxWidth,
       ...rest
     }: SubmenuProps,
     ref
@@ -536,6 +539,7 @@ const Submenu = React.forwardRef<
           href={href}
           maxWidth={maxWidth}
           aria-expanded={submenuOpen}
+          data-role="submenu-parent-item"
         >
           {title}
         </StyledMenuItemWrapper>
@@ -550,6 +554,7 @@ const Submenu = React.forwardRef<
             maxHeight={submenuMaxHeight}
             applyFocusRadiusStyling={applyFocusRadius}
             applyFocusRadiusStylingToLastItem={applyFocusRadiusToLastItem}
+            submenuMaxWidth={submenuMaxWidth}
           >
             <SubmenuContext.Provider
               value={{
@@ -558,6 +563,7 @@ const Submenu = React.forwardRef<
                 blockIndex,
                 updateFocusId: setSubmenuFocusId,
                 shiftTabPressed: shiftTabPressed.current,
+                submenuHasMaxWidth: !!submenuMaxWidth,
               }}
             >
               {children}
diff --git a/src/components/menu/__internal__/submenu/submenu.context.tsx b/src/components/menu/__internal__/submenu/submenu.context.tsx
index 289a81886..ddd9d11e7 100644
--- a/src/components/menu/__internal__/submenu/submenu.context.tsx
+++ b/src/components/menu/__internal__/submenu/submenu.context.tsx
@@ -6,6 +6,7 @@ export interface SubmenuContextProps {
   handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
   shiftTabPressed?: boolean;
   blockIndex?: number;
+  submenuHasMaxWidth?: boolean;
 }
 
 const SubmenuContext = React.createContext<SubmenuContextProps>({});
diff --git a/src/components/menu/__internal__/submenu/submenu.style.ts b/src/components/menu/__internal__/submenu/submenu.style.ts
index 3858c728b..6a68f530b 100644
--- a/src/components/menu/__internal__/submenu/submenu.style.ts
+++ b/src/components/menu/__internal__/submenu/submenu.style.ts
@@ -23,7 +23,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
 
 interface StyledSubmenuProps
   extends SharedStyleProps,
-    Pick<SubmenuProps, "variant"> {
+    Pick<SubmenuProps, "variant" | "submenuMaxWidth"> {
   submenuDirection?: string;
   maxHeight?: string;
   applyFocusRadiusStyling: boolean;
@@ -66,6 +66,7 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
     maxHeight,
     applyFocusRadiusStyling,
     applyFocusRadiusStylingToLastItem,
+    submenuMaxWidth,
   }) => css`
     ${!inFullscreenView &&
     menuType &&
@@ -75,6 +76,25 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
       background-color: ${variant === "default"
         ? menuConfigVariants[menuType].submenuItemBackground
         : menuConfigVariants[menuType].background};
+
+      min-width: 100%;
+
+      ${submenuMaxWidth &&
+      css`
+        min-width: ${submenuMaxWidth};
+        max-width: ${submenuMaxWidth};
+
+        &&& {
+          a,
+          button,
+          ${StyledLink} a,
+          ${StyledLink} button {
+            white-space: normal;
+            height: auto;
+          }
+        }
+      `}
+
       a,
       button,
       ${StyledLink} a,
@@ -85,6 +105,8 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
 
     ${inFullscreenView &&
     css`
+      min-width: 100%;
+
       ${StyledMenuItem} {
         width: 100%;
       }
@@ -144,7 +166,6 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
     list-style: none;
     margin: 0;
     padding: 0;
-    min-width: 100%;
 
     ${StyledMenuItemWrapper}:after, ${StyledMenuItemWrapper}:hover:after {
       display: none;
@@ -153,8 +174,6 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
     ${StyledMenuItemWrapper} {
       display: flex;
       align-items: center;
-      height: 40px;
-      line-height: 40px;
       white-space: nowrap;
       cursor: pointer;
 
@@ -164,6 +183,12 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
         height: auto;
       `}
 
+      ${submenuMaxWidth &&
+      css`
+        height: auto;
+        min-height: 40px;
+      `}
+
       ${!inFullscreenView &&
       menuType &&
       css`
@@ -184,6 +209,15 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
             color: var(--colorsComponentsMenuYang100);
           }
         }
+
+        > a,
+        > button {
+          padding: 11px 16px 12px;
+
+          :has([data-component="icon"]) {
+            padding: 9px 16px 7px;
+          }
+        }
       `}
 
       a {
diff --git a/src/components/menu/menu-item/menu-item.component.tsx b/src/components/menu/menu-item/menu-item.component.tsx
index 72a7f6561..cdb717d87 100644
--- a/src/components/menu/menu-item/menu-item.component.tsx
+++ b/src/components/menu/menu-item/menu-item.component.tsx
@@ -70,13 +70,18 @@ interface MenuItemBaseProps
   overrideColor?: boolean;
   /** When set the submenu opens by click instead of hover */
   clickToOpen?: boolean;
-  /** Sets the maxWidth of the MenuItem */
+  /**
+   * Sets the maxWidth of the MenuItem, setting this on a non-submenu
+   * item will truncate any text/content that may overflow
+   * */
   maxWidth?: MaxWidthProps["maxWidth"];
   /**
    * @private @ignore
    * Renders MenuItem as a div element
    * */
   as?: "div";
+  /** Sets the max-width of the submenu container element, accepts any valid CSS string */
+  submenuMaxWidth?: string;
 }
 
 export interface MenuWithChildren extends MenuItemBaseProps {
@@ -93,6 +98,7 @@ export interface MenuWithIcon extends MenuItemBaseProps {
 
 export const MenuItem = ({
   submenu,
+  submenuMaxWidth,
   children,
   href,
   onClick,
@@ -283,6 +289,7 @@ export const MenuItem = ({
           ariaLabel={ariaLabel}
           onSubmenuOpen={onSubmenuOpen}
           onSubmenuClose={onSubmenuClose}
+          submenuMaxWidth={submenuMaxWidth}
           {...elementProps}
           variant={variant}
           {...rest}
diff --git a/src/components/menu/menu-item/menu-item.style.ts b/src/components/menu/menu-item/menu-item.style.ts
index 0bad70981..bca3ffede 100644
--- a/src/components/menu/menu-item/menu-item.style.ts
+++ b/src/components/menu/menu-item/menu-item.style.ts
@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { padding, PaddingProps } from "styled-system";
-import { StyledLink } from "../../link/link.style";
+import StyledButton from "../../button/button.style";
+import { StyledContent, StyledLink } from "../../link/link.style";
 import StyledIcon from "../../icon/icon.style";
 import StyledIconButton from "../../icon-button/icon-button.style";
 import menuConfigVariants from "../menu.config";
@@ -34,6 +35,47 @@ interface StyledMenuItemWrapperProps
   menuItemVariant?: Pick<MenuWithChildren, "variant">["variant"];
 }
 
+const BASE_SPACING = 16;
+
+const parsePadding = (props: Partial<PaddingProps>) => {
+  const { paddingRight } = props;
+  const paddingNumber = String(paddingRight)?.match(/\d+/)?.[0];
+
+  if (paddingRight === "var(--spacing000)" || paddingNumber === "0") {
+    return { padding: "var(--spacing200)", iconSpacing: "2px" };
+  }
+
+  switch (paddingRight) {
+    case "var(--spacing100)":
+      return { padding: "var(--spacing300)", iconSpacing: paddingRight };
+    case "var(--spacing200)":
+      return { padding: "var(--spacing400)", iconSpacing: paddingRight };
+    case "var(--spacing300)":
+      return { padding: "var(--spacing500)", iconSpacing: paddingRight };
+    case "var(--spacing400)":
+      return { padding: "var(--spacing600)", iconSpacing: paddingRight };
+    case "var(--spacing500)":
+      return { padding: "var(--spacing700)", iconSpacing: paddingRight };
+    case "var(--spacing600)":
+      return { padding: "var(--spacing800)", iconSpacing: paddingRight };
+    case "var(--spacing700)":
+      return { padding: "var(--spacing900)", iconSpacing: paddingRight };
+    case "var(--spacing800)":
+      return {
+        padding: "var(--spacing1000)",
+        iconSpacing: paddingRight,
+      };
+    default:
+      if (paddingNumber) {
+        return {
+          padding: `${BASE_SPACING + Number(paddingNumber)}px`,
+          iconSpacing: `${paddingNumber}px`,
+        };
+      }
+      return { padding: "var(--spacing400)", iconSpacing: "var(--spacing200)" };
+  }
+};
+
 const oldFocusStyling = `
   box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500);
 `;
@@ -57,15 +99,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
     asDiv,
     hasInput,
   }) => css`
-    ${!inFullscreenView &&
-    css`
-      ${padding}
-    `}
-
-    display: inline-block;
+    display: flex;
+    align-items: center;
     font-size: 14px;
     font-weight: 700;
-    height: 40px;
+    min-height: 40px;
     position: relative;
     box-shadow: none;
 
@@ -85,9 +123,16 @@ const StyledMenuItemWrapper = styled.a.attrs({
       `}
     }
 
-    a button:not(.search-button) {
-      position: relative;
-      top: -1px;
+    ${!maxWidth &&
+    css`
+      :has([data-component="icon"]):not(:has(button)) ${StyledContent} {
+        position: relative;
+        top: -2px;
+      }
+    `}
+
+    :has([data-element="input"]) ${StyledContent} {
+      width: 100%;
     }
 
     ${!overrideColor &&
@@ -108,6 +153,12 @@ const StyledMenuItemWrapper = styled.a.attrs({
     css`
       max-width: inherit;
 
+      > a,
+      > button {
+        display: flex;
+        align-items: center;
+      }
+
       && {
         a:focus,
         button:focus {
@@ -129,8 +180,8 @@ const StyledMenuItemWrapper = styled.a.attrs({
             overflow: hidden;
             white-space: nowrap;
             vertical-align: bottom;
+            display: block;
           `}
-          height: 40px;
         }
 
         a:hover,
@@ -154,6 +205,20 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
     ${asPassiveItem
       ? `
+        ${
+          !inFullscreenView &&
+          `
+          > a:not(:has(button)) {
+            padding: 11px 16px 12px;
+          }
+
+          > a ${StyledButton}:not(.search-button) {
+            min-height: 17px;
+            padding: 9px 0px 11px; 
+          }
+        `
+        }
+
         ${StyledIconButton} {
           > span {
             display: inline-flex;
@@ -173,13 +238,17 @@ const StyledMenuItemWrapper = styled.a.attrs({
         ${StyledLink} a,
         button,
         ${StyledLink} button {
-          padding: 0 16px;
+       
+          padding: ${inFullscreenView ? "0px 16px" : "11px 16px 12px"};
+
+          :has([data-component="icon"]) {
+            padding: 9px 16px 7px;
+          }
         }
       `}
 
     button,
     ${StyledLink} button {
-      line-height: 40px;
       height: 40px;
       margin: 0px;
       text-align: left;
@@ -314,9 +383,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
       ${showDropdownArrow &&
       css`
-        > a,
-        > button:not(${StyledIconButton}) {
-          padding-right: 32px;
+        &&& {
+          > a,
+          > button:not(${StyledIconButton}) {
+            padding-right: ${(props) => parsePadding(padding(props)).padding};
+          }
         }
 
         a::before,
@@ -325,7 +396,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
           margin-top: -2px;
           pointer-events: none;
           position: absolute;
-          right: 16px;
+          right: ${(props) => parsePadding(padding(props)).iconSpacing};
           top: 50%;
           z-index: 2;
           content: "";
@@ -376,6 +447,12 @@ const StyledMenuItemWrapper = styled.a.attrs({
         `
       }
 
+      
+      > a, > button {
+       min-height: 40px;
+       line-height: 40px;
+      }
+
       a,
       ${StyledLink} a,
       button,
@@ -411,6 +488,13 @@ const StyledMenuItemWrapper = styled.a.attrs({
       }
     `}
   `}
+
+  &&& {
+    > a,
+    > button {
+      ${padding}
+    }
+  }
 `;
 
 StyledMenuItemWrapper.defaultProps = { theme: baseTheme };
diff --git a/src/components/menu/menu-segment-title/menu-segment-title.component.tsx b/src/components/menu/menu-segment-title/menu-segment-title.component.tsx
index ec97b1e65..09e170d28 100644
--- a/src/components/menu/menu-segment-title/menu-segment-title.component.tsx
+++ b/src/components/menu/menu-segment-title/menu-segment-title.component.tsx
@@ -6,6 +6,7 @@ import { VariantType } from "../menu-item";
 import tagComponent, {
   TagProps,
 } from "../../../__internal__/utils/helpers/tags";
+import SubmenuContext from "../__internal__/submenu/submenu.context";
 
 const AS_VALUES = ["h2", "h3", "h4", "h5", "h6"] as const;
 
@@ -25,6 +26,7 @@ const MenuSegmentTitle = React.forwardRef<HTMLDivElement, MenuTitleProps>(
     ref
   ) => {
     const menuContext = useContext(MenuContext);
+    const { submenuHasMaxWidth } = useContext(SubmenuContext);
 
     return (
       <StyledMenuItem inSubmenu>
@@ -34,6 +36,7 @@ const MenuSegmentTitle = React.forwardRef<HTMLDivElement, MenuTitleProps>(
           menuType={menuContext.menuType}
           ref={ref}
           variant={variant}
+          shouldWrap={submenuHasMaxWidth}
         >
           {text}
         </StyledTitle>
diff --git a/src/components/menu/menu-segment-title/menu-segment-title.style.ts b/src/components/menu/menu-segment-title/menu-segment-title.style.ts
index 9b19cd345..aa8cee5f7 100644
--- a/src/components/menu/menu-segment-title/menu-segment-title.style.ts
+++ b/src/components/menu/menu-segment-title/menu-segment-title.style.ts
@@ -6,20 +6,22 @@ import { MenuType } from "../__internal__/menu.context";
 interface StyledTitleProps {
   variant?: VariantType;
   menuType: MenuType;
+  shouldWrap?: boolean;
 }
 
 const StyledTitle = styled.h2<StyledTitleProps>`
-  ${({ menuType, variant }) => css`
+  ${({ menuType, variant, shouldWrap }) => css`
     margin: 0px;
     padding: 16px 16px 8px;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
-    line-height: 12px;
+    line-height: 14px;
     cursor: default;
     color: ${menuConfigVariants[menuType].title};
     ${variant === "alternate" &&
     `background-color: ${menuConfigVariants[menuType].alternate};`}
+    white-space: ${shouldWrap ? "normal" : "nowrap"};
   `}
 `;
 
diff --git a/src/components/menu/menu.mdx b/src/components/menu/menu.mdx
index 5c53cdcf5..e7f8fee9f 100644
--- a/src/components/menu/menu.mdx
+++ b/src/components/menu/menu.mdx
@@ -131,6 +131,13 @@ A title attribute is added to the item when using this prop, containing the full
 
 <Canvas of={MenuStories.TruncatedTitlesStory} />
 
+### Submenu maxWidth
+
+By default the submenu will have the same width as the widest `MenuItem`. This behaviour can be overridden 
+by setting the `submenuMaxWidth` prop on the submenu's parent `MenuItem` component.
+
+<Canvas of={MenuStories.TruncationAndSubmenuWidth} />
+
 ### Responsive composition
 
 This story is best viewed in the `canvas` view and by adjusting the size of the window to see the various Menu compositions
@@ -186,4 +193,4 @@ to the [i18nProvider](../?path=/docs/documentation-i18n--docs).
       returnType: "string",
     },
   ]}
-/>
\ No newline at end of file
+/>
diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
index f9cc733eb..79d627c99 100644
--- a/src/components/menu/menu.pw.tsx
+++ b/src/components/menu/menu.pw.tsx
@@ -68,6 +68,7 @@ import {
   MenuSegmentTitleComponentWithAdditionalMenuItem,
   MenuComponentFullScreenWithLongSubmenuText,
   MenuItemWithPopoverContainerChild,
+  SubmenuMaxWidth,
 } from "./component.test-pw";
 import { NavigationBarWithSubmenuAndChangingHeight } from "../navigation-bar/navigation-bar-test.stories";
 import { HooksConfig } from "../../../playwright";
@@ -399,9 +400,9 @@ test.describe("Prop tests for Menu component", () => {
     page,
   }) => {
     await mount(<MenuComponentSearch />);
-    const bottomLess = 210;
-    const topLess = 174;
-    const leftLess = 124;
+    const bottomLess = 220;
+    const topLess = 184;
+    const leftLess = 108;
     // additionVal is to compensate for the outline.
     const additionVal = 4;
 
@@ -2244,6 +2245,26 @@ test.describe("Accessibility tests for Menu component", () => {
   });
 });
 
+test(`should verify that submenu item text wraps when it would overflow the container and submenuMaxWidth is set`, async ({
+  mount,
+  page,
+}) => {
+  await mount(<SubmenuMaxWidth />);
+
+  const submenuElement = submenu(page).first();
+  await submenuElement.hover();
+  const lastItem = lastSubmenuElement(page, "li");
+  const submenuBlockElement = submenuBlock(page).first();
+
+  const cssItemHeight = await lastItem.evaluate((el) =>
+    window.getComputedStyle(el).getPropertyValue("height")
+  );
+
+  await expect(submenuBlockElement).toHaveCSS("max-width", "300px");
+  await expect(lastItem).toHaveCSS("width", "300px");
+  expect(parseInt(cssItemHeight)).toBeGreaterThan(40);
+});
+
 test.describe("Accessibility tests for Menu Fullscreen component", () => {
   // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
   test.skip(`should pass accessibility tests for Menu Fullscreen`, async ({
@@ -2667,8 +2688,7 @@ test.describe(
       const buttonChild = menuItemAnchor.locator("button");
 
       await expect(menuItemAnchor).toHaveCSS("height", "40px");
-      await expect(buttonChild).toHaveCSS("position", "relative");
-      await expect(buttonChild).toHaveCSS("top", "-1px");
+      await expect(buttonChild).toHaveCSS("height", "40px");
     });
   }
 );
diff --git a/src/components/menu/menu.stories.tsx b/src/components/menu/menu.stories.tsx
index db8bd4677..5d50fa1d1 100644
--- a/src/components/menu/menu.stories.tsx
+++ b/src/components/menu/menu.stories.tsx
@@ -728,3 +728,36 @@ export const FullscreenViewStory: Story = () => {
 };
 FullscreenViewStory.storyName = "Fullscreen View";
 FullscreenViewStory.parameters = { chromatic: { disableSnapshot: true } };
+
+export const TruncationAndSubmenuWidth: Story = () => {
+  return (
+    <Box mb={150}>
+      {menuTypes.map((menuType) => (
+        <Box key={menuType}>
+          <Typography variant="h4" textTransform="capitalize" my={2}>
+            {menuType}
+          </Typography>
+          <Menu menuType={menuType}>
+            <MenuItem
+              maxWidth="240px"
+              submenuMaxWidth="300px"
+              submenu="This is a very long menu item title"
+            >
+              <MenuItem href="#">Item Submenu One</MenuItem>
+              <MenuSegmentTitle text="segment title that should wrap when it will overflow">
+                <MenuItem href="#">Item Two</MenuItem>
+                <MenuItem href="#">
+                  This is a longer text string that will wrap when it will
+                  overflow the width of the submenu container
+                </MenuItem>
+              </MenuSegmentTitle>
+            </MenuItem>
+          </Menu>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+TruncationAndSubmenuWidth.storyName = "Truncation and Submenu Width";
+TruncationAndSubmenuWidth.parameters = { chromatic: { disableSnapshot: true } };
diff --git a/src/components/menu/menu.style.ts b/src/components/menu/menu.style.ts
index 52515aa6a..1443c7f4a 100644
--- a/src/components/menu/menu.style.ts
+++ b/src/components/menu/menu.style.ts
@@ -2,7 +2,6 @@ import styled, { css } from "styled-components";
 import {
   layout,
   flexbox,
-  padding,
   FlexboxProps,
   LayoutProps,
   PaddingProps,
@@ -16,7 +15,6 @@ import {
 import { StyledLink } from "../link/link.style";
 import { MenuProps } from "./menu.component";
 import { baseTheme } from "../../style/themes";
-import StyledMenuItemWrapper from "./menu-item/menu-item.style";
 
 interface StyledMenuProps
   extends Pick<MenuProps, "menuType">,
@@ -26,7 +24,6 @@ interface StyledMenuProps
 }
 
 const StyledMenuWrapper = styled.ul<StyledMenuProps>`
-  line-height: 40px;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -96,10 +93,6 @@ const StyledMenuItem = styled.li<StyledMenuItemProps>`
         white-space: normal;
       }
     `}
-
-  ${StyledMenuItemWrapper} {
-    ${padding}
-  }
 `;
 
 StyledMenuItem.defaultProps = {
diff --git a/src/components/navigation-bar/navigation-bar.style.ts b/src/components/navigation-bar/navigation-bar.style.ts
index fbbb94d6d..021edea0a 100644
--- a/src/components/navigation-bar/navigation-bar.style.ts
+++ b/src/components/navigation-bar/navigation-bar.style.ts
@@ -25,7 +25,6 @@ const StyledNavigationBar = styled.nav<StyledNavigationBarProps>`
   display: flex;
   align-items: center;
   padding: 0 40px;
-  line-height: 40px;
 
   & > * {
     box-sizing: border-box;


Test patch:
diff --git a/src/components/menu/component.test-pw.tsx b/src/components/menu/component.test-pw.tsx
index b63ec9873..201de941f 100644
--- a/src/components/menu/component.test-pw.tsx
+++ b/src/components/menu/component.test-pw.tsx
@@ -805,3 +805,22 @@ export const MenuItemWithPopoverContainerChild = () => {
     </Menu>
   );
 };
+
+export const SubmenuMaxWidth = () => (
+  <Menu>
+    <MenuItem
+      maxWidth="240px"
+      submenuMaxWidth="300px"
+      submenu="This is a very long menu item title "
+    >
+      <MenuItem href="#">Item Submenu One</MenuItem>
+      <MenuSegmentTitle text="segment title that should wrap when it will overflow">
+        <MenuItem href="#">Item Two</MenuItem>
+        <MenuItem href="#">
+          This is a longer text string that will wrap when it will overflow the
+          width of the submenu container
+        </MenuItem>
+      </MenuSegmentTitle>
+    </MenuItem>
+  </Menu>
+);
diff --git a/src/components/menu/menu-item/menu-item.test.tsx b/src/components/menu/menu-item/menu-item.test.tsx
index e0d6124ed..4785ecfce 100644
--- a/src/components/menu/menu-item/menu-item.test.tsx
+++ b/src/components/menu/menu-item/menu-item.test.tsx
@@ -28,25 +28,26 @@ const menuContextValues: MenuContextProps = {
 describe("When MenuItem has no submenu", () => {
   testStyledSystemPadding(
     (props) => <MenuItem {...props}>Foo</MenuItem>,
-    {},
-    (component) => component.find(StyledMenuItemWrapper)
+    undefined,
+    (component) => component.find(StyledMenuItemWrapper),
+    { modifier: "&&& > a" }
   );
   testStyledSystemLayout((props) => <MenuItem {...props}>Item One</MenuItem>);
   testStyledSystemFlexBox((props) => <MenuItem {...props}>Item One</MenuItem>);
 
-  test("should render children correctly", () => {
+  it("should render children correctly", () => {
     render(<MenuItem>Item One</MenuItem>);
 
     expect(screen.getByRole("listitem")).toHaveTextContent("Item One");
   });
 
-  test("should render an anchor element if `href` prop is set", () => {
+  it("should render an anchor element if `href` prop is set", () => {
     render(<MenuItem href="#">Item One</MenuItem>);
 
     expect(screen.getByRole("link", { name: "Item One" })).toBeVisible();
   });
 
-  test("should render a button element if `onClick` prop is set", () => {
+  it("should render a button element if `onClick` prop is set", () => {
     render(<MenuItem onClick={() => {}}>Item One</MenuItem>);
 
     expect(
@@ -54,7 +55,7 @@ describe("When MenuItem has no submenu", () => {
     ).toBeInTheDocument();
   });
 
-  test("should render an anchor element if both `href` and `onClick` props are set", () => {
+  it("should render an anchor element if both `href` and `onClick` props are set", () => {
     render(
       <MenuItem onClick={() => {}} href="#">
         Item One
@@ -64,7 +65,7 @@ describe("When MenuItem has no submenu", () => {
     expect(screen.getByRole("link", { name: "Item One" })).toBeInTheDocument();
   });
 
-  test("should render additional `carbon-menu-item--has-link` class if specified `href` prop is set", () => {
+  it("should render additional `carbon-menu-item--has-link` class if specified `href` prop is set", () => {
     render(<MenuItem href="#">Item One</MenuItem>);
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveClass(
@@ -72,7 +73,7 @@ describe("When MenuItem has no submenu", () => {
     );
   });
 
-  test("should render additional `carbon-menu-item--has-link` class if specified `onClick` prop is set", () => {
+  it("should render additional `carbon-menu-item--has-link` class if specified `onClick` prop is set", () => {
     render(<MenuItem onClick={() => {}}>Item One</MenuItem>);
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveClass(
@@ -80,7 +81,7 @@ describe("When MenuItem has no submenu", () => {
     );
   });
 
-  test("should add a `title` attribute with the full text when `maxWidth` prop is set", () => {
+  it("should add a `title` attribute with the full text when `maxWidth` prop is set", () => {
     render(<MenuItem maxWidth="100px">Item One</MenuItem>);
 
     expect(screen.getByRole("listitem", { name: "Item One" })).toHaveAttribute(
@@ -89,7 +90,7 @@ describe("When MenuItem has no submenu", () => {
     );
   });
 
-  test("should add the correct styles when `maxWidth` prop is set", () => {
+  it("should add the correct styles when `maxWidth` prop is set", () => {
     render(
       <MenuItem href="#" maxWidth="100px">
         Item One
@@ -105,7 +106,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should apply the expected styles when `menuType` is set to 'light'", () => {
+  it("should apply the expected styles when `menuType` is set to 'light'", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "light" }}>
         <MenuItem>Item One</MenuItem>
@@ -117,7 +118,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should apply the expected styles when `menuType` is set to 'white'", () => {
+  it("should apply the expected styles when `menuType` is set to 'white'", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "white" }}>
         <MenuItem>Item One</MenuItem>
@@ -129,7 +130,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should apply the expected styles when `menuType` is set to 'dark'", () => {
+  it("should apply the expected styles when `menuType` is set to 'dark'", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "dark" }}>
         <MenuItem>Item One</MenuItem>
@@ -141,7 +142,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should apply the expected styles when `menuType` is set to 'black'", () => {
+  it("should apply the expected styles when `menuType` is set to 'black'", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "black" }}>
         <MenuItem>Item One</MenuItem>
@@ -153,7 +154,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should set the expected style overrides when an IconButton is rendered as a child", () => {
+  it("should set the expected style overrides when an IconButton is rendered as a child", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
         <MenuItem>
@@ -170,7 +171,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should render the expected styles when a menu item is `selected` and `menuType` is 'light'", () => {
+  it("should render the expected styles when a menu item is `selected` and `menuType` is 'light'", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
         <MenuItem selected>Item One</MenuItem>
@@ -182,7 +183,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should render the expected styles when a menu item is `selected` and `menuType` is 'white'", () => {
+  it("should render the expected styles when a menu item is `selected` and `menuType` is 'white'", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "white" }}>
         <MenuItem selected>Item One</MenuItem>
@@ -194,7 +195,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should render the expected styles when a menu item is `selected` and `menuType` is 'dark'", () => {
+  it("should render the expected styles when a menu item is `selected` and `menuType` is 'dark'", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "dark" }}>
         <MenuItem selected>Item One</MenuItem>
@@ -206,7 +207,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should render the expected styles when a menu item is `selected` and `menuType` is 'black'", () => {
+  it("should render the expected styles when a menu item is `selected` and `menuType` is 'black'", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "black" }}>
         <MenuItem selected>Item One</MenuItem>
@@ -218,7 +219,7 @@ describe("When MenuItem has no submenu", () => {
     });
   });
 
-  test("should call `onKeyDown` when the user presses a key and prop is set", () => {
+  it("should call `onKeyDown` when the user presses a key and prop is set", () => {
     const onKeyDown = jest.fn();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -236,7 +237,7 @@ describe("When MenuItem has no submenu", () => {
     expect(onKeyDown).toHaveBeenCalled();
   });
 
-  test("should add any passed `aria-label` to the underlying link element and remove one from any passed `icon`", () => {
+  it("should add any passed `aria-label` to the underlying link element and remove one from any passed `icon`", () => {
     render(
       <MenuItem icon="settings" href="#" ariaLabel="Item One">
         Item One
@@ -250,7 +251,7 @@ describe("When MenuItem has no submenu", () => {
     expect(screen.getByTestId("icon")).not.toHaveAttribute("aria-label");
   });
 
-  test("should add any passed `aria-label` to the underlying button element and remove one from any passed `icon`", () => {
+  it("should add any passed `aria-label` to the underlying button element and remove one from any passed `icon`", () => {
     render(
       <MenuItem icon="settings" onClick={() => {}} ariaLabel="Item One">
         Item One
@@ -264,7 +265,7 @@ describe("When MenuItem has no submenu", () => {
     expect(screen.getByTestId("icon")).not.toHaveAttribute("aria-label");
   });
 
-  test("should throw an error when `aria-label` is not set and menu item has no child text", () => {
+  it("should throw an error when `aria-label` is not set and menu item has no child text", () => {
     const consoleSpy = jest
       .spyOn(global.console, "error")
       .mockImplementation(() => {});
@@ -278,7 +279,7 @@ describe("When MenuItem has no submenu", () => {
     consoleSpy.mockRestore();
   });
 
-  test("should throw an error when when no `children` or `icon` are passed", () => {
+  it("should throw an error when when no `children` or `icon` are passed", () => {
     const consoleSpy = jest
       .spyOn(global.console, "error")
       .mockImplementation(() => {});
@@ -292,7 +293,7 @@ describe("When MenuItem has no submenu", () => {
     consoleSpy.mockRestore();
   });
 
-  test("should pass the `href`, `target` and `rel` props as attributes to the underlying HTML anchor element", () => {
+  it("should pass the `href`, `target` and `rel` props as attributes to the underlying HTML anchor element", () => {
     const href = "https://carbon.sage.com";
     const target = "_blank";
     const rel = "noopener";
@@ -308,7 +309,7 @@ describe("When MenuItem has no submenu", () => {
     expect(anchor).toHaveAttribute("rel", rel);
   });
 
-  test("should set the correct `data-` tags as attributes on the menu item", () => {
+  it("should set the correct `data-` tags as attributes on the menu item", () => {
     render(
       <MenuItem data-element="bar" data-role="baz">
         Item One
@@ -321,7 +322,7 @@ describe("When MenuItem has no submenu", () => {
     expect(item).toHaveAttribute("data-role", "baz");
   });
 
-  test("should set the set the expected override color when `overrideColor` is passed and `variant` is 'alternate'", async () => {
+  it("should set the set the expected override color when `overrideColor` is passed and `variant` is 'alternate'", async () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
         <MenuItem overrideColor variant="alternate">
@@ -337,7 +338,82 @@ describe("When MenuItem has no submenu", () => {
 });
 
 describe("when MenuItem has a submenu", () => {
-  test("should render with it closed when the prop is set", () => {
+  /** START OF TESTS ADDED FOR CODE COVERAGE */
+  it("should apply the expected spacing on the pseudo element when custom padding is passed value of '5px'", () => {
+    render(
+      <MenuItem href="#" submenu="submenu" px="5px">
+        <MenuItem>foo</MenuItem>
+      </MenuItem>
+    );
+
+    expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
+      "right",
+      "5px",
+      { modifier: "a::before" }
+    );
+  });
+
+  it("should apply the expected spacing on the pseudo element when no custom padding is passed'", () => {
+    render(
+      <MenuItem href="#" submenu="submenu">
+        <MenuItem>foo</MenuItem>
+      </MenuItem>
+    );
+
+    expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
+      "right",
+      "var(--spacing200)",
+      { modifier: "a::before" }
+    );
+  });
+
+  it("should apply the expected spacing on the pseudo element when custom padding is passed value of '0'", () => {
+    render(
+      <MenuItem href="#" submenu="submenu" px={0}>
+        <MenuItem>foo</MenuItem>
+      </MenuItem>
+    );
+
+    expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
+      "right",
+      "2px",
+      { modifier: "a::before" }
+    );
+  });
+
+  it("should apply the expected spacing on the pseudo element when custom padding is passed value of '1'", () => {
+    render(
+      <MenuItem href="#" submenu="submenu" px={1}>
+        <MenuItem>foo</MenuItem>
+      </MenuItem>
+    );
+
+    expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
+      "right",
+      "var(--spacing100)",
+      { modifier: "a::before" }
+    );
+  });
+
+  it.each([2, 3, 4, 5, 6, 7, 8])(
+    "should apply the expected spacing on the pseudo element when custom padding is passed value of '%s'",
+    (padding) => {
+      render(
+        <MenuItem href="#" submenu="submenu" px={padding}>
+          <MenuItem>foo</MenuItem>
+        </MenuItem>
+      );
+
+      expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
+        "right",
+        `var(--spacing${padding}00)`,
+        { modifier: "a::before" }
+      );
+    }
+  );
+  /** END OF TESTS ADDED FOR CODE COVERAGE */
+
+  it("should render with it closed when the prop is set", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
         <MenuItem submenu="Item One">
@@ -356,7 +432,7 @@ describe("when MenuItem has a submenu", () => {
     ).not.toBeInTheDocument();
   });
 
-  test("should focus the last item when the user presses the 'End' key and first when they press the 'Home' key", async () => {
+  it("should focus the last item when the user presses the 'End' key and first when they press the 'Home' key", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -383,7 +459,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[0]).toHaveFocus();
   });
 
-  test("should focus the expected item when the user presses 'arrowdown' key", async () => {
+  it("should focus the expected item when the user presses 'arrowdown' key", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -408,7 +484,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[2]).toHaveFocus();
   });
 
-  test("should focus the expected item when the user presses 'arrowup' key", async () => {
+  it("should focus the expected item when the user presses 'arrowup' key", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -435,7 +511,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[0]).toHaveFocus();
   });
 
-  test("should focus the expected item when the user presses 'home' and 'end' keys", async () => {
+  it("should focus the expected item when the user presses 'home' and 'end' keys", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -458,7 +534,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[0]).toHaveFocus();
   });
 
-  test("should focus the expected item when the user presses 'tab' key and moves focus out of submenu when pressed on last submenu item", async () => {
+  it("should focus the expected item when the user presses 'tab' key and moves focus out of submenu when pressed on last submenu item", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -483,7 +559,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[2]).not.toHaveFocus();
   });
 
-  test("should focus the expected item when the user presses 'shift+tab' keys and moves focus to parent item when pressed on first submenu item", async () => {
+  it("should focus the expected item when the user presses 'shift+tab' keys and moves focus to parent item when pressed on first submenu item", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -515,7 +591,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[0]).not.toHaveFocus();
   });
 
-  test("should focus the expected items when the user presses 'arrowdown' key and one item has an input child", async () => {
+  it("should focus the expected items when the user presses 'arrowdown' key and one item has an input child", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -540,7 +616,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[1]).toHaveFocus();
   });
 
-  test("should focus the expected items when the user presses 'arrowup' key and one item has an input child", async () => {
+  it("should focus the expected items when the user presses 'arrowup' key and one item has an input child", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -566,7 +642,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[0]).toHaveFocus();
   });
 
-  test("should focus the expected items when the user presses 'tab' key and one item has an input child", async () => {
+  it("should focus the expected items when the user presses 'tab' key and one item has an input child", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -593,7 +669,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[1]).toHaveFocus();
   });
 
-  test("should focus the expected item when the parent item is a link and the user opens the submenu and presses 'tab' key", async () => {
+  it("should focus the expected item when the parent item is a link and the user opens the submenu and presses 'tab' key", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -614,7 +690,7 @@ describe("when MenuItem has a submenu", () => {
     ).toHaveFocus();
   });
 
-  test("should focus the expected item when the parent item is a link and the user opens the submenu and presses 'a' character key", async () => {
+  it("should focus the expected item when the parent item is a link and the user opens the submenu and presses 'a' character key", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -633,7 +709,7 @@ describe("when MenuItem has a submenu", () => {
     expect(screen.getByRole("link", { name: "Item One" })).toHaveFocus();
   });
 
-  test("should call the `onClick` callback if one is passed and the user clicks the parent item", async () => {
+  it("should call the `onClick` callback if one is passed and the user clicks the parent item", async () => {
     const user = userEvent.setup();
     const onClick = jest.fn();
     render(
@@ -651,7 +727,7 @@ describe("when MenuItem has a submenu", () => {
     expect(onClick).toHaveBeenCalled();
   });
 
-  test("should focus the first item when parent has `href` user presses 'arrowdown' key twice", async () => {
+  it("should focus the first item when parent has `href` user presses 'arrowdown' key twice", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -672,7 +748,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItem).toHaveFocus();
   });
 
-  test("should focus the first item when parent has `href` user presses 'arrowup' key twice", async () => {
+  it("should focus the first item when parent has `href` user presses 'arrowup' key twice", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -693,7 +769,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItem).toHaveFocus();
   });
 
-  test("should focus the first item when `submenu` is initially opened via click, closed via mouseout and then 'arrowdown' key pressed", async () => {
+  it("should focus the first item when `submenu` is initially opened via click, closed via mouseout and then 'arrowdown' key pressed", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -713,7 +789,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItem).toHaveFocus();
   });
 
-  test("should focus the first item when `submenu` is initially initially opened via click, closed via mouseout and then 'arrowup' key pressed", async () => {
+  it("should focus the first item when `submenu` is initially initially opened via click, closed via mouseout and then 'arrowup' key pressed", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -733,7 +809,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItem).toHaveFocus();
   });
 
-  test("should focus the first item when initially opened via click, closed via mouseout and then 'tab' key pressed", async () => {
+  it("should focus the first item when initially opened via click, closed via mouseout and then 'tab' key pressed", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -753,7 +829,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItem).toHaveFocus();
   });
 
-  test("should not open the `submenu` when initially opened via click, closed via mouseout and then non-related key pressed", async () => {
+  it("should not open the `submenu` when initially opened via click, closed via mouseout and then non-related key pressed", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -775,7 +851,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItem).not.toBeInTheDocument();
   });
 
-  test("should not open if an unrelated key is pressed", async () => {
+  it("should not open if an unrelated key is pressed", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -793,7 +869,7 @@ describe("when MenuItem has a submenu", () => {
     expect(screen.queryByRole("list")).not.toBeInTheDocument();
   });
 
-  test("should close when the user presses 'Escape'", async () => {
+  it("should close when the user presses 'Escape'", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -815,7 +891,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuParentItem).toHaveFocus();
   });
 
-  test("should not close when the user presses 'Enter' and focus is on input", async () => {
+  it("should not close when the user presses 'Enter' and focus is on input", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -837,7 +913,7 @@ describe("when MenuItem has a submenu", () => {
     expect(screen.getByRole("list")).toBeVisible();
   });
 
-  test("should close when the user presses 'Enter' and focus is not on input", async () => {
+  it("should close when the user presses 'Enter' and focus is not on input", async () => {
     jest.useFakeTimers();
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     render(
@@ -860,7 +936,7 @@ describe("when MenuItem has a submenu", () => {
     jest.useRealTimers();
   });
 
-  test("should not throw an error when a passed null `children`", () => {
+  it("should not throw an error when a passed null `children`", () => {
     expect(() => {
       render(
         <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -873,7 +949,7 @@ describe("when MenuItem has a submenu", () => {
     }).not.toThrow();
   });
 
-  test("should update the focused element when a user clicks a child item", async () => {
+  it("should update the focused element when a user clicks a child item", async () => {
     const user = userEvent.setup();
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
@@ -893,7 +969,7 @@ describe("when MenuItem has a submenu", () => {
     expect(submenuItems[2]).toHaveFocus();
   });
 
-  test("should call the `handleKeyDown` function when one is passed via `submenuContext`", () => {
+  it("should call the `handleKeyDown` function when one is passed via `submenuContext`", () => {
     const handleKeyDown = jest.fn();
     render(
       <MenuContext.Provider value={menuContextValues}>
@@ -908,7 +984,7 @@ describe("when MenuItem has a submenu", () => {
     expect(handleKeyDown).toHaveBeenCalled();
   });
 
-  test("should have the expected styling when a child item is `selected`", () => {
+  it("should have the expected styling when a child item is `selected`", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
         <MenuItem selected submenu="Item One">
diff --git a/src/components/menu/menu-segment-title/menu-segment-title.test.tsx b/src/components/menu/menu-segment-title/menu-segment-title.test.tsx
index 654a9c50e..909a32e18 100644
--- a/src/components/menu/menu-segment-title/menu-segment-title.test.tsx
+++ b/src/components/menu/menu-segment-title/menu-segment-title.test.tsx
@@ -345,3 +345,43 @@ test("should apply expected `data-` attributes", () => {
   expect(screen.getByText("foo")).toHaveAttribute("data-element", "bar");
   expect(screen.getByText("foo")).toHaveAttribute("data-role", "baz");
 });
+
+test("should not wrap when the submenu parent has no max-width set", async () => {
+  const user = userEvent.setup();
+  render(
+    <MenuContext.Provider value={menuContextValues("light")}>
+      <ul>
+        <MenuItem submenu="Item One">
+          <MenuSegmentTitle text="Title">
+            <li>bar</li>
+          </MenuSegmentTitle>
+        </MenuItem>
+      </ul>
+    </MenuContext.Provider>
+  );
+  await user.click(screen.getByText("Item One"));
+
+  expect(
+    await screen.findByRole("heading", { level: 2, name: "Title" })
+  ).toHaveStyle("white-space: nowrap");
+});
+
+test("should wrap when the submenu parent has a max-width set", async () => {
+  const user = userEvent.setup();
+  render(
+    <MenuContext.Provider value={menuContextValues("light")}>
+      <ul>
+        <MenuItem submenuMaxWidth="200px" submenu="Item One">
+          <MenuSegmentTitle text="Title">
+            <li>bar</li>
+          </MenuSegmentTitle>
+        </MenuItem>
+      </ul>
+    </MenuContext.Provider>
+  );
+  await user.click(screen.getByText("Item One"));
+
+  expect(
+    await screen.findByRole("heading", { level: 2, name: "Title" })
+  ).toHaveStyle("white-space: normal");
+});
diff --git a/src/components/menu/menu-test.stories.tsx b/src/components/menu/menu-test.stories.tsx
index e31591a81..f1e43dc3b 100644
--- a/src/components/menu/menu-test.stories.tsx
+++ b/src/components/menu/menu-test.stories.tsx
@@ -34,6 +34,7 @@ const meta: Meta<typeof Menu> = {
     "MenuFullScreenWithLargeMenuItems",
     "MenuComponentFullScreenWithLongSubmenuText",
     "AsLinkWithAlternateVariant",
+    "MenuWithSubmenuCustomPadding",
   ],
   parameters: {
     info: { disable: true },
@@ -184,7 +185,7 @@ export const AsLinkWithAlternateVariant = () => {
           renderOpenComponent={() => (
             <Box data-role="gblnav-notificationui-bell">
               <Button aria-label="Notifications">
-                <Box px={2}>
+                <Box alignItems="center" display="flex" px={2}>
                   <Icon type="alert" />
                   notifications
                 </Box>
@@ -437,3 +438,22 @@ export const MenuWithTwoSegments = () => {
     </Box>
   );
 };
+
+export const MenuWithSubmenuCustomPadding = () => (
+  <>
+    {[0, "5px", 1, 2, "17px", 3, 4, 5, 6, 7, 8].map((padding) => (
+      <Menu>
+        <MenuItem px={padding} href="#">
+          Item One
+        </MenuItem>
+        <MenuItem px={padding} submenu="Item Two">
+          <MenuItem href="#">Item Submenu One</MenuItem>
+          <MenuItem href="#">Item Submenu Two</MenuItem>
+          <MenuItem href="#">Item Submenu Three</MenuItem>
+        </MenuItem>
+      </Menu>
+    ))}
+  </>
+);
+
+MenuWithSubmenuCustomPadding.storyName = "Menu with submenu custom padding";