Implementing Syncfusion React Toolbar

Component Overview

The Syncfusion React Toolbar component provides a flexible command bar for organizing and executing commands. It supports multiple item types (buttons, separators, inputs), responsive overflow modes, and comprehensive accessibility features.

Key Capabilities:

• Multiple item types: Button, Separator, Input
• Responsive overflow modes: Scrollable, Popup, MultiRow, Extended
• Built-in keyboard navigation and ARIA support
• Component rendering within toolbar items
• Customizable appearance and behavior
• Tab key navigation support
• Dynamic item management (add/remove/enable/disable)
• Rich event system (beforeCreate, clicked, keyDown, created, destroyed)
• Full RTL and locale support
• Stateless template rendering

Complete Table of Contents

1. Getting Started

File: references/getting-started.md

• Dependencies setup
• Project initialization (Vite/CRA)
• Package installation
• CSS theme imports (Tailwind, Bootstrap, Fluent, Material)
• Basic implementation examples
• Global configuration:
  • Locale support for internationalization
  • RTL (Right-to-Left) layout
  • Persistence settings
  • Collision detection
  • HTML sanitizer
• Development server setup

2. Item Configuration

File: references/item-configuration.md

• ItemModel API Reference:
  • Complete interface structure
  • All 16 properties with types
  • Property reference with descriptions
  • Items array configuration patterns
  • Configuration examples (simple, grouped, conditional, accessible)
• Button item type with properties:
  • text - Display text
  • id - Unique identifier
  • prefixIcon / suffixIcon - Icons positioning
  • width - Custom width
  • align - Alignment (Left/Center/Right)
  • disabled - Disabled state
  • visible - Visibility control
  • cssClass - Custom CSS classes
  • htmlAttributes - HTML attributes
  • overflow - Priority display (Show/Hide/None)
  • showAlwaysInPopup - Force popup display
  • showTextOn - Text display mode (Both/Overflow/Toolbar)
• Separator item type
• Input item type for components
• Tab navigation with tabIndex
• Complete working examples

3. Responsive Modes

File: references/responsive-modes.md

• Scrollable Mode (default)
  • Horizontal scrolling with navigation arrows
  • Touch swipe support
  • Keyboard arrow navigation
  • Use cases: many items, large screens
• Popup Mode
  • Dropdown overflow container
  • Command priority control
  • Compact appearance
  • Use cases: limited space, mobile
• MultiRow Mode
  • Item wrapping to multiple rows
  • No scrolling needed
  • All items visible
  • Use cases: responsive width containers
• Extended Mode
  • Multi-row with horizontal scrolling
  • Row-level navigation
  • Use cases: many items in limited width
• Command priority (Show/Hide/None)
• Text display options (Both/Overflow/Toolbar)
• Mode comparison table
• Practical examples for each mode

4. Accessibility & Keyboard Support

File: references/accessibility.md

• Compliance standards:
  • WCAG 2.2 Level AA
  • Section 508 compliance
  • Screen reader support (NVDA, JAWS, VoiceOver)
• ARIA attributes:
  • role="toolbar"
  • aria-label, aria-orientation
  • aria-expanded, aria-haspopup
• Keyboard navigation:
  • allowKeyboard property control
  • Arrow keys (Left/Right) navigation
  • Home/End keys
  • Tab/Shift+Tab for focus
  • Enter/Space for activation
  • Escape to close popups
• keyDown Event handling:
  • Event parameters (currentItem, nextItem, originalEvent)
  • Custom keyboard shortcuts
  • Preventing default navigation
  • Key-specific actions
• Screen reader support and testing
• Color contrast WCAG compliance
• Mobile/touch accessibility
• RTL support
• ARIA best practices
• Testing checklist and tools

5. Item Configuration (Continued)

File: references/item-configuration.md

• Button properties reference
• Separator styling
• Input components (NumericTextBox, DropDownList, CheckBox, RadioButton)
• Tab navigation control
• Complete toolbar examples

6. Styling & Customization

File: references/styling-customization.md

• CSS class structure:
  • .e-toolbar - Container
  • .e-toolbar-item - Item wrapper
  • .e-tbar-btn - Button
  • .e-icons - Icon element
  • .e-separator - Separator
  • .e-toolbar-pop - Popup
• Toolbar container styling
• Item & button styling
• Icon styling and customization
• State styling (hover, focus, active, disabled)
• Theme integration (Tailwind, Bootstrap, Fluent, Material)
• Popup customization CSS classes:
  • .e-toolbar-pop - Popup container
  • .e-overflow-button - Dropdown toggle
  • .e-overflow-show - Show priority items
  • .e-overflow-hide - Hide priority items
  • .e-popup-text - Popup text styling
  • .e-toolbar-text - Toolbar text styling
• Custom styling examples
• Performance optimization
• Complete styled examples

7. Advanced Features & Templates

File: references/advanced-features.md

• Template Configuration:
  • Template basics (functions/JSX)
  • Template properties
  • When to use templates
• Item-Wise Custom Templates:
  • Single item templates
  • Multiple different templates
  • State within templates
  • Template styling
• Stateless Templates:
  • Performance optimization
  • CSS class customization
  • Popup customization equivalents
• Toggle Buttons:
  • Single toggle state
  • Toggle groups (radio-like)
  • CSS styling
• Link Items:
  • Navigation links
  • External links
  • Breadcrumb patterns
• Tooltips:
  • HTML title attribute
  • Custom tooltip components
  • Styling and positioning
• Rendering Other Components:
  • Syncfusion components (DropDownList, NumericTextBox, ColorPicker)
  • React components
  • Custom components
• Command Customization:
  • Click handlers
  • Context menus
  • Custom actions
• Dynamic Item Management:
  • addItems() - Add items at runtime
  • removeItems() - Remove by index or ID
  • enableItems() - Enable/disable items
  • hideItem() - Show/hide items
  • disable() - Disable entire toolbar
  • destroy() - Cleanup
  • refreshOverflow() - Recalculate layout
• Event Handling:
  • beforeCreate - Pre-initialization customization
  • created - Post-initialization callback
  • clicked - Item click events with ClickEventArgs
  • keyDown - Keyboard events with KeyDownEventArgs
  • destroyed - Cleanup event
• Scroll Step Customization:
  • Control scroll distance
  • Dynamic scroll step
  • Touch swipe behavior
• Complete advanced example

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package installation and dependencies
• Setup with Vite and React
• CSS imports and theme configuration
• Basic toolbar with ItemsDirective
• HTML element initialization
• Running the development server

Item Configuration & Types

📄 Read: references/item-configuration.md

• Button item type with properties (text, icons, width, align)
• Separator item type
• Input item type for components
• Tab key navigation with tabIndex
• Complete working examples

Responsive Modes

📄 Read: references/responsive-modes.md

• Scrollable mode (default behavior)
• Popup overflow mode
• Command priority (show, hide, none)
• Text display options
• Navigation and interaction patterns

Accessibility & Keyboard Support

📄 Read: references/accessibility.md

• WCAG 2.2 and Section 508 compliance
• ARIA attributes and roles
• Keyboard navigation keys
• Screen reader support
• Mobile device accessibility

Styling & Customization

📄 Read: references/styling-customization.md

• CSS customization patterns
• Toolbar and item styling
• Icon and button customization
• Hover and focus states
• Theme integration

Advanced Features & Templates

📄 Read: references/advanced-features.md

• Template configuration and patterns
• Item-wise custom templates
• Toggle buttons
• Link items
• Tooltips
• Rendering other Syncfusion components
• Command and scroll customization

Quick Start Example

import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import './App.css';

const App = () => {
  return (
    <ToolbarComponent id='toolbar'>
      <ItemsDirective>
        <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
        <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
        <ItemDirective text="Paste" prefixIcon="e-paste-icon" />
        <ItemDirective type="Separator" />
        <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
        <ItemDirective text="Italic" prefixIcon="e-italic-icon" />
        <ItemDirective text="Underline" prefixIcon="e-underline-icon" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Required CSS imports in App.css:

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

Common Patterns

Basic Toolbar with Buttons and Separators

Create a simple toolbar with button commands and visual separators between groups:

<ToolbarComponent>
  <ItemsDirective>
    {/* Edit commands */}
    <ItemDirective text="Cut" />
    <ItemDirective text="Copy" />
    <ItemDirective type="Separator" />
    {/* Format commands */}
    <ItemDirective text="Bold" />
    <ItemDirective text="Italic" />
  </ItemsDirective>
</ToolbarComponent>

Toolbar with Icons

Use prefixIcon to add icons to buttons for better visual representation:

<ItemDirective text="Save" prefixIcon="e-save-icon" />
<ItemDirective text="Print" prefixIcon="e-print-icon" />

Responsive Overflow Handling

Choose between Scrollable (default) for continuous display or Popup for compact overflow:

{/* Scrollable mode with navigation arrows */}
<ToolbarComponent overflowMode="Scrollable">
  {/* items */}
</ToolbarComponent>

{/* Popup mode with dropdown */}
<ToolbarComponent overflowMode="Popup">
  {/* items */}
</ToolbarComponent>

Toolbar with Input Components

Include interactive components like dropdowns within toolbar items:

<ItemDirective type="Input" template={<DropDownComponent {...props} />} />

Key Props

Common Use Cases

1. Text Editor Toolbar

   • Format buttons (Bold, Italic, Underline)
   • Alignment options
   • Color and font pickers
   • See: responsive-modes.md, advanced-features.md

2. File Operations Toolbar

   • New, Open, Save, Save As buttons
   • Print functionality
   • Undo/Redo commands
   • See: item-configuration.md, advanced-features.md

3. Responsive Mobile Toolbar

   • Popup overflow mode for compact display
   • Scrollable mode for continuous access
   • See: responsive-modes.md

4. Accessible Command Bar

   • Keyboard navigation support
   • ARIA attributes
   • Screen reader friendly
   • See: accessibility.md

5. Customized Branded Toolbar

   • Custom CSS styling
   • Theme integration
   • Company-specific icons
   • See: styling-customization.md

Summary

The Toolbar component provides a comprehensive solution for command organization and execution in React applications. Start with getting-started.md for basic setup, then explore specific features based on your needs. Use advanced-features.md for template customization and complex scenarios.

Navigation Path:

1. Getting Started → Basic toolbar setup
2. Item Configuration → Add different item types
3. Responsive Modes → Handle overflow
4. Accessibility → Ensure keyboard support
5. Styling → Customize appearance
6. Advanced Features → Templates and custom components