## Menu  
Use the Menu and MenuX components to show an interactive menu dropdown with links and buttons.  
Category: Overlay  

### Simple Example

`Menu` is built using `MenuItem`(s), `MenuDropdown` and `MenuTarget`. You can use `MenuItem` as either a link or a
button. Just passing the `href` property will make it a link otherwise it will act as a button. When `MenuItem` is
used as a button, you can write callbacks on it.

```python
from dash_iconify import DashIconify
import dash_mantine_components as dmc
from dash import callback, html, Input, Output

component = dmc.Stack(
    [
        dmc.Text(id="menu-text", mb="md"),
        dmc.Menu(
            [
                dmc.MenuTarget(dmc.Button("Click for options!")),
                dmc.MenuDropdown(
                    [
                        dmc.MenuItem(
                            "External Link",
                            href="https://www.github.com/snehilvj",
                            target="_blank",
                            leftSection=DashIconify(icon="radix-icons:external-link"),
                        ),
                        dmc.MenuItem("Useless Button", id="useless-button", n_clicks=0),
                    ]
                ),
            ]
        ),
    ], align="center"
)


@callback(Output("menu-text", "children"), Input("useless-button", "n_clicks"))
def click_menu(n_clicks):
    return f"Clicked {n_clicks} times."
```
### Submenus

Note: For callbacks on `SubMenu` items to work reliably, set `Menu(keepMounted=True)`.

```python

import dash_mantine_components as dmc


menu = dmc.Menu(
    width=200,
    position="bottom-start",
    keepMounted=True, # required when using SubMenu
    children=[
        dmc.MenuTarget(
            dmc.Button("Toggle Menu")
        ),
        dmc.MenuDropdown([
            dmc.MenuItem("Dashboard"),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Products")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("All products"),
                    dmc.MenuItem("Categories"),
                    dmc.MenuItem("Tags"),
                    dmc.MenuItem("Attributes"),
                    dmc.MenuItem("Shipping classes"),
                ])
            ]),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Orders")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("Open"),
                    dmc.MenuItem("Completed"),
                    dmc.MenuItem("Cancelled"),
                ])
            ]),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Settings")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("Profile"),
                    dmc.MenuItem("Security"),
                    dmc.MenuItem("Notifications"),
                ])
            ]),
        ])
    ]
)

component=dmc.Center(menu)
```


### Menu on Hover

Set `trigger` to `hover` to reveal dropdown when user hovers over menu target and dropdown. `closeDelay` and `openDelay` props can be used to control open and close delay in ms.
Note that:

* If you set `closeDelay=0` then menu will close before user will reach dropdown, so set `offset=0` to remove space between target element and dropdown.
* Menu with hover trigger is not accessible - users that navigate with keyboard will not be able to use it.

```python
import dash_mantine_components as dmc

component = dmc.Menu(trigger="hover", openDelay=100, closeDelay=400, children=[
  # menu target
  # menu dropdown
    # menu items
])
```

### Menu Target

Any component you specify in dmc.MenuTarget is wrapped by a dmc.Box component under the hood. So adding a margin
to your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component
using the prop `boxWrapperProps` in dmc.MenuTarget.

### Transitions

Menu dropdown can be animated with any of the ready-made transitions.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Menu(
    [
        dmc.MenuTarget(dmc.Button("Click for options!")),
        dmc.MenuDropdown(
            [
                dmc.MenuItem(
                    "External Link",
                    href="https://www.github.com/snehilvj",
                    target="_blank",
                    leftSection=DashIconify(icon="radix-icons:external-link"),
                ),
                dmc.MenuItem("Useless Button", n_clicks=0),
            ]
        ),
    ],
    transitionProps={"transition": "rotate-right", "duration": 150},
)
```
### Custom component as Target

```python
from dash_iconify import DashIconify
import dash_mantine_components as dmc

component = dmc.Menu(
    [
        dmc.MenuTarget(dmc.ActionIcon(DashIconify(icon="tabler:user"))),
        dmc.MenuDropdown(
            [
                dmc.MenuItem(
                    "External Link",
                    href="https://www.github.com/snehilvj",
                    target="_blank",
                    leftSection=DashIconify(icon="radix-icons:external-link"),
                ),
                dmc.MenuItem("Useless Button", n_clicks=0),
            ]
        ),
    ]
)
```
### Icons, Right Section, and Colors

Menu component can be customised by changing icons, right section and even colors. Here's an example.

```python
from dash_iconify import DashIconify
import dash_mantine_components as dmc

component = dmc.Menu(
    [
        dmc.MenuTarget(dmc.Button("Hover for options!")),
        dmc.MenuDropdown(
            [
                dmc.MenuLabel("Application"),
                dmc.MenuItem(
                    "Settings", leftSection=DashIconify(icon="tabler:settings")
                ),
                dmc.MenuItem(
                    "Messages", leftSection=DashIconify(icon="tabler:message")
                ),
                dmc.MenuItem("Gallery", leftSection=DashIconify(icon="tabler:photo")),
                dmc.MenuItem("Search", leftSection=DashIconify(icon="tabler:search")),
                dmc.MenuDivider(),
                dmc.MenuLabel("Danger Zone"),
                dmc.MenuItem(
                    "Transfer my data",
                    leftSection=DashIconify(icon="tabler:arrows-left-right"),
                ),
                dmc.MenuItem(
                    "Delete my account",
                    leftSection=DashIconify(icon="tabler:trash"),
                    color="red",
                ),
            ]
        ),
    ],
    trigger="hover",
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Menu Selectors

| Selector      | Static Selector             | Description                            |
| ------------- | --------------------------- | -------------------------------------- |
| `dropdown`    | `.mantine-Menu-dropdown`    | Dropdown element                       |
| `arrow`       | `.mantine-Menu-arrow`       | Dropdown arrow                         |
| `overlay`     | `.mantine-Menu-overlay`     | Overlay element                        |
| `divider`     | `.mantine-Menu-divider`     | `Menu.Divider` root element            |
| `label`       | `.mantine-Menu-label`       | `Menu.Label` root element              |
| `item`        | `.mantine-Menu-item`        | `Menu.Item` root element               |
| `itemLabel`   | `.mantine-Menu-itemLabel`   | Label of `Menu.Item`                   |
| `itemSection` | `.mantine-Menu-itemSection` | Left and right sections of `Menu.Item` |
| `chevron`     | `.mantine-Menu-chevron`     | Sub menu chevron                       |



#### Menu Data Attributes

| Selector | Attribute       | Condition                             |
| -------- | --------------- | ------------------------------------- |
| `item`   | `data-disabled` | `disabled` prop is set on `Menu.Item` |

---

**a.** Want this table exported to HTML or reStructuredText?
**b.** Want a full CSS override example using these selectors in a Dash app?


### Keyword Arguments
#### Menu

- children (a list of or a singular dash component, string or number; optional):
    Menu content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- arrowOffset (number; optional):
    Arrow offset in px, `5` by default.

- arrowPosition (a value equal to: 'center', 'side'; optional):
    Arrow position.

- arrowRadius (number; optional):
    Arrow `border-radius` in px, `0` by default.

- arrowSize (number; optional):
    Arrow size in px, `7` by default.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- clickOutsideEvents (list of strings; optional):
    Events that trigger outside clicks.

- closeDelay (number; optional):
    Close delay in ms, applicable only to trigger="hover" variant.

- closeOnClickOutside (boolean; optional):
    Determines whether dropdown should be closed on outside clicks.

- closeOnEscape (boolean; optional):
    Determines whether dropdown should be closed when Escape key is
    pressed.

- closeOnItemClick (boolean; optional):
    Determines whether Menu should be closed when item is clicked.

- defaultOpened (boolean; optional):
    Uncontrolled menu initial opened state.

- disabled (boolean; optional):
    If set, popover dropdown will not be rendered.

- floatingStrategy (a value equal to: 'absolute', 'fixed'; optional):
    Changes floating ui [position
    strategy](https://floating-ui.com/docs/usefloating#strategy),
    `'absolute'` by default.

- keepMounted (boolean; optional):
    If set dropdown will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead.

- loop (boolean; optional):
    Determines whether arrow key presses should loop though items
    (first to last and last to first).

- menuItemTabIndex (a value equal to: 0, -1; optional):
    Set the `tabindex` on all menu items. Defaults to -1.

- middlewares (dict; optional):
    Floating ui middlewares to configure position handling, `{ flip:
    True, shift: True, inline: False }` by default.

    `middlewares` is a dict with keys:

- offset (number; optional):
    Offset of the dropdown element, `8` by default.

- openDelay (number; optional):
    Open delay in ms, applicable only to trigger="hover" variant.

- opened (boolean; optional):
    Controlled menu opened state.

- overlayProps (dict; optional):
    Props passed down to `Overlay` component.

- portalProps (dict; optional):
    Props to pass down to the `Portal` when `withinPortal` is True.

- position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional):
    Dropdown position relative to the target element, `'bottom'` by
    default.

- positionDependencies (list of boolean | number | string | dict | lists; optional):
    `useEffect` dependencies to force update dropdown position, `[]`
    by default.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius,
    `theme.defaultRadius` by default.

- returnFocus (boolean; optional):
    Determines whether focus should be automatically returned to
    control when dropdown closes, `False` by default.

- shadow (optional):
    Key of `theme.shadows` or any other valid CSS `box-shadow` value.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- transitionProps (dict; optional):
    Props passed down to the `Transition` component that used to
    animate dropdown presence, use to configure duration and animation
    type, `{ duration: 150, transition: 'fade' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether dropdown should trap focus of keyboard events.

- trigger (a value equal to: 'click', 'hover', 'click-hover'; optional):
    Event which should open menu.

- variant (string; optional)

- width (string | number; optional):
    Dropdown width, or `'target'` to make dropdown width the same as
    target element, `'max-content'` by default.

- withArrow (boolean; optional):
    Determines whether component should have an arrow, `False` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be displayed when the
    dropdown is opened, `False` by default.

- withinPortal (boolean; optional):
    Determines whether dropdown should be rendered within the
    `Portal`, `True` by default.

- zIndex (string | number; optional):
    Dropdown `z-index`, `300` by default.
#### MenuTarget

- children (a list of or a singular dash component, string or number; required):
    Content.

- boxWrapperProps (dict; optional):
    Target box wrapper props.

    `boxWrapperProps` is a dict with keys:
#### MenuDropdown

- children (a list of or a singular dash component, string or number; required):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.
#### MenuItem

- children (a list of or a singular dash component, string or number; optional):
    Item label.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- closeMenuOnClick (boolean; optional):
    Determines whether the menu should be closed when the item is
    clicked, overrides `closeOnItemClick` prop on the `Menu`
    component.

- color (optional):
    Key of `theme.colors` or any valid CSS color.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Disables item.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- href (string; optional):
    href if MenuItem is supposed to be used as a link.

- leftSection (a list of or a singular dash component, string or number; optional):
    Section displayed on the left side of the label.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- n_clicks (number; default 0):
    An integer that represents the number of times that this element
    has been clicked on.

- refresh (boolean; optional):
    Whether to refresh the page.

- rightSection (a list of or a singular dash component, string or number; optional):
    Section displayed on the right side of the label.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- target (a value equal to: '_blank', '_self'; optional):
    Target if MenuItem is supposed to be used as a link.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.
#### MenuDivider

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.
#### MenuLabel

- children (a list of or a singular dash component, string or number; required):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.