[DropdownMenu] [PopoverMenu] Add Overlay component

[darrylyeo]

Feature request

Overview

Implement an Overlay component for DropdownMenu and PopoverMenu (similar to the one found in Dialog) which is displayed behind the popover content.

Examples in other libraries

This would function similarly to the Overlay component found in Dialog and AlertDialog.

Who does this impact? Who is this for?

A stylable overlay would help make the popover content stand out and visually indicate that the user can click outside to dismiss the menu.

[benoitgrelard]

Hi @darrylyeo, It isn't very common to display menus/popover with overlays behind them. Do you have examples of that in the wild?

If we were to make this happen, they would only be for modal mode, which Popover isn't by default, but DropdownMenu is. The part would be optional regardless I guess.

Thoughts on this @andy-hook?

[andy-hook]

It’s not particularly common but I have seen it used in the wild, amazon comes to mind:


I also remember this being mentioned as a potential convenience in NavigationMenu.

they would only be for modal mode, which Popover isn't by default

Aside but I sometimes wonder if this default on Popover was the right choice from a consistency perspective.

[darrylyeo]

Agreed, I think this could be added to NavigationMenu and even ContextMenu as well!

Plenty of examples in iOS where context menus dim or blur the background:

[emroot]

I second that. used in plenty of places, would love to see this land <3

[yudinvictor]

is there any progress on this?

[artemshchirov]

is there any progress on this?

[jaithirani]

Is there a workaround for now?

[ishaqibrahim-conv-cw]

@jaithirani You can make a custom <Overlay/> component and nest it inside the root component. E.g. for NavigationMenu here's how I'm doing it:

const [isOpen, setIsOpen] = useState<boolean>(false);

return (
  <NavigationMenu
    defaultValue=""
    onValueChange={(val) => (val ? setIsOpen(true) : setIsOpen(false))}
    className={cn(className)}
  >
    {/* other components */}
    {isOpen && <Overlay />}
  </NavigationMenu>
);

Overlay:

export const Overlay = () => {
  return (
    <div className="absolute left-0 z-0 top-14 h-screen w-full bg-black bg-opacity-20"></div>
  );
};