A Dropdown Menu is a menu that offers a list of options that a user can select from. They are typically positioned near a button that will control their appearance and disappearance.

A Dropdown Menu is composed of a menu.root, a menu.trigger and a menu.content. The menu.trigger is the element that the user interacts with to open the menu. It wraps the element that will open the dropdown menu. The menu.content is the component that pops out when the dropdown menu is open.

The menu.item contains the actual dropdown menu items and sits under the menu.content. The shortcut prop is an optional shortcut command displayed next to the item text.

The menu.sub contains all the parts of a submenu. There is a menu.sub_trigger, which is an item that opens a submenu. It must be rendered inside a menu.sub component. The menu.sub_component is the component that pops out when a submenu is open. It must also be rendered inside a menu.sub component.

The menu.separator is used to visually separate items in a dropdown menu.

The on_open_change event, from the menu.root, is called when the open state of the dropdown menu changes. It is used in conjunction with the open prop, which is passed to the event handler.

Accessing an overlay component from within another overlay component is a common use case but does not always work exactly as expected.

The code below will not work as expected as because the dialog is within the menu and the dialog will only be open when the menu is open, rendering the dialog unusable.

In this example, we will show how to open a dialog box from a dropdown menu, where the menu will close and the dialog will open and be functional.