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';Nome do componente
The nameMuiMenu can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente Popover também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| open* | bool | false | Control the popup` open state. |
| anchorEl | HTML element | func | A HTML element, or a function that returns it. It's used to set the position of the menu. | |
| autoFocus | bool | true | 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. |
| children | node | Menu contents, normally MenuItems. | |
| classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| disableAutoFocusItem | bool | false | 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. |
| MenuListProps | object | {} | Props applied to the MenuList element. |
| onClose | func | Callback fired when the component requests to be closed. Signature: function(event: object, reason: string) => voidevent: The event source of the callback. reason: Can be: "escapeKeyDown", "backdropClick", "tabKeyDown". | |
| PopoverClasses | object | classes prop applied to the Popover element. | |
| sx | Array<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' |
| TransitionProps | object | {} | 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
Embora não explicitamente documentado acima, as propriedades do componente Popover também estão disponíveis em Menu. Você pode tirar vantagem disso para manipular componentes aninhados.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiMenu-root | Estilos aplicados ao elemento raiz. |
| paper | .MuiMenu-paper | Estilos aplicados a the Paper component. |
| list | .MuiMenu-list | Estilos aplicados a the List component via `MenuList`. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- Com um nome de classe global.
- Com um nome de regra como parte da propriedade
styleOverridesdo componente em um tema personalizado.