DropdownMenuSubContent menu items, gets cut off out of screen on mobile

[MilanObrenovic]

This bug can clearly be seen even on the official shadcn website: https://ui.shadcn.com/docs/components/dropdown-menu

This bug occurs only on mobile (obviously). Perhaps we need a different approach on how to display these sub menu items on mobile so they dont get cut off screen? Imagine how bad it would get if there are multiple sub menu item contents, level 3-4-5 etc. They wouldnt even be seen on the screen.

What do you think is the best way to solve this from the UI/UX POV?

[i-m-abbhay]

This is surely not good user experience especially if there are nested sub menu items. I am not a pro in design thinking but here are a few approaches to improve the UI/UX for the sub-menu items:

Stacked Navigation: Convert the horizontal sub-menu into a vertical list. When a user taps on a menu item with children, instead of displaying the sub-menu to the side, we can stack it below the parent item or slide in the sub-menu from the right to replace the main menu temporarily, often referred to as an "accordion" style navigation.

Full-Screen Menu: On mobile devices, we can make the menu full screen when activated. The sub-menu items can then take up more horizontal space, and we could also employ a horizontal scrolling feature within the sub-menu if necessary.

Navigation Drawer: Implement a drawer navigation that slides in from the side of the screen. The drawer can have a hierarchical structure that allows sub-menus to expand and collapse within the drawer itself.

There must be more than three methods to deal with this problem. I can only think of these at this instant.

[MilanObrenovic]

Bumping this thread. Any updates @shadcn ?

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[therealtgd]

Any updates on this issue? I've also noticed that the dropdown gets cut off vertically if it doesn't have enough space. And it doesn't have scroll enabled to handle this. It can be seen on the official documentation site.