Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface MenuHookOptions<ToggleEl>

remarks

@since 5.0.0

Type parameters

  • ToggleEl: HTMLElement

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
baseId: string

This is the id for the toggle element for a DropdownMenu that is required for a11y. This is used to also create the Menu component's id as ${baseId}-menu.

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

disabled?: boolean

Boolean if the toggle component is currently disabled which will prevent the arrow keys from opening a menuitem's menu.

defaultvalue

false

fixedPositionOptions?: Readonly<CalculateFixedPositionOptions>

{@inheritDoc CalculateFixedPositionOptions}

floating?: FABPosition

This is just used to update the default anchor behavior.

see

FABPosition

defaultvalue

null

horizontal?: boolean

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

defaultvalue

false

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.

menuitem?: boolean

Boolean if the menu is being rendered as a menuitem instead of a button. Setting this to true implements the ProvidedMenuToggleProps.onKeyDown functionality.

defaultvalue

false

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

onExited?: TransitionExitHandler

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

see

TransitionExitHandler

onFixedPositionResize?: EventListener

An optional function to call if the page resizes while the menu is visible.

onFixedPositionScroll?: TransitionScrollCallback<HTMLElement, HTMLDivElement>

{@inheritDoc TransitionScrollCallback}

onMenuClick?: MouseEventHandler<HTMLDivElement>

An optional click handler to merge with the {@link MenuHookReturnValue.onClick} behavior.

onMenuKeyDown?: KeyboardEventHandler<HTMLDivElement>

An optional keydown handler to merge with the MenuHookReturnValue.menuProps behavior. Calling event.stopPropagation() will prevent the default behavior of closing the menu when the "Escape" key is pressed.

onToggleClick?: MouseEventHandler<ToggleEl>

An optional click handler to merge with the toggle visibility behavior. Calling event.stopPropagation() will prevent the default behavior from occurring.

onToggleKeyDown?: KeyboardEventHandler<ToggleEl>

An optional keydown handler to merge with the ProvidedMenuToggleProps.onKeyDown behavior.

onToggleMouseEnter?: MouseEventHandler<ToggleEl>

An optional keydown handler to merge with the ProvidedMenuToggleProps.onMouseEnter behavior.

onToggleMouseLeave?: MouseEventHandler<ToggleEl>

An optional keydown handler to merge with the ProvidedMenuToggleProps.onMouseLeave behavior.

preventScroll?: boolean

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

defaultvalue

false

setVisible: Dispatch<SetStateAction<boolean>>

This should be the second argument for the useState hook.

const [visible, setVisible] = useState(false);

This is used to update the visibility of the menu based on click and keyboard events.

style?: CSSProperties

An optional style object to merge with the Menu's fixed positioning style.

see

useFixedPositioning

see

FixedPositionStyle

visible: boolean

Boolean if the menu is currently visible.

Methods

  • getFixedPositionOptions(): Readonly<CalculateFixedPositionOptions>

Generated using TypeDoc