Menu

The Menu component displays a list of choices on a temporary surface. It appears when the user interacts with a button or other control.

---

Python Dash Example

Below is an example of how to use the Menu component in a Python Dash application.

import dash
from dash import html
from dash.dependencies import Input, Output, State
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)
dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider([
    dmc.Box(
        sx={
            "display": "flex",
            "justifyContent": "center",
            "alignItems": "center",
        },
        children=[
            dmc.Button(
                "Dashboard",
                id="menu-button",
                n_clicks=0,
                variant="text"
            ),
            dmc.Menu(
                id="basic-menu",
                anchorEl=None,
                open=False,
                children=[
                    dmc.MenuItem("Profile", id="menu-profile"),
                    dmc.MenuItem("My account", id="menu-account"),
                    dmc.MenuItem("Logout", id="menu-logout")
                ]
            )
        ]
    )
])

@app.callback(
    [Output("basic-menu", "open"),
     Output("basic-menu", "anchorEl")],
    [Input("menu-button", "n_clicks"),
     Input("menu-profile", "n_clicks"),
     Input("menu-account", "n_clicks"),
     Input("menu-logout", "n_clicks")],
    [State("basic-menu", "open")],
    prevent_initial_call=True
)
def toggle_menu(btn_clicks, profile_clicks, account_clicks, logout_clicks, is_open):
    ctx = dash.callback_context
    trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]

    if trigger_id == "menu-button":
        if not is_open:
            return True, {"id": "menu-button"}
        return False, None

    return False, None

if __name__ == "__main__":
    app.run_server(debug=True)

---

Props Table

Below are the props for the Menu component and its related components:

Menu Props

Prop	Type	Default	Description
id	string	undefined	The id of the menu.
open	boolean	false	If true, the menu is shown.
anchorEl	HTMLElement or object	null	The DOM element used to set the position of the menu. When using an object, pass the element's id as {id: "element-id"}.
children	node	undefined	Menu contents, normally MenuItem components.
MenuListProps	object	undefined	Props applied to the MenuList element.
anchorOrigin	object	{vertical: "bottom", horizontal: "left"}	The position of the menu relative to its anchor element.
transformOrigin	object	{vertical: "top", horizontal: "left"}	The position of the menu's transform origin point.

MenuItem Props

Prop	Type	Default	Description
onClick	function	undefined	Callback fired when the menu item is clicked.
disabled	boolean	false	If true, the menu item will be disabled.
selected	boolean	false	If true, the menu item will be selected.
children	node	undefined	The content of the menu item.

---

Anchor Element and Positioning

To properly position a Menu component, you need to provide an anchorEl prop. In Dash, you can reference an element by passing its ID as an object:

dmc.Menu(
    id="example-menu",
    anchorEl={"id": "menu-button"},
    open=True,
    # other props...
)

The anchorOrigin and transformOrigin props control how the menu is positioned relative to the anchor element:

dmc.Menu(
    id="positioned-menu",
    anchorEl={"id": "menu-button"},
    open=True,
    anchorOrigin={
        "vertical": "top",
        "horizontal": "right",
    },
    transformOrigin={
        "vertical": "top",
        "horizontal": "left",
    },
    children=[
        # menu items
    ]
)

Handling Menu State

In Dash, you'll typically need to handle the open state of the menu through callbacks:

1. A button click opens the menu
2. Clicking a menu item or outside the menu closes it

The Menu component will automatically update its open state when closed via the internal onClose handler.

---

For the full list of props, refer to the official MUI documentation, as these components are based on MUI:

MUI Menu Documentation