Syncfusion React Toolbar

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