diff --git a/src/menu/menu.stories.mdx b/src/menu/menu.stories.mdx
index cb6766cf9..4f8bfe195 100644
--- a/src/menu/menu.stories.mdx
+++ b/src/menu/menu.stories.mdx
@@ -126,6 +126,8 @@ be changed by passing `modal={false}` to `<MenuList>`
 
 You may nest the `<SubMenu>` component within `<Menu>` to create submenus.
 
+On smaller viewports where there isn't enough space to render the submenu on the side,it will be rendered under its parent menu item instead.
+
 <Canvas>
     <Story
         name="SubMenu Story"
diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx
index f9beff24b..f9b26287f 100644
--- a/src/menu/menu.tsx
+++ b/src/menu/menu.tsx
@@ -34,6 +34,8 @@ const MenuContext = React.createContext<MenuContextState>({
     setAnchorRect: () => undefined,
 })
 
+const SubMenuContext = React.createContext<{ isSubMenu: boolean }>({ isSubMenu: false })
+
 //
 // Menu
 //
@@ -147,7 +149,7 @@ interface MenuListProps
  * The dropdown menu itself, containing a list of menu items.
  */
 const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuList(
-    { exceptionallySetClassName, modal = true, ...props },
+    { exceptionallySetClassName, modal = true, flip, ...props },
     ref,
 ) {
     const { menuStore, getAnchorRect } = React.useContext(MenuContext)
@@ -155,6 +157,8 @@ const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuLi
         throw new Error('MenuList must be wrapped in <Menu/>')
     }
 
+    const { isSubMenu } = React.useContext(SubMenuContext)
+
     const isOpen = menuStore.useState('open')
 
     return isOpen ? (
@@ -168,6 +172,7 @@ const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuLi
                 className={classNames('reactist_menulist', exceptionallySetClassName)}
                 getAnchorRect={getAnchorRect ?? undefined}
                 modal={modal}
+                flip={flip ?? (isSubMenu ? 'bottom' : undefined)}
             />
         </Portal>
     ) : null
@@ -324,13 +329,14 @@ const SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(
 
     const [button, list] = React.Children.toArray(children)
     const buttonElement = button as React.ReactElement<MenuButtonProps>
+    const subMenuContextValue = React.useMemo(() => ({ isSubMenu: true }), [])
 
     return (
         <Menu onItemSelect={handleSubItemSelect}>
             <AriakitMenuItem store={menuStore} ref={ref} hideOnClick={false} render={buttonElement}>
                 {buttonElement.props.children}
             </AriakitMenuItem>
-            {list}
+            <SubMenuContext.Provider value={subMenuContextValue}>{list}</SubMenuContext.Provider>
         </Menu>
     )
 })