syncfusion-react-toolbar

What this skill does

# 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](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](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](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](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](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](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](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](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](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](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](references/accessibility.md)
- WCAG 2.2 and Section 508 compliance
- ARIA attributes and roles
- Keyboard navigation keys
- Screen rea