Menu

StrataKit MUI modifications

• Restyled using StrataKit’s visual language.
• Removed role="dialog" semantics from the paper slot.
• Added fallback mechanism for automatically labelling the list slot using the trigger element (anchorEl).
• Includes full forced-colors support.
• disableScrollLock is used to prevent scroll locking when the menu is open.
• The default container now resolves from StrataKit’s portal context, which defaults to root portal container.
• The autoFocus and disableAutoFocusItem props are not supported.
• The action, dense, and focusVisibleClassname props of MenuItem are not supported.
• Ripple effect removed. The centerRipple, disableRipple, disableTouchRipple, focusRipple, TouchRippleProps, and touchRippleRef props of MenutItem are not supported.

Examples

Dense

Pass the dense prop through slotProps.list to make the Menu smaller. This is useful when space is limited, or when the Menu is triggered by a small button.

The dense prop is also available via MenuList.

Selectable

To make MenuItems selectable, override the default role to either:

• role="menuitemradio" when only one item within a group is selectable
• role="menuitemcheckbox" when the items are individually selectable.

With the appropriate role in place, use aria-checked="true" and the selected prop to mark the selected item(s).

Labelling the menu button

Make sure the triggering button starts with a predictable label that stays consistent regardless of the selected item. In the example above, the text “Sort by:” remains stable, while the text following it changes based on the selected item. This allows assistive technology users to easily find and operate the menu button.