Top
Menu - Positioning menus
Menu
<Menu /> positioning is an important consideration for this component, especially when used as a context menu, or when menus have other submenus, that have to be constrained in a specific area of the screen.
Therefore, we've baked smart positioning right into the <Menu /> component.
There are only a few props you have to be aware of in order to fully control the position of your menus and submenus. We're explaining those props in this section, complete with examples.
In the example below, you can see how we used the <Menu /> component as a context-menu:
It's important that you're aligning the <Menu /> to event.clientX and event.clientY which are relative to the browser viewport, since aligning is done with this in mind. Make sure you're not using event.pageX/Y.
In the example above there are a number of props being used, so we're explaining those below.
constrainTo is used to tell the <Menu /> to always try to display itself (and its submenus) in the specified area.
Valid values for constrainTo are:
  • A string to be used with document.querySelector. In this case, it will be used to retrieve the first ancestor matching the given selector. So elements are queried upwards in the hierarchy, starting from the <Menu />, until one matches. When one is found, the <Menu /> will be constrained to the bounding client rect of the element.
  • A reference to a HTMLElement in the page - the <Menu /> will be constrained to the bounding client rect of the element.
  • An object similar to the one returned by getBoundingClientRect (containing either top,left,bottom,right or top,left,width,height) with coordinates relative to the viewport - see getBoundingClientRect docs on MDN.
  • A function returning any of the above.
When you're using alignTo, you're telling the <Menu /> which should be the anchor point (or region/rect) to which you're aligning the <Menu />.
Valid values for alignTo are:
  • a point object with top,left - coordinates relative to the browser viewport.
  • a rect object with top,left,bottom,right (or top,left,width,height) which is relative to the browser viewport.
  • a string to be used as query selector - will be passed to document.querySelector. getBoundingClientRect will be called on the resulting HTMLElement.
  • an HTMLElement, in which case, its bounding client rect will be used.
  • A function returning any of the above.
When you're using alignTo you will very soon also need alignPositions. This tells the <Menu /> how to position itself relative to the alignTo anchor point/region.
The default value for alignPositions is ['tl-tr', 'bl-br', 'tr-tl', 'br-bl'] (for left-to-right, which is the default).
This means:
  • 'tl-tr' - align the top-left of the <Menu /> to the top-right of alignTo.
  • 'bl-br' - align the bottom-left of the <Menu /> to the bottom-right of alignTo.
  • 'tr-tl' - align the top-right of the <Menu /> to the top-left of alignTo.
  • 'br-bl' - align the bottom-right of the <Menu /> to the bottom-right of alignTo.
There are a number of other values supported in by alignTo, which you can find described in the alignTo docs here.
alignPositions is an array, since the <Menu /> will try to align itself relative to alignTo in the given constraints (specified by constrainTo) , but might not be able to satisfy the first position, so it tries the second one, the third and so on, until it finds a matching valid align position. If none is found, the first align position is used.
The first example specifies autoFocus, which focuses the <Menu /> when rendered.
onDismiss is called when the <Menu /> loses focus, so you can hide the <Menu /> - just skip rendering it.