Responsive React toolbar (navbar) with scrollable and pop-up modes that accommodate multiple commands.
Enhanced user experience for navigating through standard toolbar commands.
Built-in command alignment for different priorities, templates, orientations, and more.

4.5 / 5

(600+ Reviews)

Trusted by the world’s leading companies

React toolbar

Overview

The React Toolbar is a feature-rich component with two orientations, four responsive modes, templating, and priority-based button alignment.

Get started with the React Toolbar using a few simple lines of TSX code as demonstrated below. Also, explore the React Toolbar demo that shows how to render and configure the component in React.

import {
  Toolbar,
  ToolbarItem,
  ToolbarSpacer,
} from '@syncfusion/react-navigations';
import { Button, Color, Variant } from '@syncfusion/react-buttons';
import { MenuIcon } from '@syncfusion/react-icons';

export default function App() {
  return (

    <div className="component-section">
      <Toolbar aria-label="Navigation header">
        <ToolbarItem>
          <Button variant={Variant.Standard} icon={<MenuIcon />} />
        </ToolbarItem>
        <ToolbarSpacer />
        <ToolbarItem>
          <Button variant={Variant.Standard}>Projects</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button variant={Variant.Standard}>Reports</Button>
        </ToolbarItem>
      </Toolbar>
    </div>
  );
}

Item rendering

Customize command appearance in the React Toolbar by using HTML elements like images, buttons, toggles, text boxes, and autocomplete fields.

Toolbar demo

The scrollable mode in the React Toolbar displays commands in a single row with horizontal scrolling, when items overflow the visible area.

Scrollable toolbar demo

React Toolbar component in scrollable mode.

React Toolbar component in popup mode.

The pop-up menu is another overflow mode in which the toolbar container holds only the items that can be placed within the available space. The items that do not fit the viewing area are moved to another container, which can be viewed by clicking the pop-up icon.

Pop-up toolbar demo

Toolbar items that overflow are displayed inline within the toolbar, wrapping onto multiple rows when necessary.

Multirow toolbar demo

React Toolbar component in multirow mode.

React Toolbar component in extended mode.

Toolbar items that overflow are hidden in the next row. An expand icon reveals these hidden items in a pop-up. If the pop-up content exceeds the page height, it will not be displayed.

Extended toolbar demo

Command alignment

The React Toolbar commands can be aligned to the left, right, or center of the toolbar area.

React Toolbar command alignment.

Tooltips can be added to describe the actions of toolbar commands. By default, HTML-based tooltip (title) attributes can be added to toolbar items. Alternatively, the Syncfusion React Tooltip component can be used for enhanced customization and styling.

Default Tooltip demo

Integration with other components

The React Toolbar can easily be integrated with the Syncfusion React Data Grid component.

Integration with other components demo

Responsiveness

React Toolbar adapts to the available space with four types of overflow modes—scrollable, multirow, extended, and pop-up—for modern web and mobile applications.

Responsive toolbar demo

Accessibility

Fully supports WAI-ARIA accessibility, making it usable with on-screen readers and assistive devices.
Follows WAI-ARIA best practices for implementing keyboard interaction.
Follows WCG 2.0 standards in the design of UI visual elements, such as foreground color, background color, line spacing, text, and images.

Keyboard shortcuts documentation

Developer-friendly APIs

Developers can control the appearance and behaviors of a toolbar using a rich set of APIs.

Not sure how to create your first React Toolbar? Our documentation can help.

I’d love to read it now

Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.

GRIDS

Data Grid

DATA VISUALIZATION

Charts

NAVIGATION

BUTTONS

INPUTS

LAYOUT

NOTIFICATIONS

Frequently Asked Questions

✅ Why should you choose the Syncfusion^® React Toolbar?

Scrollable overflow mode supports displaying the Toolbar’s commands in a single line with horizontal scrolling when the commands overflow the available space.
Pop-up display mode supports displaying commands in a pop-up when the commands overflow the available space.
The complete Toolbar component can also be rendered based on the given HTML element.
Built-in command alignments for different priorities, templates, orientations, and more.
One of the best React Toolbars on the market.
Simple configuration and APIs.
Support for all modern browsers.
Expansive learning demos help you learn quickly and get started fast.

✅ Where can I find the Syncfusion React Toolbar demo?

You can find our React Toolbar demo here. It demonstrates how to render and configure the Toolbar.

✅ Can I download and utilize the Syncfusion React Toolbar for free?

No, this is a commercial product and requires a paid license. However, a free Community License is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.