Toolbar API - Syncfusion® React

The Toolbar component helps users to effectively organize and quickly access frequently used actions. It provides multiple overflow handling modes to accommodate different UI requirements and screen sizes.

Usage

To import and use the Toolbar component in your application, use the following code snippet:

import { Toolbar, ToolbarItem, ToolbarSeparator, ToolbarSpacer, OverflowMode } from "@syncfusion/react-navigations";

<Toolbar overflowMode={OverflowMode.Popup} style={{ width: '300px' }}>
<ToolbarItem><Button>Cut</Button></ToolbarItem>
<ToolbarItem><Button>Copy</Button></ToolbarItem>
<ToolbarSeparator />
<ToolbarItem><Button>Paste</Button></ToolbarItem>
<ToolbarSpacer />
<ToolbarItem><Button>Help</Button></ToolbarItem>
</Toolbar>

import { Toolbar, ToolbarItem, ToolbarSeparator, ToolbarSpacer, OverflowMode } from "@syncfusion/react-navigations";

<Toolbar overflowMode={OverflowMode.Popup} style={{ width: '300px' }}>
<ToolbarItem><Button>Cut</Button></ToolbarItem>
<ToolbarItem><Button>Copy</Button></ToolbarItem>
<ToolbarSeparator />
<ToolbarItem><Button>Paste</Button></ToolbarItem>
<ToolbarSpacer />
<ToolbarItem><Button>Help</Button></ToolbarItem>
</Toolbar>

Demos

Explore the demos of the React Toolbar component. Refer to this page.

Props

The following table outlines the props for the Toolbar component:

Name	Type	Default	Description
collision	boolean	true	Specifies whether popups adjust their position to avoid overlapping with other elements. This property is applicable only when in `Popup` and `Extended` modes.
keyboardNavigation	boolean	true	Specifies whether keyboard interaction is enabled within the Toolbar. When set to `true` (default), keyboard navigation is allowed.
orientation	Orientation	Orientation.Horizontal	Specifies the layout direction of how the Toolbar items are arranged. The possible values for this property as follows Horizontal: Arranges Toolbar items in a row from left to right. Vertical: Stacks Toolbar items in a column from top to bottom.
overflowMode	OverflowMode	OverflowMode.Scrollable	Specifies the Toolbar display mode when Toolbar content exceeds the viewing area. The possible values for this property as follows Scrollable: All elements are displayed in a single line with horizontal or vertical scrolling enabled. Popup: Overflowing elements are moved to the popup. Shows the overflowing Toolbar items when you click the expand button. if the popup content overflows the height of the page, the rest of the elements will be hidden. MultiRow: Displays the overflowing Toolbar items in multiple rows within the Toolbar, allowing all items to remain visible by wrapping to new lines as needed. Extended: Hides the overflowing Toolbar items in the next row. Shows the overflowing Toolbar items when you click the expand button.
scrollStep	number	undefined	Specifies the scrolling distance in pixels when the Toolbar items overflow in Scrollable mode. This property is applicable only when the Toolbar is in `Scrollable` mode.

Methods

The following table outlines the methods for the Toolbar component:

Name	Parameters	Returns	Description
refreshOverflow	-	void	Refreshes the Toolbar overflow state and recalculates item visibility. This method should be called when Toolbar content or container dimensions change. Note: This method is not applicable when the Toolbar is in MultiRow mode.

Toolbar Component

Usage

Demos

Props

Methods