Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface BaseMenuHookOptions

This type was created since the useContextMenu only requires the menu related props from the useMenu hook and I didn't want to duplicate the information between the two.

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
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

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

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}

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