Skip to main content

<NodeToolbar />

The node toolbar plugin component renders a toolbar that is attached to a node. The toolbar does not scale with the viewport so that the content of the toolbar is always readable.

info

The NodeToolbar component is available in reactflow version 11.3 and higher.

Usage Example

Default Behavior

Per default, the toolbar is connected to a node and visible only if the node is selected. If multiple nodes are selected, the toolbar is hidden again to prevent showing multiple toolbars at once. If you want to override this default behavior, you can set the isVisible prop by yourself.

Prop Types

position

Description:
The position of the toolbar relative the node.
Type:
Position ('top'`, 'right', 'bottom' or 'left')
Default:
top

offset

Description:
The margin between the node and the toolbar in pixels.
Type:
number
Default:
10

nodeId

Description:
The id(s) of the node(s) that the toolbar should be attached to. You can pass multiple ids to render a toolbar for a multi-selection. If nodeId is not set, the toolbar will be attached to the custom node that it is mounted in.
Type:
string | string[]
Default:
The id of the custom node where the <NodeToolbar /> is rendered

isVisible

Description:
Set this to true to show the toolbar. Overwrites the default behavior.
Type:
boolean
Default:
undefined

style

Description:
Toolbar style attributes
Type:
CSSProperties
Default:
undefined

className

Description:
Additional class name
Type:
string
Default:
undefined

Typescript

The interface of the NodeToolbar Prop Types are exported asNodeToolbarProps.

Npm Package

The NodeToolbar component is published under @reactflow/node-toolbar and can also be installed and used separately.