Context Menu Popover

@# Context Menu Popover

Consider Context Menu first

The APIs described on this page are lower-level and have some limitations compared to Context Menu, so you should try that API first to see if it addresses your use case.

Context Menu Popover is a lower-level API for Context Menu which does not hook up any interaction handlers for you and simply renders an opinionated Popover at a particular target offset on the page through a Portal.

@reactExample ContextMenuPopoverExample

@## Declarative API

Use the <ContextMenuPopover> component like any other React component in your tree. Note that this is a controlled component which requires its isOpen and targetOffset props to be defined.

@interface ContextMenuPopoverProps

@## Imperative API

Two functions are provided as an imperative API for showing and hiding a singleton Context Menu Popover on the page:

export function showContextMenu(props: ContextMenuPopoverProps, options?: ShowContextMenuOptions): void;
export function hideContextMenu(): void;

@interface ShowContextMenuOptions

These are useful in some cases when working with imperative code that does not follow typical React paradigms. Note that these functions come with come caveats, and thus they should be used with caution:

• they rely on global state stored in Blueprint library code.
• they create a new React DOM tree via ReactDOMClient.createRoot() which means they do not preserve any existing React context from the calling code.
• they do not automatically detect dark theme, so you must manualy set the { isDarkTheme: true } property