Pular para o conteúdo

Menu API

Documentação da API para o componente React Menu . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Menu from '@mui/material/Menu';
// ou
import { Menu } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiMenu can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente Popover também estão disponíveis.

NomeTipoPadrãoDescrição
open*boolfalse
Control the popup` open state.
anchorElHTML element
| func
A HTML element, or a function that returns it. It's used to set the position of the menu.
autoFocusbooltrue
If true (Default) will focus the [role="menu"] if no focusable child is found. Disabled children are not focusable. If you set this prop to false focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise.
childrennode
Menu contents, normally MenuItems.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
disableAutoFocusItemboolfalse
When opening the menu will not focus the active item but the [role="menu"] unless autoFocus is also set to false. Not using the default means not following WAI-ARIA authoring practices. Please be considerate about possible accessibility implications.
MenuListPropsobject{}
Props applied to the MenuList element.
onClosefunc
Callback fired when the component requests to be closed.

Signature:
function(event: object, reason: string) => void
event: The event source of the callback.
reason: Can be: "escapeKeyDown", "backdropClick", "tabKeyDown".
PopoverClassesobject
classes prop applied to the Popover element.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
transitionDuration'auto'
| number
| { appear?: number, enter?: number, exit?: number }
'auto'
The length of the transition in ms, or 'auto'
TransitionPropsobject{}
Props applied to the transition element. By default, the element is based on this Transition component.
variant'menu'
| 'selectedMenu'
'selectedMenu'
The variant to use. Use menu to prevent selected items from impacting the initial focus.

O ref é encaminhado para o elemento raiz.

Herança

While not explicitly documented above, the props of the Popover component are also available on Menu. You can take advantage of this to target nested components.

CSS

Nome da regraClasse globalDescrição
root.MuiMenu-rootEstilos aplicados ao elemento raiz.
paper.MuiMenu-paperEstilos aplicados a the Paper component.
list.MuiMenu-listEstilos aplicados a the List component via `MenuList`.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações