How to display scrollbar in ActionMenu?

[callmekatootie]

I am following the minimal example to create an ActionMenu. I have too many <ActionList.Item/> components.

When I click on the button, the overlay does appear - but there's no scrollbar so I can only see part of the content. I checked for props that I could enable but could not find one. Should I manually display the scrollbar through CSS?

[lesliecdubs]

Hi, thanks for the question!

@langermank (First Responder) do you have any guidance to share around best practices for enabling scrolling within a long ActionMenu?

[langermank]

@callmekatootie I believe you can pass in a height which will enable a scrollable overlay. It seems like auto height is the default. Here's the source code.

[callmekatootie]

That does set the height of the overlay, but there's no scrollbar. The overflowing content still gets hidden.

[cbix]

I always set the overflow behavior manually:

<ActionMenu>
  <ActionMenu.Overlay width="auto" height="small" sx={{ overflowY: 'auto' }}>
    <ActionList>
      {/* items */}
    </ActionList>
  </ActionMenu.Overlay>
</ActionMenu>

However I couldn't find a way yet to automatically scroll to a specific list item, tried different things (active, initialFocusRef, autoFocus, even calling scrollIntoView on the overlay opening callback) but none of them worked ...