Repository: Sage/carbon (ts)

Issue:
MenuItem - top/bottom padding added when contains node children
### Description

Within `MenuFullscreen` additional top/bottom padding is being added to menu items that contain icons.

![Screenshot 2024-09-05 at 10 48 22](https://github.com/user-attachments/assets/1fdd4123-6186-41c0-b248-17868723de24)

Issue also present when `Pill` passed to item with `href` prop

![image](https://github.com/user-attachments/assets/3e8ee1c2-bab8-4cd1-b5d2-0405c7fbcece)



### Reproduction

[MenuFullScreen](https://stackblitz.com/edit/parsium-carbon-starter-wfan4f?file=src%2FApp.tsx)
[MenuItem with Pill and href](https://stackblitz.com/edit/parsium-carbon-starter-7r6zcn?file=src%2FApp.tsx)

### Steps to reproduce

Open fullscreen menu, inspect the menu items.

### JIRA ticket numbers (Sage only)

SBS-108049

### Suggested solution

_No response_

### Carbon version

v142.9.0

### 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.
Menu component has varying height with wrapping content
### Description

When a Menu has wrapping / different sized menu items on a smaller viewport the menu bar itself ends up with different heights. This can be seen on the default storyboard when the screen is made smaller

### Reproduction

https://carbon.sage.com/?path=/docs/menu--docs#default

### Steps to reproduce

Can be viewed in default Storyboard on a smaller viewport
https://carbon.sage.com/?path=/docs/menu--docs#default

### JIRA ticket numbers (Sage only)

SBS-110640

### Suggested solution

_No response_

### Carbon version

142.0.0

### 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.
MenuItem children and submenu props when empty string results in unexpected behaviour 
### Description

In the event that either menu item children or submenu props are undefined or empty strings, menu item breaks. 

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-7bebns?file=src%2FApp.tsx

### Steps to reproduce

The provided stackblitz demonstrates both issues. Setting `submenu` as an empty string results in the menu rendering in a bad state. A menu item with no children results in a crash when hovering over the navbar.

### JIRA ticket numbers (Sage only)

SBS-111182

### Suggested solution

_No response_

### Carbon version

142.13.5

### Design tokens version

_No response_

### Relevant browsers

Chrome, Microsoft Edge

### Relevant OSs

MacOS, Windows

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
Menu fixes
fix #6934, fix #7000, fix #7010

### 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.
-->
Ensures that `MenuItem`s flex so that they all have the same height if any wrap their content to new
lines at smaller screen resolutions. Ensures no additional padding is set on `MenuItem` children of
`MenuFullscreen`.

![image](https://github.com/user-attachments/assets/983170e3-eb83-4c3f-9e84-f8e9cb468de9)


BREAKING CHANGE: `Menu` no longer supports `height`, `minHeight`, `maxHeight`, `size`,
`overflowY` and `display` props. `MenuItem` no longer supports `height`, `minHeight`,
`maxHeight`, `size`, `verticalAlign`, `overflow`, `overflowY`, `overflowX` and
`display` props.

Adds invariant to ensure that the component does not render when `children` are passed but `submenu`
is an empty string

### 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.
-->
MenuItems do not wrap/flex uniformly
When `submenu` is an empty string the `children` are still rendered but within the parent `MenuItem`

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [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-test--when-menu-items-wrap` story added for testing when items wrap
* Worth doing brush test of all other stories to ensure no regressions
* To test issue 7001 add the following code into any menu test story and confirm the invariant has fired:

```
<Menu menuType="black">
      <MenuItem href="#">Menu Item One</MenuItem>
      <MenuItem onClick={() => {}} submenu="">
        <MenuItem
          href="#"
          onClick={() => {
            alert("clicked");
          }}
          variant="alternate"
        >
          Link
        </MenuItem>
        <MenuItem href="#">Submenu Item Two</MenuItem>
      </MenuItem>
    </Menu>
```

Patch:
diff --git a/.storybook/utils/styled-system-props.ts b/.storybook/utils/styled-system-props.ts
index e50f5a646..490892217 100644
--- a/.storybook/utils/styled-system-props.ts
+++ b/.storybook/utils/styled-system-props.ts
@@ -992,9 +992,15 @@ const generateStyledSystemPositionProps = (defaults: StyledSystemDefaults) => {
   ];
 };
 
+const filterProps = (
+  props: Record<string, unknown>[],
+  excludes: string[] = []
+) => props.filter((prop) => !excludes.includes(Object.keys(prop)[0]));
+
 const generateStyledSystemProps = (
   props: StyledSystemProps,
-  defaults?: StyledSystemDefaults
+  defaults?: StyledSystemDefaults,
+  excludes?: string[]
 ): ArgTypes<StyledSystemProps> => {
   const {
     spacing,
@@ -1011,37 +1017,70 @@ const generateStyledSystemProps = (
   const result: Props = {};
 
   if (spacing) {
-    Object.assign(result, ...generateStyledSystemSpacingProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemSpacingProps(defaults || {}), excludes)
+    );
   }
   if (margin) {
-    Object.assign(result, ...generateStyledSystemMarginProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemMarginProps(defaults || {}), excludes)
+    );
   }
   if (padding) {
-    Object.assign(result, ...generateStyledSystemPaddingProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemPaddingProps(defaults || {}), excludes)
+    );
   }
   if (color) {
-    Object.assign(result, ...generateStyledSystemColorProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemColorProps(defaults || {}), excludes)
+    );
   }
   if (layout) {
-    Object.assign(result, ...generateStyledSystemLayoutProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemLayoutProps(defaults || {}), excludes)
+    );
   }
   if (width) {
-    Object.assign(result, ...generateStyledSystemWidthProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemWidthProps(defaults || {}), excludes)
+    );
   }
   if (flexBox) {
-    Object.assign(result, ...generateStyledSystemFlexBoxProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemFlexBoxProps(defaults || {}), excludes)
+    );
   }
   if (grid) {
-    Object.assign(result, ...generateStyledSystemGridProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemGridProps(defaults || {}), excludes)
+    );
   }
   if (background) {
     Object.assign(
       result,
-      ...generateStyledSystemBackgroundProps(defaults || {})
+      ...filterProps(
+        generateStyledSystemBackgroundProps(defaults || {}),
+        excludes
+      )
     );
   }
   if (position) {
-    Object.assign(result, ...generateStyledSystemPositionProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(
+        generateStyledSystemPositionProps(defaults || {}),
+        excludes
+      )
+    );
   }
 
   return result;
diff --git a/src/components/global-header/global-header.stories.tsx b/src/components/global-header/global-header.stories.tsx
index d8d04695a..3ba86d8a7 100644
--- a/src/components/global-header/global-header.stories.tsx
+++ b/src/components/global-header/global-header.stories.tsx
@@ -55,7 +55,7 @@ export const BasicMenu: Story = () => {
 
   return (
     <GlobalHeader logo={<Logo />}>
-      <Menu menuType="black" display="flex" flex="1">
+      <Menu menuType="black" flex="1">
         <MenuItem flex="1" submenu="Product Switcher">
           <MenuItem>Product A</MenuItem>
         </MenuItem>
@@ -112,7 +112,7 @@ export const ResponsiveMenu: Story = () => {
 
   return (
     <GlobalHeader logo={<Logo />}>
-      <Menu menuType="black" display="flex" flex="1">
+      <Menu menuType="black" flex="1">
         {fullscreenViewBreakPoint ? (
           <>
             <MenuItem
@@ -145,7 +145,7 @@ export const GlobalLocalNavBarLayout: Story = () => {
   return (
     <>
       <GlobalHeader logo={<Logo />}>
-        <Menu menuType="black" display="flex" flex="1">
+        <Menu menuType="black" flex="1">
           <MenuItem flex="1" submenu="Product Switcher">
             <MenuItem href="#">Product A</MenuItem>
           </MenuItem>
@@ -160,7 +160,7 @@ export const GlobalLocalNavBarLayout: Story = () => {
         </Menu>
       </GlobalHeader>
       <NavigationBar position="fixed" orientation="top" offset="40px">
-        <Menu display="flex" flex="1">
+        <Menu flex="1">
           <MenuItem href="#" flex="1">
             Menu Item One
           </MenuItem>
diff --git a/src/components/menu/__internal__/submenu/submenu.style.ts b/src/components/menu/__internal__/submenu/submenu.style.ts
index c4a3da0b4..ad31867c6 100644
--- a/src/components/menu/__internal__/submenu/submenu.style.ts
+++ b/src/components/menu/__internal__/submenu/submenu.style.ts
@@ -34,6 +34,7 @@ const StyledSubmenuWrapper = styled.div<StyledSubmenuWrapperProps>`
   position: relative;
   width: fit-content;
   max-width: inherit;
+  height: inherit;
 
   ${({ isSubmenuOpen, theme }) =>
     isSubmenuOpen &&
@@ -41,8 +42,8 @@ const StyledSubmenuWrapper = styled.div<StyledSubmenuWrapperProps>`
       z-index: ${theme.zIndex.popover};
     `}
 
-  ${({ inFullscreenView, menuType, asPassiveItem }) =>
-    inFullscreenView &&
+  ${({ inFullscreenView, menuType, asPassiveItem }) => css`
+    ${inFullscreenView &&
     css`
       width: 100%;
 
@@ -55,6 +56,11 @@ const StyledSubmenuWrapper = styled.div<StyledSubmenuWrapperProps>`
         }
       `}
     `}
+    ${!inFullscreenView &&
+    css`
+      display: flex;
+    `}
+  `}
 `;
 
 const StyledSubmenu = styled.ul<StyledSubmenuProps>`
@@ -73,6 +79,7 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
     css`
       box-shadow: var(--boxShadow100);
       position: absolute;
+      top: 100%;
       background-color: ${variant === "default"
         ? menuConfigVariants[menuType].submenuItemBackground
         : menuConfigVariants[menuType].background};
@@ -212,10 +219,6 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
         > a,
         > button {
           padding: 11px 16px 12px;
-
-          :has([data-component="icon"]) {
-            padding: 9px 16px 7px;
-          }
         }
       `}
 
diff --git a/src/components/menu/menu-item/menu-item.component.tsx b/src/components/menu/menu-item/menu-item.component.tsx
index cdb717d87..82e0f5473 100644
--- a/src/components/menu/menu-item/menu-item.component.tsx
+++ b/src/components/menu/menu-item/menu-item.component.tsx
@@ -23,7 +23,7 @@ export type VariantType = "default" | "alternate";
 
 interface MenuItemBaseProps
   extends Omit<TagProps, "data-component">,
-    LayoutProps,
+    Pick<LayoutProps, "width" | "maxWidth" | "minWidth">,
     FlexboxProps,
     PaddingProps {
   /** Custom className */
@@ -131,6 +131,13 @@ export const MenuItem = ({
     "If no text is provided an `ariaLabel` should be given to facilitate accessibility."
   );
 
+  invariant(
+    typeof submenu === "boolean" ||
+      submenu === undefined ||
+      (children && typeof submenu === "string" && submenu.length),
+    "You should not pass `children` when `submenu` is an empty string"
+  );
+
   const {
     inFullscreenView,
     registerItem,
@@ -330,6 +337,7 @@ export const MenuItem = ({
         {...paddingProps}
         asDiv={hasInput || as === "div"}
         hasInput={hasInput}
+        inSubmenu={!!handleSubmenuKeyDown}
       >
         {children}
       </StyledMenuItemWrapper>
diff --git a/src/components/menu/menu-item/menu-item.stories.tsx b/src/components/menu/menu-item/menu-item.stories.tsx
index b745bebbe..1b3f1e052 100644
--- a/src/components/menu/menu-item/menu-item.stories.tsx
+++ b/src/components/menu/menu-item/menu-item.stories.tsx
@@ -7,11 +7,25 @@ import MenuItem from "./menu-item.component";
  * It contains the tag: ["hideInSidebar"] so that it is not included in the sidebar.
  */
 
-const styledSystemProps = generateStyledSystemProps({
-  flexBox: true,
-  layout: true,
-  padding: true,
-});
+const styledSystemProps = generateStyledSystemProps(
+  {
+    flexBox: true,
+    layout: true,
+    padding: true,
+  },
+  undefined,
+  [
+    "height",
+    "minHeight",
+    "maxHeight",
+    "size",
+    "display",
+    "overflowY",
+    "overflowX",
+    "overflow",
+    "verticalAlign",
+  ]
+);
 
 const meta: Meta<typeof MenuItem> = {
   title: "Menu Item",
diff --git a/src/components/menu/menu-item/menu-item.style.ts b/src/components/menu/menu-item/menu-item.style.ts
index a74ca6bce..aecda1d56 100644
--- a/src/components/menu/menu-item/menu-item.style.ts
+++ b/src/components/menu/menu-item/menu-item.style.ts
@@ -33,6 +33,7 @@ interface StyledMenuItemWrapperProps
   asDiv?: boolean;
   hasInput?: boolean;
   menuItemVariant?: Pick<MenuWithChildren, "variant">["variant"];
+  inSubmenu?: boolean;
 }
 
 const BASE_SPACING = 16;
@@ -98,6 +99,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
     asPassiveItem,
     asDiv,
     hasInput,
+    inSubmenu,
   }) => css`
     display: flex;
     align-items: center;
@@ -110,6 +112,9 @@ const StyledMenuItemWrapper = styled.a.attrs({
     a,
     button {
       cursor: pointer;
+      min-height: 40px;
+      height: 100%;
+      box-sizing: border-box;
     }
 
     a:focus,
@@ -130,7 +135,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
         button:has([data-component="icon"]):not(:has(button))
         ${StyledContent} {
         position: relative;
-        top: -2px;
+        top: -1px;
       }
     `}
 
@@ -155,11 +160,16 @@ const StyledMenuItemWrapper = styled.a.attrs({
     ${!inFullscreenView &&
     css`
       max-width: inherit;
+      width: inherit;
+      height: inherit;
 
       > a,
       > button {
         display: flex;
         align-items: center;
+        ${!inSubmenu ? "justify-content: center;" : ""}
+        width: inherit;
+        max-width: inherit;
       }
 
       && {
@@ -211,15 +221,29 @@ const StyledMenuItemWrapper = styled.a.attrs({
         ${
           !inFullscreenView &&
           `
-          > a:not(:has(button)) {
-            padding: 11px 16px 12px;
-          }
+            > a:not(:has(button)) {
+              padding: 11px 16px;
+            }
 
-          > a ${StyledButton}:not(.search-button) {
-            min-height: 17px;
-            padding: 9px 0px 11px; 
-          }
-        `
+            > a:has(${StyledButton}:not(.search-button)) {
+             height: 100%;
+             
+             ${StyledContent} {
+                height: inherit;
+
+                div {
+                  height: inherit;
+                }
+              }
+
+              ${StyledButton} {
+                min-height: 40px;
+                padding: 10px 0px;
+                box-sizing: border-box;
+                height: 100%;
+              }
+            }
+          `
         }
 
         ${StyledIconButton} {
@@ -237,22 +261,31 @@ const StyledMenuItemWrapper = styled.a.attrs({
         }
       `
       : `
-        a,
-        ${StyledLink} a,
-        button,
-        ${StyledLink} button {
-       
-          padding: ${inFullscreenView ? "0px 16px" : "11px 16px 12px"};
-
-          :has([data-component="icon"]) {
-            padding: 9px 16px 7px;
-          }
+        ${
+          hasSubmenu || maxWidth
+            ? `
+              a,
+              ${StyledLink} a,
+              button,
+              ${StyledLink} button {
+                padding: 11px 16px ${hasSubmenu && maxWidth ? "12px" : "10px"};
+              }
+            `
+            : `
+              a,
+              ${StyledLink} a,
+              button,
+              ${StyledLink} button {
+                padding: ${!inFullscreenView ? "11px" : "0px"} 16px;
+              }
+            `
         }
       `}
 
     button,
-    ${StyledLink} button {
-      height: 40px;
+    ${StyledLink} button,
+    a,
+    ${StyledLink} a {
       margin: 0px;
       text-align: left;
 
@@ -260,6 +293,10 @@ const StyledMenuItemWrapper = styled.a.attrs({
       css`
         height: auto;
         white-space: normal;
+
+        ${StyledIcon} {
+          top: -2px;
+        }
       `}
     }
 
@@ -279,6 +316,8 @@ const StyledMenuItemWrapper = styled.a.attrs({
       css`
         a > ${StyledIcon}, button > ${StyledIcon} {
           display: inline-block;
+          height: 18px;
+          top: -2px;
         }
       `}
     }
@@ -396,7 +435,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
         a::before,
         button::before {
           display: block;
-          margin-top: -2px;
+          margin-top: -1px;
           pointer-events: none;
           position: absolute;
           right: ${(props) => parsePadding(padding(props)).iconSpacing};
diff --git a/src/components/menu/menu.component.tsx b/src/components/menu/menu.component.tsx
index 143369208..a7789a9d3 100644
--- a/src/components/menu/menu.component.tsx
+++ b/src/components/menu/menu.component.tsx
@@ -7,7 +7,18 @@ import MenuContext, { MenuType } from "./__internal__/menu.context";
 import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation";
 import { MENU_ITEM_CHILDREN_LOCATOR } from "./__internal__/locators";
 
-export interface MenuProps extends TagProps, LayoutProps, FlexboxProps {
+export interface MenuProps
+  extends TagProps,
+    Pick<
+      LayoutProps,
+      | "width"
+      | "minWidth"
+      | "maxWidth"
+      | "overflow"
+      | "overflowX"
+      | "verticalAlign"
+    >,
+    FlexboxProps {
   /** Children elements */
   children: React.ReactNode;
   /** Defines the color scheme of the component */
diff --git a/src/components/menu/menu.mdx b/src/components/menu/menu.mdx
index e7f8fee9f..bae54f902 100644
--- a/src/components/menu/menu.mdx
+++ b/src/components/menu/menu.mdx
@@ -98,7 +98,7 @@ If you need to split out a submenu into a separate component, it must be done as
 
 In order to align text and icons within a submenu a `Box` component will need to be used to adjust the margin of the content.
 
-<Canvas of={MenuStories.SubmeuIconAndTextAlignment} />
+<Canvas of={MenuStories.SubmenuIconAndTextAlignment} />
 
 ### Scrollable submenu
 
diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
index d00b510e8..fe9236d33 100644
--- a/src/components/menu/menu.pw.tsx
+++ b/src/components/menu/menu.pw.tsx
@@ -404,7 +404,7 @@ test.describe("Prop tests for Menu component", () => {
     const topLess = 184;
     const leftLess = 108;
     // additionVal is to compensate for the outline.
-    const additionVal = 4;
+    const additionVal = 5;
 
     await page.keyboard.press("Tab");
     await page.keyboard.press("Enter");
@@ -417,19 +417,19 @@ test.describe("Prop tests for Menu component", () => {
     const boundBottom = await cross.evaluate((element) => {
       return element.getBoundingClientRect().bottom;
     });
-    expect(boundBottom).toBeLessThan(bottomLess + additionVal);
+    expect(boundBottom).toBeLessThanOrEqual(bottomLess + additionVal);
     expect(boundBottom).toBeGreaterThan(bottomLess);
 
     const boundTop = await cross.evaluate((element) => {
       return element.getBoundingClientRect().top;
     });
-    expect(boundTop).toBeLessThan(topLess + additionVal);
+    expect(boundTop).toBeLessThanOrEqual(topLess + additionVal);
     expect(boundTop).toBeGreaterThan(topLess);
 
     const boundLeft = await cross.evaluate((element) => {
       return element.getBoundingClientRect().left;
     });
-    expect(boundLeft).toBeLessThan(leftLess + additionVal);
+    expect(boundLeft).toBeLessThanOrEqual(leftLess + additionVal);
     expect(boundLeft).toBeGreaterThan(leftLess);
   });
 
@@ -559,27 +559,6 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    ["number", 15, 15],
-    ["number", 27, 27],
-    ["number", 41, 41],
-    ["string", "10px", 10],
-    ["string", "30px", 30],
-    ["string", "50px", 50],
-  ] as [string, number | string, number][]).forEach(
-    ([type, propValue, pixels]) => {
-      test(`should render with height set to ${pixels}px when prop is passed as a ${type}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponent height={propValue} />);
-
-        const thisMenu = menu(page).first();
-        await assertCssValueIsApproximately(thisMenu, "height", pixels);
-      });
-    }
-  );
-
   ([
     ["number", 810, 350, 810],
     ["number", 810, 1350, 1350],
@@ -618,59 +597,6 @@ test.describe("Prop tests for Menu component", () => {
     }
   );
 
-  ([
-    ["number", 30, 20, 30],
-    ["number", 30, 40, 40],
-    ["string", "35px", "25px", 35],
-    ["string", "35px", "40px", 40],
-  ] as [string, string | number, string | number, number][]).forEach(
-    ([type, minHeight, height, pixels]) => {
-      test(`should render with minimum height of ${pixels}px when minHeight prop is passed as a ${type}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponent minHeight={minHeight} height={height} />);
-
-        const thisMenu = menu(page).first();
-        await assertCssValueIsApproximately(thisMenu, "height", pixels);
-      });
-    }
-  );
-
-  ([
-    ["number", 30, 20, 20],
-    ["number", 30, 40, 30],
-    ["string", "35px", "25px", 25],
-    ["string", "35px", "40px", 35],
-  ] as [string, string | number, string | number, number][]).forEach(
-    ([type, maxHeight, height, pixels]) => {
-      test(`should render with maximum height of ${pixels}px when maxHeight prop is passed as a ${type}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponent maxHeight={maxHeight} height={height} />);
-
-        const thisMenu = menu(page).first();
-        await assertCssValueIsApproximately(thisMenu, "height", pixels);
-      });
-    }
-  );
-
-  ["block", "inline-block", "flex", "contents", "list-item", "none"].forEach(
-    (display) => {
-      test(`should render with display as ${display}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponent display={display} />);
-
-        const thisMenu = menu(page).first();
-        await expect(thisMenu).toHaveAttribute("display", display);
-        await expect(thisMenu).toHaveCSS("display", display);
-      });
-    }
-  );
-
   [
     "baseline",
     "bottom",
@@ -723,24 +649,6 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    "auto",
-    "clip",
-    "hidden",
-    "scroll",
-    "visible",
-  ] as MenuProps["overflowY"][]).forEach((overflow) => {
-    test(`should render with overflowY as ${overflow}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponent overflowY={overflow} />);
-
-      const thisMenu = menu(page).first();
-      await expect(thisMenu).toHaveCSS("overflow-y", overflow as string);
-    });
-  });
-
   ["normal", "stretch", "baseline", "center", "flex-start", "flex-end"].forEach(
     (alignment) => {
       test(`should render with alignItems as ${alignment}`, async ({
@@ -1875,17 +1783,6 @@ test.describe("Accessibility tests for Menu component", () => {
     });
   });
 
-  ["10px", "30px", "50px"].forEach((propValue) => {
-    test(`should pass accessibility tests when height is ${propValue}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponent height={propValue} />);
-
-      await checkAccessibility(page);
-    });
-  });
-
   (["default", "large"] as MenuDividerProps["size"][]).forEach((size) => {
     test(`should pass accessibility tests when size is ${size}px`, async ({
       mount,
@@ -1897,19 +1794,6 @@ test.describe("Accessibility tests for Menu component", () => {
     });
   });
 
-  ["block", "inline-block", "flex", "contents", "list-item", "none"].forEach(
-    (display) => {
-      test(`should pass accessibility tests when display is ${display}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponent display={display} />);
-
-        await checkAccessibility(page);
-      });
-    }
-  );
-
   [
     "baseline",
     "bottom",
@@ -1958,23 +1842,6 @@ test.describe("Accessibility tests for Menu component", () => {
     });
   });
 
-  ([
-    "auto",
-    "clip",
-    "hidden",
-    "scroll",
-    "visible",
-  ] as MenuProps["overflowY"][]).forEach((overflow) => {
-    test(`should pass accessibility tests when overflowY is ${overflow}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponent overflowY={overflow} />);
-
-      await checkAccessibility(page);
-    });
-  });
-
   ["normal", "stretch", "baseline", "center", "flex-start", "flex-end"].forEach(
     (alignment) => {
       test(`should pass accessibility tests for when alignItems is ${alignment}`, async ({
diff --git a/src/components/menu/menu.stories.tsx b/src/components/menu/menu.stories.tsx
index 02524b517..ba3a2f0a6 100644
--- a/src/components/menu/menu.stories.tsx
+++ b/src/components/menu/menu.stories.tsx
@@ -19,10 +19,14 @@ import {
   MenuFullscreen,
 } from ".";
 
-const styledSystemProps = generateStyledSystemProps({
-  flexBox: true,
-  layout: true,
-});
+const styledSystemProps = generateStyledSystemProps(
+  {
+    flexBox: true,
+    layout: true,
+  },
+  undefined,
+  ["height", "minHeight", "maxHeight", "size", "display", "overflowY"]
+);
 
 const defaultOpenState = isChromatic();
 
@@ -368,7 +372,7 @@ SplitSubmenuIntoSeparateComponentStory.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
-export const SubmeuIconAndTextAlignment: Story = () => {
+export const SubmenuIconAndTextAlignment: Story = () => {
   return (
     <Box minHeight="250px">
       <Menu menuType="dark">
@@ -391,8 +395,8 @@ export const SubmeuIconAndTextAlignment: Story = () => {
     </Box>
   );
 };
-SubmeuIconAndTextAlignment.storyName = "Submeu Icon and Text Alignment";
-SubmeuIconAndTextAlignment.parameters = {
+SubmenuIconAndTextAlignment.storyName = "Submeu Icon and Text Alignment";
+SubmenuIconAndTextAlignment.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
diff --git a/src/components/menu/menu.style.ts b/src/components/menu/menu.style.ts
index 1443c7f4a..ce0fb9a98 100644
--- a/src/components/menu/menu.style.ts
+++ b/src/components/menu/menu.style.ts
@@ -29,6 +29,8 @@ const StyledMenuWrapper = styled.ul<StyledMenuProps>`
   padding: 0;
   outline: none;
   display: flex;
+  align-items: stretch;
+  min-height: 40px;
 
   ${layout}
   ${flexbox}
@@ -60,6 +62,13 @@ interface StyledMenuItemProps
 }
 
 const StyledMenuItem = styled.li<StyledMenuItemProps>`
+  display: flex;
+  ${({ maxWidth }) =>
+    maxWidth &&
+    css`
+      align-items: stretch;
+    `}
+
   ${layout}
   ${flexbox}
 
@@ -72,6 +81,11 @@ const StyledMenuItem = styled.li<StyledMenuItemProps>`
     css`
       display: list-item;
     `}
+
+    ${!inSubmenu &&
+    css`
+      height: inherit;
+    `}
   `}
 
   ${({ inFullscreenView }) =>
diff --git a/src/components/navigation-bar/navigation-bar.pw.tsx b/src/components/navigation-bar/navigation-bar.pw.tsx
index cbab856c4..f79ebc5f9 100644
--- a/src/components/navigation-bar/navigation-bar.pw.tsx
+++ b/src/components/navigation-bar/navigation-bar.pw.tsx
@@ -185,7 +185,7 @@ test.describe("Test props for NavigationBar component", () => {
               aria-label="header"
             >
               <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-                <Menu display="flex" flex="1">
+                <Menu flex="1">
                   <MenuItem flex="1" onClick={() => {}}>
                     Menu Item One
                   </MenuItem>
@@ -204,7 +204,7 @@ test.describe("Test props for NavigationBar component", () => {
               aria-label="footer"
             >
               <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-                <Menu display="flex" flex="1">
+                <Menu flex="1">
                   <MenuItem flex="1" onClick={() => {}}>
                     Menu Item One
                   </MenuItem>
diff --git a/src/components/navigation-bar/navigation-bar.stories.tsx b/src/components/navigation-bar/navigation-bar.stories.tsx
index b327d1397..b9d9e3492 100644
--- a/src/components/navigation-bar/navigation-bar.stories.tsx
+++ b/src/components/navigation-bar/navigation-bar.stories.tsx
@@ -83,7 +83,7 @@ export const ContentMaxWidthBox: Story = () => {
   return (
     <NavigationBar>
       <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-        <Menu display="flex" flex="1">
+        <Menu flex="1">
           <MenuItem flex="1" onClick={() => {}}>
             Menu Item One
           </MenuItem>
@@ -127,7 +127,7 @@ export const Sticky: Story = () => {
         aria-label="header"
       >
         <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-          <Menu display="flex" flex="1">
+          <Menu flex="1">
             <MenuItem flex="1" onClick={() => {}}>
               Menu Item One
             </MenuItem>
@@ -158,7 +158,7 @@ export const Sticky: Story = () => {
         aria-label="footer"
       >
         <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-          <Menu display="flex" flex="1">
+          <Menu flex="1">
             <MenuItem flex="1" onClick={() => {}}>
               Menu Item One
             </MenuItem>
@@ -189,7 +189,7 @@ export const Fixed: Story = () => {
         offset="25px"
         aria-label="header"
       >
-        <Menu display="flex" flex="1">
+        <Menu flex="1">
           <MenuItem flex="1" onClick={() => {}}>
             Menu Item One
           </MenuItem>
@@ -218,7 +218,7 @@ export const Fixed: Story = () => {
         offset="25px"
         aria-label="footer"
       >
-        <Menu display="flex" flex="1">
+        <Menu flex="1">
           <MenuItem flex="1" onClick={() => {}}>
             Menu Item One
           </MenuItem>


Test patch:
diff --git a/src/components/global-header/component.test-pw.tsx b/src/components/global-header/component.test-pw.tsx
index c4e9f3b9b..fdd4aafe0 100644
--- a/src/components/global-header/component.test-pw.tsx
+++ b/src/components/global-header/component.test-pw.tsx
@@ -7,7 +7,7 @@ import NavigationBar from "../navigation-bar";
 export const FullMenuExample = () => (
   <>
     <GlobalHeader>
-      <Menu menuType="black" display="flex" flex="1">
+      <Menu menuType="black" flex="1">
         <MenuItem flex="1" submenu="Product Switcher">
           <MenuItem href="#">Product A</MenuItem>
         </MenuItem>
@@ -22,7 +22,7 @@ export const FullMenuExample = () => (
       </Menu>
     </GlobalHeader>
     <NavigationBar position="fixed" orientation="top" offset="40px">
-      <Menu display="flex" flex="1">
+      <Menu flex="1">
         <MenuItem flex="1">Menu Item One</MenuItem>
         <MenuItem flex="0 0 auto" href="#">
           Menu Item Two
diff --git a/src/components/global-header/global-header-test.stories.tsx b/src/components/global-header/global-header-test.stories.tsx
index 2d15506eb..25f947339 100644
--- a/src/components/global-header/global-header-test.stories.tsx
+++ b/src/components/global-header/global-header-test.stories.tsx
@@ -27,7 +27,7 @@ export const MenuWithIconOnlyButtonsStory: StoryFn<
   return (
     <GlobalHeader logo={<img height={28} src={carbonLogo} alt="Carbon logo" />}>
       <VerticalDivider h="100%" pt={1} pb={1} pr={0} pl={2} tint={100} />
-      <Menu menuType="black" display="flex" flex="1">
+      <Menu menuType="black" flex="1">
         <MenuItem flex="1" submenu="Product Switcher">
           <MenuItem href="#">Product A</MenuItem>
         </MenuItem>
diff --git a/src/components/menu/component.test-pw.tsx b/src/components/menu/component.test-pw.tsx
index 201de941f..a9582f2f0 100644
--- a/src/components/menu/component.test-pw.tsx
+++ b/src/components/menu/component.test-pw.tsx
@@ -33,7 +33,7 @@ export const MenuComponent = (props: Partial<MenuProps> & MenuDividerProps) => {
           <Typography variant="h4" textTransform="capitalize" my={2}>
             {menuType}
           </Typography>
-          <Menu menuType={menuType} display="flex" {...props}>
+          <Menu menuType={menuType} {...props}>
             <MenuItem href="#">Menu Item One</MenuItem>
             <MenuItem href="#">Menu Item Two</MenuItem>
             <MenuItem submenu="Menu Item Three">
@@ -422,7 +422,7 @@ export const MenuComponentItems = (
   return (
     <Box mb={150}>
       <Typography textTransform="capitalize" my={2} />
-      <Menu menuType="white" display="flex">
+      <Menu menuType="white">
         <MenuItem submenu="Menu Item One" submenuDirection="right" {...props}>
           <MenuItem href="#">Item Submenu One</MenuItem>
           <MenuItem href="#">Item Submenu Two</MenuItem>
@@ -622,7 +622,7 @@ export const MenuSegmentTitleComponent = (props: Partial<MenuTitleProps>) => {
           <Typography variant="h4" textTransform="capitalize" my={2}>
             {menuType}
           </Typography>
-          <Menu menuType={menuType} display="flex">
+          <Menu menuType={menuType}>
             <MenuItem href="#">Menu Item One</MenuItem>
             <MenuItem href="#">Menu Item Two</MenuItem>
             <MenuItem submenu="Menu Item Three">
@@ -655,7 +655,7 @@ export const MenuSegmentTitleComponentWithAdditionalMenuItem = (
           <Typography variant="h4" textTransform="capitalize" my={2}>
             {menuType}
           </Typography>
-          <Menu menuType={menuType} display="flex">
+          <Menu menuType={menuType}>
             <MenuItem href="#">Menu Item One</MenuItem>
             <MenuItem href="#">Menu Item Two</MenuItem>
             <MenuItem submenu="Menu Item Three">
@@ -705,7 +705,7 @@ export const MenuDividerComponent = (props: MenuDividerProps) => {
           <Typography variant="h4" textTransform="capitalize" my={2}>
             {menuType}
           </Typography>
-          <Menu menuType={menuType} display="flex">
+          <Menu menuType={menuType}>
             <MenuItem href="#">Menu Item One</MenuItem>
             <MenuItem href="#">Menu Item Two</MenuItem>
             <MenuItem submenu="Menu Item Three">
diff --git a/src/components/menu/menu-item/menu-item.test.tsx b/src/components/menu/menu-item/menu-item.test.tsx
index 49a3484f9..807e3a453 100644
--- a/src/components/menu/menu-item/menu-item.test.tsx
+++ b/src/components/menu/menu-item/menu-item.test.tsx
@@ -4,7 +4,6 @@ import userEvent from "@testing-library/user-event";
 
 import { MenuItem } from "..";
 import {
-  testStyledSystemLayout,
   testStyledSystemFlexBox,
   testStyledSystemPaddingRTL,
 } from "../../../__spec_helper__/__internal__/test-utils";
@@ -35,14 +34,7 @@ describe("When MenuItem has no submenu", () => {
     undefined,
     { modifier: "&&& > a" }
   );
-  testStyledSystemLayout(
-    (props) => (
-      <MenuItem href="#" {...props}>
-        Foo
-      </MenuItem>
-    ),
-    () => screen.getByRole("listitem")
-  );
+
   testStyledSystemFlexBox(
     (props) => (
       <MenuItem href="#" {...props}>
@@ -52,6 +44,30 @@ describe("When MenuItem has no submenu", () => {
     () => screen.getByRole("listitem")
   );
 
+  it("should apply the expected styling when `width` prop passed", () => {
+    render(<MenuItem width="50%">Item One</MenuItem>);
+
+    expect(screen.getByRole("listitem")).toHaveStyle({
+      width: "50%",
+    });
+  });
+
+  it("should apply the expected styling when `maxWidth` prop passed", () => {
+    render(<MenuItem maxWidth="50%">Item One</MenuItem>);
+
+    expect(screen.getByRole("listitem")).toHaveStyle({
+      maxWidth: "50%",
+    });
+  });
+
+  it("should apply the expected styling when `minWidth` prop passed", () => {
+    render(<MenuItem minWidth="50%">Item One</MenuItem>);
+
+    expect(screen.getByRole("listitem")).toHaveStyle({
+      minWidth: "50%",
+    });
+  });
+
   it("should render children correctly", () => {
     render(<MenuItem>Item One</MenuItem>);
 
@@ -615,7 +631,7 @@ describe("when MenuItem has a submenu", () => {
         <MenuItem submenu="Item One">
           <MenuItem href="#">Submenu Item One</MenuItem>
           <MenuItem>
-            <Search defaultValue="foo" />
+            <Search value="foo" onChange={() => {}} />
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
@@ -640,7 +656,7 @@ describe("when MenuItem has a submenu", () => {
         <MenuItem submenu="Item One">
           <MenuItem href="#">Submenu Item One</MenuItem>
           <MenuItem>
-            <Search defaultValue="foo" />
+            <Search value="foo" onChange={() => {}} />
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
@@ -666,7 +682,7 @@ describe("when MenuItem has a submenu", () => {
         <MenuItem submenu="Item One">
           <MenuItem href="#">Submenu Item One</MenuItem>
           <MenuItem>
-            <Search defaultValue="foo" />
+            <Search value="foo" onChange={() => {}} />
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
@@ -893,7 +909,7 @@ describe("when MenuItem has a submenu", () => {
         <MenuItem submenu="Item One">
           <MenuItem href="#">Submenu Item One</MenuItem>
           <MenuItem>
-            <Search defaultValue="foo" />
+            <Search value="foo" onChange={() => {}} />
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
@@ -917,7 +933,7 @@ describe("when MenuItem has a submenu", () => {
         <MenuItem submenu="Item One">
           <MenuItem href="#">Submenu Item One</MenuItem>
           <MenuItem>
-            <Search defaultValue="foo" />
+            <Search value="foo" onChange={() => {}} />
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
@@ -944,7 +960,7 @@ describe("when MenuItem has a submenu", () => {
         <MenuItem submenu="Item One">
           <MenuItem href="#">Submenu Item One</MenuItem>
           <MenuItem>
-            <Search defaultValue="foo" />
+            <Search value="foo" onChange={() => {}} />
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
@@ -1025,4 +1041,38 @@ describe("when MenuItem has a submenu", () => {
       backgroundColor: menuConfigVariants.light.selected,
     });
   });
+
+  it("should apply the expected padding when the item also has `maxWidth` set", () => {
+    render(
+      <MenuContext.Provider value={{ ...menuContextValues }}>
+        <MenuItem submenu="Item One" maxWidth="100px">
+          <MenuItem>Submenu Item One</MenuItem>
+          <MenuItem>Submenu Item Two</MenuItem>
+          <MenuItem>Submenu Item Three</MenuItem>
+        </MenuItem>
+      </MenuContext.Provider>
+    );
+
+    expect(screen.getByRole("button", { name: "Item One" })).toHaveStyle({
+      padding: "11px 16px 12px",
+    });
+  });
+});
+
+test("should throw when `children` passed and `submenu` is an empty string", () => {
+  const consoleSpy = jest
+    .spyOn(global.console, "error")
+    .mockImplementation(() => {});
+
+  expect(() => {
+    render(
+      <MenuContext.Provider value={{ ...menuContextValues }}>
+        <MenuItem submenu="">Item One</MenuItem>
+      </MenuContext.Provider>
+    );
+  }).toThrow(
+    "You should not pass `children` when `submenu` is an empty string"
+  );
+
+  consoleSpy.mockRestore();
 });
diff --git a/src/components/menu/menu-test.stories.tsx b/src/components/menu/menu-test.stories.tsx
index f1e43dc3b..dde7a895c 100644
--- a/src/components/menu/menu-test.stories.tsx
+++ b/src/components/menu/menu-test.stories.tsx
@@ -10,6 +10,7 @@ import {
   MenuFullscreenProps,
   MenuSegmentTitle,
   ScrollableBlock,
+  MenuDivider,
 } from ".";
 import { MenuType } from "./__internal__/menu.context";
 import Search from "../search";
@@ -35,6 +36,7 @@ const meta: Meta<typeof Menu> = {
     "MenuComponentFullScreenWithLongSubmenuText",
     "AsLinkWithAlternateVariant",
     "MenuWithSubmenuCustomPadding",
+    "WhenMenuItemsWrap",
   ],
   parameters: {
     info: { disable: true },
@@ -95,16 +97,25 @@ export const MenuFullScreenStory = ({
         isOpen={isOpen}
         onClose={onClose}
       >
-        <MenuItem href="#">Menu Item One</MenuItem>
+        <MenuItem href="#">
+          Menu item as link with icon
+          <Icon ml="4px" type="link" />
+        </MenuItem>
+        <MenuItem onClick={() => {}}>
+          Menu item as button with icon
+          <Icon ml="4px" type="link" />
+        </MenuItem>
         <MenuItem
           onClick={(evt) => action("submenu item clicked")(evt)}
-          submenu="Menu Item Two"
+          submenu="Menu item with submenu and onClick"
         >
           <MenuItem py={3} href="#">
-            Submenu Item One
+            Submenu item one as link with padding override and icon
+            <Icon ml="4px" type="link" />
           </MenuItem>
-          <MenuItem py={3} href="#">
-            Submenu Item Two
+          <MenuItem py={3} onClick={() => {}}>
+            Submenu item two as button with padding override and icon
+            <Icon ml="4px" type="link" />
           </MenuItem>
         </MenuItem>
         <MenuItem variant="alternate">
@@ -115,13 +126,18 @@ export const MenuFullScreenStory = ({
             searchButton={searchButton}
           />
         </MenuItem>
-        <MenuItem href="#">Menu Item Three</MenuItem>
-        <MenuItem href="#">Menu Item Four</MenuItem>
-        <MenuItem submenu="Menu Item Five">
-          <MenuItem href="#">Submenu Item One</MenuItem>
-          <MenuItem href="#">Submenu Item Two</MenuItem>
+        <MenuItem href="#">Menu item as link</MenuItem>
+        <MenuItem onClick={() => {}}>Menu item as button</MenuItem>
+        <MenuItem submenu="Menu item with submenu">
+          <MenuItem href="#">
+            Submenu item as link with icon
+            <Icon ml="4px" type="link" />
+          </MenuItem>
+          <MenuItem onClick={() => {}}>
+            Submenu item as button with icon
+            <Icon ml="4px" type="link" />
+          </MenuItem>
         </MenuItem>
-        <MenuItem href="#">Menu Item Six</MenuItem>
         <MenuItem onClick={() => {}}>
           Menu item as button with a really long topic where the text should not
           be truncated but instead it should be wrapped
@@ -455,5 +471,41 @@ export const MenuWithSubmenuCustomPadding = () => (
     ))}
   </>
 );
-
 MenuWithSubmenuCustomPadding.storyName = "Menu with submenu custom padding";
+
+export const WhenMenuItemsWrap = () => {
+  return (
+    <Box mb={150}>
+      <Menu width="400px">
+        <MenuItem
+          justifyContent="flex-start"
+          width="100px"
+          icon="settings"
+          className="foooooo"
+          href="#"
+        >
+          M
+        </MenuItem>
+        <MenuItem icon="settings" onClick={() => {}}>
+          Menu Item Two
+        </MenuItem>
+        <MenuItem submenu="Menu Item Three">
+          <MenuItem href="#">Item Submenu One</MenuItem>
+          <MenuItem href="#">Item Submenu Two</MenuItem>
+          <MenuDivider />
+          <MenuItem icon="entry" href="#">
+            Item Submenu Three
+          </MenuItem>
+          <MenuItem icon="settings" href="#">
+            Item Submenu Four
+          </MenuItem>
+        </MenuItem>
+        <MenuItem maxWidth="100px" submenu="Menu Item Four" onClick={() => {}}>
+          <MenuItem onClick={() => {}}>Item Submenu One</MenuItem>
+          <MenuItem href="#">Item Submenu Two</MenuItem>
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+};
+WhenMenuItemsWrap.storyName = "When menu items wrap";
diff --git a/src/components/navigation-bar/components.test-pw.tsx b/src/components/navigation-bar/components.test-pw.tsx
index 5f2e90632..03a4a51ea 100644
--- a/src/components/navigation-bar/components.test-pw.tsx
+++ b/src/components/navigation-bar/components.test-pw.tsx
@@ -57,7 +57,7 @@ export const ContentMaxWidthBox = () => (
   <div style={{ height: 200 }}>
     <NavigationBar>
       <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-        <Menu display="flex" flex="1">
+        <Menu flex="1">
           <MenuItem flex="1" onClick={() => {}}>
             Menu Item One
           </MenuItem>
@@ -92,7 +92,7 @@ export const Sticky = () => (
       aria-label="header"
     >
       <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-        <Menu display="flex" flex="1">
+        <Menu flex="1">
           <MenuItem flex="1" onClick={() => {}}>
             Menu Item One
           </MenuItem>
@@ -128,7 +128,7 @@ export const Sticky = () => (
       aria-label="footer"
     >
       <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-        <Menu display="flex" flex="1">
+        <Menu flex="1">
           <MenuItem flex="1" onClick={() => {}}>
             Menu Item One
           </MenuItem>
@@ -156,7 +156,7 @@ export const Fixed = () => (
       offset="25px"
       aria-label="header"
     >
-      <Menu display="flex" flex="1">
+      <Menu flex="1">
         <MenuItem flex="1" onClick={() => {}}>
           Menu Item One
         </MenuItem>
@@ -190,7 +190,7 @@ export const Fixed = () => (
       offset="25px"
       aria-label="footer"
     >
-      <Menu display="flex" flex="1">
+      <Menu flex="1">
         <MenuItem flex="1" onClick={() => {}}>
           Menu Item One
         </MenuItem>
diff --git a/src/components/navigation-bar/navigation-bar-test.stories.tsx b/src/components/navigation-bar/navigation-bar-test.stories.tsx
index d3b6b5f0c..d7332f94a 100644
--- a/src/components/navigation-bar/navigation-bar-test.stories.tsx
+++ b/src/components/navigation-bar/navigation-bar-test.stories.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from "react";
 import NavigationBar, { NavigationBarProps } from ".";
 import { Menu, MenuItem } from "../menu";
+import Pill from "../pill";
 import useMediaQuery from "../../hooks/useMediaQuery";
 
 export default {
@@ -10,6 +11,7 @@ export default {
     "NavigationBarWithSubmenuAndChangingHeight",
     "WithMediaQuery",
     "ResponsivePadding",
+    "WithPills",
   ],
   parameters: {
     info: { disable: true },
@@ -106,3 +108,35 @@ ResponsivePadding.parameters = {
     viewports: [599, 959, 1259],
   },
 };
+
+export const WithPills = () => {
+  return (
+    <NavigationBar
+      navigationType="light"
+      position="fixed"
+      orientation="top"
+      offset="40px"
+    >
+      <Menu menuType="light">
+        <MenuItem onClick={() => {}}>
+          Menu 1
+          <Pill pillRole="status" colorVariant="warning" fill ml={1} size="M">
+            1
+          </Pill>
+        </MenuItem>
+        <MenuItem href="#">
+          Menu 2
+          <Pill pillRole="status" colorVariant="warning" fill ml={1} size="M">
+            1
+          </Pill>
+        </MenuItem>
+      </Menu>
+    </NavigationBar>
+  );
+};
+WithPills.storyName = "With pills";
+WithPills.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+  },
+};