Interface MenuProps

interface MenuProps {
    anchorEl?:
        | null
        | Element
        | (() => Element)
        | PopoverVirtualElement
        | (() => PopoverVirtualElement);
    anchorOrigin?: PopoverOrigin;
    anchorPosition?: PopoverPosition;
    anchorReference?: PopoverReference;
    bottomContent?: ReactNode;
    bottomSheetMaxHeight?: MaxHeight<string | number>;
    children?: ReactNode;
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    elevation?: number;
    id?: string;
    lang?: "sv" | "en";
    LeftButtonProps?: ButtonBaseOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLButtonElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement>;
    },
        | "className"
        | "style"
        | "children"
        | "classes"
        | "sx"
        | "tabIndex"
        | "disabled"
        | "action"
        | "centerRipple"
        | "disableRipple"
        | "disableTouchRipple"
        | "focusRipple"
        | "focusVisibleClassName"
        | "LinkComponent"
        | "onFocusVisible"
        | "TouchRippleProps"
        | "touchRippleRef"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & LinkProps & {
        customAttribute?: {
            attribute: string;
            value: string | number;
        };
        fullWidth?: boolean;
        isLoading?: boolean;
        LinkComponent?: ElementType<any, (keyof IntrinsicElements)>;
        sx?: SxProps<Theme>;
    } & {
        label: string;
    };
    maxWidth?: number;
    onClose?: (() => void);
    open: boolean;
    popoverMaxHeight?: MaxHeight<string | number>;
    RightButtonProps?: ButtonBaseOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLButtonElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement>;
    },
        | "className"
        | "style"
        | "children"
        | "classes"
        | "sx"
        | "tabIndex"
        | "disabled"
        | "action"
        | "centerRipple"
        | "disableRipple"
        | "disableTouchRipple"
        | "focusRipple"
        | "focusVisibleClassName"
        | "LinkComponent"
        | "onFocusVisible"
        | "TouchRippleProps"
        | "touchRippleRef"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & LinkProps & {
        customAttribute?: {
            attribute: string;
            value: string | number;
        };
        fullWidth?: boolean;
        isLoading?: boolean;
        LinkComponent?: ElementType<any, (keyof IntrinsicElements)>;
        sx?: SxProps<Theme>;
    } & {
        label: string;
    };
    role?: AriaRole;
    showButtons?: boolean;
    showCloseButton?: boolean;
    showTitle?: boolean;
    subheading?: string;
    sx?: SxProps<Theme>;
    title: string;
    topContent?: ReactNode;
    transformOrigin?: PopoverOrigin;
    variant?: "popover" | "automatic" | "bottomsheet";
}

Properties

anchorEl? anchorOrigin? anchorPosition? anchorReference? bottomContent? bottomSheetMaxHeight? children? customAttribute? elevation? id? lang? LeftButtonProps? maxWidth? onClose? open popoverMaxHeight? RightButtonProps? role? showButtons? showCloseButton? showTitle? subheading? sx? title topContent? transformOrigin? variant?

Properties

OptionalanchorEl

anchorEl?:
    | null
    | Element
    | (() => Element)
    | PopoverVirtualElement
    | (() => PopoverVirtualElement)

Ref to the element used as the Popover anchor.

OptionalanchorOrigin

anchorOrigin?: PopoverOrigin

The point on the anchor where the popover's anchorEl will attach to.

OptionalanchorPosition

anchorPosition?: PopoverPosition

Position of the menu popup.

OptionalanchorReference

anchorReference?: PopoverReference

Determines which anchor prop to refer to when setting the position of the popover.

OptionalbottomContent

bottomContent?: ReactNode

Content to be rendered at the bottom of the menu, below the menu items.

OptionalbottomSheetMaxHeight

bottomSheetMaxHeight?: MaxHeight<string | number>

Height limit for the BottomSheet variant. Use with caution, as it can affect accessibility text zoom. The preferred value is calc(100% - NN px) to ensure content is not cut off during zoom.

Optionalchildren

children?: ReactNode

The children of the component.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

Optionalelevation

elevation?: number

The elevation of the popover.

Optionalid

id?: string

A unique ID for the menu, used for WAI-ARIA and other purposes.

Optionallang

lang?: "sv" | "en"

Language used for internal translations.

OptionalLeftButtonProps

LeftButtonProps?: ButtonBaseOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLButtonElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement>;
},
    | "className"
    | "style"
    | "children"
    | "classes"
    | "sx"
    | "tabIndex"
    | "disabled"
    | "action"
    | "centerRipple"
    | "disableRipple"
    | "disableTouchRipple"
    | "focusRipple"
    | "focusVisibleClassName"
    | "LinkComponent"
    | "onFocusVisible"
    | "TouchRippleProps"
    | "touchRippleRef"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & LinkProps & {
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    fullWidth?: boolean;
    isLoading?: boolean;
    LinkComponent?: ElementType<any, (keyof IntrinsicElements)>;
    sx?: SxProps<Theme>;
} & {
    label: string;
}

Props for the left bottom button, including a label.

Type declaration

  • OptionalcustomAttribute?: {
        attribute: string;
        value: string | number;
    }

    Custom attribute for testing. Clickable and requested subcomponents will have a suffix "-[ComponentName]".

    • attribute: string
    • value: string | number
  • OptionalfullWidth?: boolean

    If set to true, the button will occupy the full width of its container.

  • OptionalisLoading?: boolean

    If true, a loading skeleton will be rendered instead of the component.

  • OptionalLinkComponent?: ElementType<any, (keyof IntrinsicElements)>

    Component used to render a link if the href prop is provided.

  • Optionalsx?: SxProps<Theme>

    Prop for defining system overrides and additional CSS styles.

OptionalmaxWidth

maxWidth?: number

Width limit, does not apply for mobile bottom sheets.

OptionalonClose

onClose?: (() => void)

Callback fired when the component requests to be closed.

open

open: boolean

Controls whether the menu is open or closed.

OptionalpopoverMaxHeight

popoverMaxHeight?: MaxHeight<string | number>

Height limit for the Popover variant. Note: Must include the unit (e.g., px, rem).

OptionalRightButtonProps

RightButtonProps?: ButtonBaseOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLButtonElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement>;
},
    | "className"
    | "style"
    | "children"
    | "classes"
    | "sx"
    | "tabIndex"
    | "disabled"
    | "action"
    | "centerRipple"
    | "disableRipple"
    | "disableTouchRipple"
    | "focusRipple"
    | "focusVisibleClassName"
    | "LinkComponent"
    | "onFocusVisible"
    | "TouchRippleProps"
    | "touchRippleRef"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & LinkProps & {
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    fullWidth?: boolean;
    isLoading?: boolean;
    LinkComponent?: ElementType<any, (keyof IntrinsicElements)>;
    sx?: SxProps<Theme>;
} & {
    label: string;
}

Props for the right bottom button, including a label.

Type declaration

  • OptionalcustomAttribute?: {
        attribute: string;
        value: string | number;
    }

    Custom attribute for testing. Clickable and requested subcomponents will have a suffix "-[ComponentName]".

    • attribute: string
    • value: string | number
  • OptionalfullWidth?: boolean

    If set to true, the button will occupy the full width of its container.

  • OptionalisLoading?: boolean

    If true, a loading skeleton will be rendered instead of the component.

  • OptionalLinkComponent?: ElementType<any, (keyof IntrinsicElements)>

    Component used to render a link if the href prop is provided.

  • Optionalsx?: SxProps<Theme>

    Prop for defining system overrides and additional CSS styles.

Optionalrole

role?: AriaRole

Changes the aria role of the <MenuList> component.

OptionalshowButtons

showButtons?: boolean

If true, the popup will display close and done buttons.

OptionalshowCloseButton

showCloseButton?: boolean

If true, the popup will display a close button in the top right corner.

OptionalshowTitle

showTitle?: boolean

If true, the title will be displayed at the top.

Optionalsubheading

subheading?: string

A caption shown under the title.

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

title

title: string

Mandatory title used for accessibility labels. If you want the title to be visible as well, use the showTitle prop.

OptionaltopContent

topContent?: ReactNode

Optional content to be rendered at the top of the menu.

OptionaltransformOrigin

transformOrigin?: PopoverOrigin

The point on the popover which will attach to the anchor's origin.

Optionalvariant

variant?: "popover" | "automatic" | "bottomsheet"

The variant of the menu popup to display. The "automatic" option will render based on the current device width.

Settings

Member Visibility

On This Page

Properties