@react-md/menu | react-md

Index

Type aliases

Variables

Functions

Type aliases

BaseMenuBarWidgetProps

BaseMenuBarWidgetProps: Omit<ListProps, "role" | "horizontal">

remarks: @since 5.0.0

DropdownMenuProps

DropdownMenuProps: DropdownMenuButtonProps | DropdownMenuItemProps

I couldn't really figure out a nice way to have the type inferred automatically based on parent menus, so this is the "best" way to allow some type-safety and autocompletion I could think of for DropdownMenus.

All this type will do is make sure you don't apply both button specific props with menu item specific props at the same time but won't catch any errors around providing button props to a menuitem or menuitem props to a button.

remarks: @since 5.0.0

MenuBarProps

MenuBarProps: MenuBarWidgetProps & HoverableMenuBar

remarks: @since 5.0.0

MenuBarWidgetProps

MenuBarWidgetProps: LabelRequiredForA11y<BaseMenuBarWidgetProps>

remarks: @since 5.0.0

MenuButtonIconRotatorProps

MenuButtonIconRotatorProps: Omit<IconRotatorProps, "children" | "rotated">

remarks: @since 5.0.0

MenuButtonTextIconSpacingProps

MenuButtonTextIconSpacingProps: Pick<TextIconSpacingProps, "icon" | "iconAfter">

remarks: @since 5.0.0

MenuConfigurationContext

MenuConfigurationContext: Required<MenuConfiguration>

remarks: @since 5.0.0

MenuItemGroupProps

MenuItemGroupProps: LabelRequiredForA11y<Omit<ListProps, "role">> & { children: ReactNode }

remarks: @since 5.0.0

MenuItemLinkWithComponentProps

MenuItemLinkWithComponentProps: MenuItemLinkProps & ListItemLinkWithComponentProps

remarks: @since 2.0.0

MenuRendererProps

MenuRendererProps: ProvidedMenuProps & BaseMenuRendererProps & MenuListProps & MenuTransitionProps & { children: ReactNode; menuRef: Ref<HTMLDivElement>; visible: boolean; onRequestClose: any }

internal
remarks: @since 5.0.0

MenuTransitionProps

MenuTransitionProps: Omit<ScaleTransitionHookOptions<HTMLDivElement>, "transitionIn" | "vertical" | "nodeRef">

remarks: @since 5.0.0

MenuVisibilityContext

MenuVisibilityContext: Pick<HoverModeHookReturnValue, "visible" | "setVisible">

remarks: @since 5.0.0

ProvidedMenuProps

ProvidedMenuProps: Required<Pick<MenuProps, "id" | "style" | "visible" | "onClick" | "onKeyDown">> & Required<FixedPositioningTransitionCallbacks> & RequireAtLeastOne<LabelA11y>

Since the useMenu hook was designed to work with react-md components, this is an object of props that should be passed to the Menu component to get the correct menu functionality.

remarks: @since 5.0.0

RenderMenuAsSheet

RenderMenuAsSheet: boolean | "phone"

This allows the menu to be conditionally rendered as a Sheet instead of a menu.

false - always render as a Menu
true - always render as a Sheet
"phone" - render as a sheet only when the AppSize is considered phone (isPhone === true).

defaultvalue: false
remarks: @since 5.0.0

Variables

Const DEFAULT_MENU_CONFIGURATION

DEFAULT_MENU_CONFIGURATION: Readonly<MenuConfigurationContext> = ...

remarks: @since 5.0.0

Const Menu

This component conditionally renders the MenuWidget with the MenuKeyboardFocusProvider based on the visible prop with a CSS transition that can be configured.

remarks: @since 5.0.0

Const MenuButton

MenuButton: ForwardRefExoticComponent<MenuButtonProps & RefAttributes<HTMLButtonElement>> = ...

This is just an internal component that handles rendering the button for a DropdownMenu with a conditional dropdown icon.

internal
remarks: @since 5.0.0

Const MenuItem

MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLLIElement>> = ...

This component is used as an "action" within a Menu/DropdownMenu that implements some keyboard focus behavior. This component should generally have an onClick event handler.

remarks: @since 5.0.0

Const MenuItemButton

MenuItemButton: ForwardRefExoticComponent<MenuItemButtonProps & RefAttributes<HTMLLIElement>> = ...

This is just an internal component that handles rendering a submenu as a menuitem for a DropdownMenu with a conditional dropdown icon.

internal
remarks: @since 5.0.0

Const MenuItemGroup

MenuItemGroup: ForwardRefExoticComponent<(Pick<Omit<ListProps, "role">, "horizontal" | "className" | "children" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dense" | "ordered"> & Required<Pick<Omit<ListProps, "role">, "aria-label">> & Partial<Pick<Omit<ListProps, "role">, "aria-labelledby">> & { children: ReactNode } & RefAttributes<ListElement>) & (Pick<Omit<ListProps, "role">, "horizontal" | "className" | "children" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dense" | "ordered"> & Required<Pick<Omit<ListProps, "role">, "aria-labelledby">> & Partial<Pick<Omit<ListProps, "role">, "aria-label">> & { children: ReactNode } & RefAttributes<ListElement>)> = ...

If a menu or menubar contains more than one group of menuitemradio elements, or if the menu contains one group and other, unrelated menu items, authors SHOULD nest each set of related menuitemradio elements in an element using the group role, and authors SHOULD delimit the group from other menu items with an element using the separator role.

see

https://www.w3.org/TR/wai-aria-1.1/#menuitemradio

example

Simple Example

import { ReactElement, useState } from "react";
import { DropdownMenu, MenuItemGroup, MenuItemSeparator } from "@react-md/menu";
import { MenuItemRadio, MenuItemSwitch } from "@react-md/form";

function Example(): ReactElement {
  const [value, setValue] = useState("value1");
  const [checked, setChecked] = useState(false);

  return (
    <DropdownMenu id="dropdown-menu-id" buttonChildren="Button">
      <MenuItemSwitch
        id="switch-id"
        checked={checked}
        onCheckedChange={nextChecked => setChecked(nextChecked)}
      >
        Light mode
      </MenuItemSwitch>
      <MenuItemSeparator />
      <MenuItemGroup aria-label="My Group Label">
        <MenuItemRadio
          id="radio-1"
          checked={value === "value1"}
          onCheckedChange={() => setValue("value1")}
        >
          Radio 1
        </MenuItemRadio>
        <MenuItemRadio
          id="radio-2"
          checked={value === "value2"}
          onCheckedChange={() => setValue("value2")}
        >
          Radio 2
        </MenuItemRadio>
        <MenuItemRadio
          id="radio-3"
          checked={value === "value3"}
          onCheckedChange={() => setValue("value3")}
        >
          Radio 3
        </MenuItemRadio>
      </MenuItemGroup>
    </DropdownMenu>
  );
}

remarks

@since 5.0.0

Const MenuItemLink

MenuItemLink: ForwardRefExoticComponent<(MenuItemLinkProps & RefAttributes<HTMLAnchorElement>) & (Pick<MenuItemLinkWithComponentProps, string | number> & RefAttributes<HTMLAnchorElement>)> = ...

This is a wrapper for the ListItemLink component that allows for the correct keyboard focus behavior within Menus. Just like the ListItemLink, set a ListItemLinkProps.component prop to your custom Link if needed.

remarks: @since 2.0.0

Const MenuItemSeparator

MenuItemSeparator: ForwardRefExoticComponent<MenuItemSeparatorProps & RefAttributes<HTMLLIElement>> = ...

This component renders a <li role="separator"> with the divider styles. It will also automatically render itself vertically instead of horizontally if the menu is rendering horizontally.

remarks: @since 5.0.0 Renders as an <li> instead of a <div> or <hr />.

Const MenuWidget

This component implements the custom keyboard movement for a menu widget. The MenuKeyboardFocusProvider must be a parent component for this custom focus behavior to work.

Note: This is probably an internal only component since the Menu has more functionality and includes this component.

internal
remarks: @since 5.0.0

Functions

DropdownMenu

DropdownMenu(__namedParameters: DropdownMenuProps): ReactElement

This component is a preset for creating dropdown menus using the useMenu hook which provides the visibility behavior and other functionality for menus. This will render as a <Button> by default but can be rendered as a <MenuItem> by existing as a child of another DropdownMenu.

Most of the top-level props will be passed directly to the Button or MenuItem components with the exception for the children. The children for the Button or MenuItem can be set with the buttonChildren prop since the main children should be the Menu's children.

example

Simple Example

import type { ReactElement } from "react";
import { DropdownMenu, MenuItem } from "@react-md/menu";

function Example() {
  return (
    <DropdownMenu id="example-dropdown-menu" buttonChildren="Dropdown">
      <MenuItem onClick={() => console.log('Clicked Item 1')}>
        Item 1
      </MenuItem>
      <MenuItem onClick={() => console.log('Clicked Item 2')}>
        Item 2
      </MenuItem>
    </DropdownMenu>
  );
}

example

Nested Dropdown Menus

import type { ReactElement } from "react";
import { DropdownMenu, MenuItem } from "@react-md/menu";

function Example() {
  return (
    <DropdownMenu id="example-dropdown-menu" buttonChildren="Dropdown">
      <MenuItem onClick={() => console.log('Clicked Item 1')}>
        Item 1
      </MenuItem>
      <MenuItem onClick={() => console.log('Clicked Item 2')}>
        Item 2
      </MenuItem>
      <DropdownMenu
        id="nested-dropdown-menu"
        buttonChildren="Nested Dropdown"
      >
        <MenuItem onClick={() => console.log('Clicked Item 1')}>
          Nested Item 1
        </MenuItem>
        <MenuItem onClick={() => console.log('Clicked Item 2')}>
          Nested Item 2
        </MenuItem>
      </DropdownMenu>
    </DropdownMenu>
  );
}

remarks

@since 5.0.0

Parameters

__namedParameters: DropdownMenuProps

Returns ReactElement

MenuBar

MenuBar(__namedParameters: MenuBarProps): ReactElement

The MenuBar component is used to link child DropdownGroups' visibility together and following the specs for a menubar.

example

Simple Example

import type { ReactElement } from "react";
import { MenuBar, DropdownMenu, MenuItem } from "@react-md/menu";

function Example(): ReactElement {
  return (
    <MenuBar aria-label="Example">
      <DropdownMenu id="menubar-item-1" buttonChildren="Item 1">
        <MenuItem>Sub-item 1</MenuItem>
        <MenuItem>Sub-item 2</MenuItem>
      </DropdownMenu>
      <DropdownMenu id="menubar-item-2" buttonChildren="Item 2">
        <MenuItem>Sub-item 1</MenuItem>
        <MenuItem>Sub-item 2</MenuItem>
      </DropdownMenu>
    </MenuBar>
  );
}

remarks

@since 5.0.0

Parameters

__namedParameters: MenuBarProps

Returns ReactElement

MenuBarProvider

MenuBarProvider(__namedParameters: MenuBarProviderProps): ReactElement

- Defined in packages/menu/src/MenuBarProvider.tsx:128
internal
remarks
@since 5.0.0

Parameters
- __namedParameters: MenuBarProviderProps
Returns ReactElement

MenuBarWidget

MenuBarWidget(__namedParameters: MenuBarWidgetProps): ReactElement

- Defined in packages/menu/src/MenuBarWidget.tsx:37
This component implements the keyboard focus behavior for the MenuBar component and probably shouldn't be used externally.

remarks
@since 5.0.0

Parameters
- __namedParameters: MenuBarWidgetProps
Returns ReactElement

MenuConfigurationProvider

MenuConfigurationProvider(__namedParameters: MenuConfigurationProviderProps): ReactElement

- Defined in packages/menu/src/MenuConfigurationProvider.tsx:72
Note: This will always merge values with any parent MenuConfigurationProviders.

remarks
@since 5.0.0

Parameters
- __namedParameters: MenuConfigurationProviderProps
Returns ReactElement

MenuKeyboardFocusProvider

MenuKeyboardFocusProvider(__namedParameters: MenuKeyboardFocusProviderProps): ReactElement

- Defined in packages/menu/src/MenuKeyboardFocusProvider.tsx:12
remarks
@since 5.0.0

Parameters
- __namedParameters: MenuKeyboardFocusProviderProps
Returns ReactElement

MenuRenderer

MenuRenderer(__namedParameters: MenuRendererProps): ReactElement

- Defined in packages/menu/src/MenuRenderer.tsx:38
This component conditionally renders either the Menu or MenuSheet component based on the current menu configuration.

internal
remarks
@since 5.0.0

Parameters
- __namedParameters: MenuRendererProps
Returns ReactElement

MenuSheet

MenuSheet(__namedParameters: LabelRequiredForA11y<MenuSheetProps>): ReactElement

- Defined in packages/menu/src/MenuSheet.tsx:52
Implements a Menu using the Sheet component that probably shouldn't really be used externally.

remarks
@since 5.0.0

internal
Parameters
- __namedParameters: LabelRequiredForA11y<MenuSheetProps>
Returns ReactElement

MenuVisibilityProvider

MenuVisibilityProvider(__namedParameters: MenuVisibilityProviderProps): ReactElement

- Defined in packages/menu/src/MenuVisibilityProvider.tsx:66
internal
remarks
@since 5.0.0

Parameters
- __namedParameters: MenuVisibilityProviderProps
Returns ReactElement

useContextMenu

useContextMenu(options?: ContextMenuHookOptions): ContextMenuHookReturnValue

This hook controls the visibility and positioning for a context menu.

example

Simple Example

import type { ReactElement } from "react";
import [ Menu, MenuItem, useContextMenu ] from "@react-md/menu":

function Example(): ReactElement {
  const { menuProps, onContextMenu } = useContextMenu();

  return (
    <div onContextMenu={onContextMenu}>
      <textarea />
      <Menu {...menuProps}>
        <MenuItem>Cut</MenuItem>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
        <MenuItem>Undo</MenuItem>
      </Menu>
    </div>
  );
}

remarks

@since 5.0.0

Parameters

options: ContextMenuHookOptions = {}

The ContextMenuHookOptions

Returns ContextMenuHookReturnValue

the ContextMenuHookReturnValue

useMenu

useMenu<ToggleEl>(options: MenuHookOptions<ToggleEl>): MenuHookReturnValue<ToggleEl>

- Defined in packages/menu/src/useMenu.ts:166
This hook provides all the functionality for a menu to:
- toggle the Menu's visibility when the MenuButton or MenuItemButton has been clicked
- hide the Menu when an element outside of the Menu has been clicked
- hide the Menu when the Escape or Tab key has been pressed
- focus the Menu element when it gains visibility
- refocus the MenuButton or MenuItemButton when the menu loses visibility
- position the menu within the viewport with useFixedPositioning
- show the Menu when the ArrowRight key is pressed for a vertical MenuItemButton
- show the Menu when the ArrowDown key is pressed for a horizontal MenuItemButton
- hide the Menu when the ArrowRight key is pressed in a vertical submenu
- hide the Menu when the ArrowDown key is pressed in a horizontal submenu
- conditionally hide the Menu if the page is scrolled while the Menu is visible
- conditionally hide the Menu if the page is resized while the Menu is visible
- conditionally move focus to the next DropdownMenu with keyboard movement when inside of a MenuBar
- conditionally enable the visibility for a DropdownMenu when the mouse hovers over a MenuItemButton with a parent MenuBar that has been activated
- conditionally show/hide the Menu based on a parent MenuBar's activeId
This hook will probably never need to be used externally since it has been integrated into the DropdownMenu component and useContextMenu hook.
example
Simple Example
```
import { ReactElement, useState } from "react";
import { useMenu, Menu, MenuButton, MenuItem } from "@react-md/menu";

function Example(): ReactElement {
  const [visible, setVisible] = useState(false);
  const { menuRef, menuProps, toggleRef, toggleProps } = useMenu<
    HTMLButtonElement
  >({
    baseId: "custom-menu-button",
    visible,
    setVisible,
  });

  return (
    <>
      <MenuButton ref={toggleRef} {...toggleProps}>
        Button
      </MenuButton>
      <Menu ref={menuRef} {...menuProps}>
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuItem>Item 3</MenuItem>
      </Menu>
    </>
  );
}
```
remarks
@since 5.0.0
Type parameters
- ToggleEl: HTMLElement
Parameters
- options: MenuHookOptions<ToggleEl>
Returns MenuHookReturnValue<ToggleEl>

useMenuBarContext

useMenuBarContext(): Readonly<MenuBarContext>

- Defined in packages/menu/src/MenuBarProvider.tsx:89
internal
remarks
@since 5.0.0

Returns Readonly<MenuBarContext>

useMenuBarWidgetFocusId

useMenuBarWidgetFocusId(): string

- Defined in packages/menu/src/MenuBarWidget.tsx:21
remarks
@since 5.0.0

Returns string

useMenuConfiguration

useMenuConfiguration(overrides?: MenuConfiguration): Readonly<MenuConfigurationContext>

- Defined in packages/menu/src/MenuConfigurationProvider.tsx:39
This is probably just an internal only hook that allows you to get the MenuConfigurationContext with optional overrides.

remarks
@since 5.0.0

Parameters
- overrides: MenuConfiguration = {}
  
  An object of MenuConfiguration that would override the inherited context values if they are not undefined.
Returns Readonly<MenuConfigurationContext>
the MenuConfigurationContext with any overrides that were provided.

useMenuVisibility

useMenuVisibility(): Readonly<MenuVisibilityContext>

- Defined in packages/menu/src/MenuVisibilityProvider.tsx:50
This hook allows you control the visibility of a parent menu. The main use-case for this hook is adding a custom sheet header/footer.
example
Simple Example
```
function SheetFooter(): ReactElement {
  const { setVisible } = useMenuVisibility();

  return (
    <DialogFooter>
      <Button onClick={() => setVisible(false)}>Cancel</Button>
    </DialogFooter>
  );
}
```
remarks
@since 5.0.0
Returns Readonly<MenuVisibilityContext>
the MenuVisibilityContext

Index

Interfaces

Type aliases

Variables

Functions

Type aliases

BaseMenuBarWidgetProps

DropdownMenuProps

MenuBarProps

MenuBarWidgetProps

MenuButtonIconRotatorProps

MenuButtonTextIconSpacingProps

MenuConfigurationContext

MenuItemGroupProps

MenuItemLinkWithComponentProps

MenuRendererProps

MenuTransitionProps

MenuVisibilityContext

ProvidedMenuProps

RenderMenuAsSheet

Variables

Const DEFAULT_MENU_CONFIGURATION

Const Menu

Const MenuButton

Const MenuItem

Const MenuItemButton

Const MenuItemGroup

Const MenuItemLink

Const MenuItemSeparator

Const MenuWidget

Functions

DropdownMenu

Parameters

__namedParameters: DropdownMenuProps

Returns ReactElement

MenuBar

Parameters

__namedParameters: MenuBarProps

Returns ReactElement

MenuBarProvider

Parameters

__namedParameters: MenuBarProviderProps

Returns ReactElement

MenuBarWidget

Parameters

__namedParameters: MenuBarWidgetProps

Returns ReactElement

MenuConfigurationProvider

Parameters

__namedParameters: MenuConfigurationProviderProps

Returns ReactElement

MenuKeyboardFocusProvider

Parameters

__namedParameters: MenuKeyboardFocusProviderProps

Returns ReactElement

MenuRenderer

Parameters

__namedParameters: MenuRendererProps

Returns ReactElement

MenuSheet

Parameters

__namedParameters: LabelRequiredForA11y<MenuSheetProps>

Returns ReactElement

MenuVisibilityProvider

Parameters

__namedParameters: MenuVisibilityProviderProps

Returns ReactElement

useContextMenu

Parameters

options: ContextMenuHookOptions = {}

Returns ContextMenuHookReturnValue

useMenu

Type parameters

ToggleEl: HTMLElement

Parameters

options: MenuHookOptions<ToggleEl>

Returns MenuHookReturnValue<ToggleEl>

useMenuBarContext

Returns Readonly<MenuBarContext>

useMenuBarWidgetFocusId