Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface BaseDropdownMenuProps

remarks

@since 5.0.0

Hierarchy

Index

Properties

anchor?: PositionAnchor

The PositionAnchor to use for the menu. Here's the default value for the anchor:

  • horizontal - BELOW_CENTER_ANCHOR
  • a submenu - TOP_RIGHT_ANCHOR
  • default - TOP_INNER_RIGHT_ANCHOR
appear?: boolean

Boolean if the transition should occur immediately once the component mounts if the TransitionOptions.transitionIn is true

defaultvalue

false

className?: string

An optional className to be merged with the transition classes.

classNames?: CSSTransitionClassNames
see

vertical

see

SCALE_CLASSNAMES

see

SCALE_Y_CLASSNAMES

defaultvalue

vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES

closeOnResize?: boolean

Boolean if the menu should close instead of repositioning itself if the browser window is resized.

defaultvalue

false

closeOnScroll?: boolean

Boolean if the menu should close if the page is scrolled. The default behavior is to just update the position of the menu relative to the menu button until it can no longer be visible within the viewport.

defaultvalue

false

disableFocusOnMount?: boolean

Boolean if the menu component should not gain focus once it has mounted. This should really only be set to true if the enter transition has been disabled.

defaultvalue

timeout === 0

disableFocusOnUnmount?: boolean

Boolean if the toggle element should no longer gain focus when the menu loses visibility.

Note: The toggle element will not gain focus if:

  • the menu closed via resizing the browser window
  • the menu closes because the menu is no longer within the viewport
  • the current document.activeElement has moved outside of the menu
    • this generally means the MenuItem's action cause the focus to move already
  • the current document.activeElement is an link (<a href="">)
    • links should generally handle focus behavior themselves
defaultvalue

timeout === 0

enter?: boolean

Boolean if the transition should occur whenever the TransitionOptions.transitionIn is switch to true after the component has been rendered in the DOM.

defaultvalue

true

exit?: boolean

Boolean if the transition should occur whenever the TransitionOptions.transitionIn is switch to false after the component has been rendered in the DOM.

defaultvalue

true

fixedPositionOptions?: Readonly<CalculateFixedPositionOptions>

{@inheritDoc CalculateFixedPositionOptions}

horizontal?: boolean

Boolean if the menu should be rendered horizontally instead of vertically. This will also update the aria-orientation.

defaultvalue

false

menuClassName?: string

An optional className that should be passed to the menu component.

menuLabel?: string

An optional aria-label that should be applied to the Menu component. If this is undefined, an aria-labelledby will be provided to the Menu instead linking to the id of the Button.

menuProps?: Readonly<Omit<MenuWidgetProps, "children" | "id">>

Any additional props that should be passed to the Menu component.

Note: use the menuStyle and menuClassName props instead of including style or className here.

menuStyle?: CSSProperties

An optional style object that should be merged with the menu's fixed positioning styles.

onEnter?: TransitionEnterHandler

This function will be called once the TransitionStage has been set to "enter".

see

TransitionEnterHandler

onEntered?: TransitionEnterHandler

This function will be called once the TransitionStage has been set to "entering".

see

TransitionEnterHandler

onEntering?: TransitionEnterHandler

This function will be called once the TransitionStage has been set to "enter".

see

TransitionEnterHandler

onExit?: TransitionExitHandler

This function will be called once the TransitionStage has been set to "entered".

see

TransitionEnterHandler

onExited?: TransitionExitHandler

This function will be called once the TransitionStage has been set to "exited".

see

TransitionExitHandler

onExiting?: TransitionExitHandler

This function will be called once the TransitionStage has been set to "exiting".

see

TransitionExitHandler

portal?: boolean

Boolean if the portal should be used.

portalInto?: PortalInto
portalIntoId?: string
preventScroll?: boolean

Boolean if the page should no longer be scrollable while the menu is visible.

defaultvalue

false

renderAsSheet?: RenderMenuAsSheet

{@inheritDoc RenderMenuAsSheet}

sheetClassName?: string

An optional className that should be passed to the sheet component.

sheetFooter?: ReactNode

Any children to render below the sheet's menu implementation. This would normally be something like a <DialogFooter>.

defaultvalue

null

sheetHeader?: ReactNode

Any children to render above the sheet's menu implementation. This would normally be something like a <DialogHeader> or AppBar.

defaultvalue

null

sheetMenuProps?: HTMLAttributes<HTMLDivElement>

Any additional props that should be added to the sheet's menu implementation. You probably won't ever need to use this.

sheetPosition?: SheetPosition
see

SheetPosition

defaultvalue

"bottom"

sheetProps?: Readonly<Omit<SheetProps, "children" | "id" | "visible" | "onRequestClose">>

Any additional props that should be passed to the Sheet component.

Note: use the sheetStyle and sheetClassName props instead of including style or className here.

sheetStyle?: CSSProperties

An optional style object that should be passed to the sheet.

sheetVerticalSize?: SheetVerticalSize
see

SheetVerticalSize

defaultvalue

"touch"

temporary?: boolean
timeout?: TransitionTimeout

{@inheritDoc TransitionTimeout}

Methods

  • getFixedPositionOptions(): Readonly<CalculateFixedPositionOptions>

Generated using TypeDoc