React Toolbar

The React Toolbar component is a feature-rich container that organizes buttons, input, and custom elements in a horizontal or vertical layout. It provides a compact and efficient way to arrange UI elements for easy access and improved user experience.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Toolbar component to the project.

Installing Syncfusion® React packages

To use the Toolbar component, install the @syncfusion/react-navigations package:

npm install @syncfusion/react-navigations

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Toolbar component and its dependencies were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';
@import '../node_modules/@syncfusion/react-popups/styles/material.css';
@import '../node_modules/@syncfusion/react-navigations/styles/material.css';

Adding Toolbar component

To include the Toolbar component in your application, import the Toolbar from the @syncfusion/react-navigations package in App.tsx.

import { Toolbar } from "@syncfusion/react-navigations";

Add the Toolbar component in your application as shown in the code example below.

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

export default function App() {
  return (
    <div className="component-section toolbar-demo-container">
      <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>
        <ToolbarItem>
          <Button title='Free Trial' color={Color.Primary} variant={Variant.Filled}>Free Trial</Button>
        </ToolbarItem>
      </Toolbar>
    </div>
  );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates how to render a simple Toolbar component.

Tools

The React Toolbar offers three essential organizational components:

ToolbarItem - A container component for individual elements within the Toolbar that wraps buttons, inputs, or other UI elements, ensuring they are properly styled and positioned.

ToolbarSeparator - A component that renders a dividing line between related Toolbar items to provide visual grouping and improved organization.

ToolbarSpacer - A component that creates an expandable empty space within the Toolbar, pushing items on either side to the edges for flexible layout arrangements.

Overflow Modes

The Toolbar offers multiple solutions to handle items exceeding available space, including scrollable navigation, multi-row layouts, popup menus, and extended displays.

Scrollable mode

The Scrollable mode adds navigation buttons to the Toolbar when items exceed the available space, allowing users to scroll through all items.

The scrollStep property defines the scrolling distance in pixels when navigating through Toolbar items using the navigation buttons. This controls how far the Toolbar content moves with each navigation button click.

MultiRow mode

MultiRow mode automatically wraps overflow items to additional rows when they exceed the available width. This mode ensures all items remain visible simultaneously without requiring navigation, allowing users to see all available options at once.

Popup mode

Popup mode automatically moves overflowing Toolbar items to a popup when there is not enough space available. Users can access these hidden items through a navigation button that appears when overflow occurs, maintaining a clean interface while ensuring all functions remain accessible when needed.

Extended mode

Extended mode handles overflow by moving excess items to a popup that spans the full width of the Toolbar. Unlike the standard Popup mode, this mode displays overflow items in a popup that matches the Toolbar width, creating a visual extension of the main Toolbar. This provides a more spacious and consistent layout for accessing overflow functionality.

Orientation

By default, the Toolbar renders in Horizontal mode. You can configure the Toolbar to display vertically by setting the orientation property to Vertical. This changes the layout direction from left-to-right to top-to-bottom, which is useful for sidebar menus and tools panels.

Accessibility

The Toolbar component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Toolbar component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Toolbar component follows the WAI-ARIA patterns to meet the accessibility standards. The following ARIA attributes are used in the Toolbar component:

Important: Users must provide an aria-label attribute to the Toolbar for proper accessibility, especially when the application contains multiple toolbars. The label should describe the toolbar's purpose (e.g., "Formatting tools", "Document actions", "Editor toolbar").

Keyboard interaction

The Toolbar component follows the keyboard interaction guidelines, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Toolbar component.