An AnchoredOverlay provides an anchor that will open a floating overlay positioned relative to the anchor.
The overlay can be opened and navigated using keyboard or mouse.
See also Overlay positioning.
<State default={false}>{([isOpen, setIsOpen]) => {const openOverlay = React.useCallback(() => setIsOpen(true), [setIsOpen])const closeOverlay = React.useCallback(() => setIsOpen(false), [setIsOpen])return (<AnchoredOverlayrenderAnchor={anchorProps => (<Button {...anchorProps} trailingIcon={TriangleDownIcon}>Click me to open</Button>)}open={isOpen}onOpen={openOverlay}onClose={closeOverlay}><Box display="flex" flexDirection="column" maxWidth="300px" padding={2}><p>This menu automatically receives a focus trap and focus zone. Use up/down keys to navigate between buttons</p><Button mb={1}>Button 1</Button><Button mb={1}>Button 2</Button><Button>Button 3</Button></Box></AnchoredOverlay>)}}</State>
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Determines whether the overlay portion of the component should be shown or not. |
| onOpen | (gesture: 'anchor-click' | 'anchor-key-press') => unknown | A callback that is called whenever the overlay is currently closed and an "open gesture" is detected. | |
| onClose | (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown | A callback that is called whenever the overlay is currently open and a "close gesture" is detected. | |
| renderAnchor | <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element | A custom function component used to render the anchor element. When renderAnchor is null, an anchorRef is required. | |
| anchorRef | React.RefObject<HTMLElement> | An override to the internal renderAnchor ref that will be used to position the overlay. When renderAnchor isnull, this can be used to make an anchor that is detached from AnchoredOverlay. | |
| anchorId | string | An override to the internal id that will be passed to the anchor. | |
| side | | 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right' | 'outside-bottom' | |
| align | 'start' | 'center' | 'end' | 'start' | |
| overlayProps | Partial<OverlayProps> | Props to be spread on the internal Overlay component. | |
| focusTrapSettings | Partial<FocusTrapHookSettings> | Settings to apply to the focus trap on the internal Overlay component. | |
| focusZoneSettings | Partial<FocusZoneHookSettings> | Settings to apply to the focus zone on the internal Overlay component. |