Menu items don't fit the Menu in Mobile Devices

[krarrobo1]

Edge case: on menus with an exceptionally large number of items to render in the Menu, the "On this page" version for smaller screens works as expected, BUT the list of menu options overflows the menu with no scroll bar or other way to view items past the height that the viewport allows.

I would like to know if there is a reasonable means to add overflow-y or a similar mechanism to the menu so that users can see all content on the page.

I was also taking a look to Menu Primitive as an alternative to make the menu scrollable. But I wonder if there's a simpler way

For your reference I'm using the Menu Button alongside Menu paste components.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

The Paste Menu Primitive is indeed a good option for your use case. As the documentation suggests, the purpose of providing these unstyled primitives is to cater for instances when the styled Menu provided by Paste doesn’t meet the requirements needed to solve a unique or individual customer problem.

You can provide custom styling to the primitive menu by utilizing the as prop on each component. This means you can add overflow-y or similar styling to make the menu scrollable.

Here's an example of how you might do this:

import {Menu, MenuButton, MenuItem, MenuSeparator, useMenuState} from '@twilio-paste/core/menu';
import {Box} from '@twilio-paste/box';
import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon';

const PreferencesMenu = () => {
  const menu = useMenuState();
  return (
    <>
      <MenuButton {...menu} variant="primary">
        Preferences <ChevronDownIcon decorative />
      </MenuButton>
      <Menu {...menu} aria-label="Preferences" as={Box} maxHeight="size30" overflowY="scroll">
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
      </Menu>
    </>
  );
};

In this example, we're using the Box component from Paste to style the menu and menu items. We've added a maxHeight and overflowY to the Menu component to make it scrollable.

Please note that you should review your design proposal with the Design Systems team before implementing this solution.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Variable width for menu items (updated: 10/16/2023, similarity score: 88%)
• Menu without button (updated: 07/11/2022, similarity score: 86%)
• menu component inside a table - Answer (updated: 01/28/2021, similarity score: 85%)

[SiTaggart]

Definitely making stuff up in this answer I'm afraid. This is more relevant if you are using the menu-primitive, where you can over what the component renders as.

[SiTaggart]

Hi @krarrobo1

Is this for instances where the right-hand table of contents is just a little too much for smaller screens and you move it to a menu at the top? That's quite a neat idea!

There is no way to modify the style of our components, but this feels like a real feature of the menu component. I'll ticket it so that it'll automatically scroll when it's too big for the screen. That way it's just a version update for you.

Are you ok waiting for a little while for it to show up in a new release?

Thanks

[krarrobo1]

Hi @SiTaggart yes it is for that scenario you mentioned! I was thinking the same. I just created a CustomScrollableMenu for making the scroll possible in the mean time. Glad to have this included in next Paste versions.

I'm ok with that, looking forward for the new release to replace the Custom Component 🚀

[SiTaggart]

PR #3709

[SiTaggart]

A fix was released in Core v20.8.0