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
• 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

Accessibility & Keyboard Support

Table of Contents

• Overview
• Compliance Standards
• ARIA Attributes
• Keyboard Navigation
• allowKeyboard Property
• Navigation Keys
• keyDown Event
• Screen Reader Support
• Color Contrast
• Mobile & Touch Accessibility
• Right-to-Left (RTL) Support
• ARIA Best Practices
• Testing Accessibility
• Common Accessibility Issues & Fixes
• Summary

Overview

Syncfusion Toolbar is designed following WAI-ARIA specifications to ensure accessibility for all users, including those using assistive technologies like screen readers and keyboard navigation.

Compliance Standards

---

ARIA Attributes

Toolbar implements WAI-ARIA attributes automatically. These provide semantic information to assistive technologies.

Toolbar Container Attributes

role="toolbar"

<div role="toolbar" aria-label="Document Formatting">
  <!-- toolbar items -->
</div>

Identifies the element as a toolbar control.

aria-orientation

<div role="toolbar" aria-orientation="horizontal">
  <!-- items -->
</div>

• "horizontal" - Default, items arranged left to right
• "vertical" - Items arranged top to bottom

aria-label

<div role="toolbar" aria-label="Text Formatting Toolbar">
  <!-- items -->
</div>

Describes the purpose of the toolbar. Essential for screen reader users.

aria-disabled

<div role="toolbar" aria-disabled="false">
  <!-- items -->
</div>

Indicates if the entire toolbar is disabled.

Popup Attributes

aria-expanded

<button aria-expanded="false">More Options ▼</button>

• "true" - Popup is open
• "false" - Popup is closed

aria-haspopup

<button aria-haspopup="true">Menu ▼</button>

Indicates that the element opens a popup dropdown.

Example: Accessible Toolbar

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

const App = () => {
  return (
    <ToolbarComponent 
      aria-label="Text Editor Formatting"
      role="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" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

---

Keyboard Navigation

Keyboard navigation is enabled by default via the allowKeyboard property. Users can navigate and interact using keyboard shortcuts.

allowKeyboard Property

Enable or disable keyboard navigation:

<ToolbarComponent allowKeyboard={true}>
  {/* Keyboard navigation enabled (default) */}
</ToolbarComponent>

<ToolbarComponent allowKeyboard={false}>
  {/* Keyboard navigation disabled */}
</ToolbarComponent>

Default: true - keyboard navigation is enabled

Navigation Keys

Interaction Keys

Tab Navigation

Tab order follows the tabIndex property when set, otherwise follows DOM order.

Example: Full Keyboard Navigation

<ToolbarComponent width="400" overflowMode="Scrollable" allowKeyboard={true}>
  <ItemsDirective>
    <ItemDirective text="Cut" prefixIcon="e-cut-icon" tabIndex={0} />
    <ItemDirective text="Copy" prefixIcon="e-copy-icon" tabIndex={0} />
    <ItemDirective text="Paste" prefixIcon="e-paste-icon" tabIndex={0} />
    <ItemDirective type="Separator" />
    <ItemDirective text="Bold" prefixIcon="e-bold-icon" tabIndex={0} />
    <ItemDirective text="Underline" prefixIcon="e-underline-icon" tabIndex={0} />
    <ItemDirective text="Italic" prefixIcon="e-italic-icon" tabIndex={0} />
    <ItemDirective text="Color-Picker" prefixIcon="e-color-icon" tabIndex={0} />
    <ItemDirective type="Separator" />
    <ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon" tabIndex={0} />
    <ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon" tabIndex={0} />
    <ItemDirective text="Clear" prefixIcon="e-clear-icon" tabIndex={0} />
  </ItemsDirective>
</ToolbarComponent>

Usage: 1. Press Tab to enter toolbar 2. Use Left/Right arrows to navigate items 3. Press Enter to activate 4. Press Tab again to exit toolbar

keyDown Event

Handle keyboard events using the keyDown event. This event fires when a key is pressed within the toolbar and can be used to implement custom keyboard shortcuts or navigation logic.

Event Parameters:

• currentItem - HTMLElement of the currently focused toolbar item
• nextItem - HTMLElement of the next item that would be focused
• originalEvent - Browser KeyboardEvent with key information
• cancel - Set to true to prevent default keyboard action
• name - Event name ("keyDown")

keyDown Event Example

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

const App = () => {
  const [lastKey, setLastKey] = useState('');

  const handleKeyDown = (args) => {
    // Log keyboard interaction
    console.log('Key:', args.originalEvent.key);
    console.log('Current item:', args.currentItem?.textContent);
    console.log('Next item:', args.nextItem?.textContent);

    setLastKey(args.originalEvent.key);

    // Implement custom keyboard shortcuts
    if (args.originalEvent.key === 'Enter') {
      console.log('Activating item:', args.currentItem?.textContent);
    }

    if (args.originalEvent.key === 'Escape') {
      console.log('Closing toolbar');
    }
  };

  return (
    <>
      <ToolbarComponent keyDown={handleKeyDown} allowKeyboard={true}>
        <ItemsDirective>
          <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
          <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
          <ItemDirective text="Paste" prefixIcon="e-paste-icon" />
        </ItemsDirective>
      </ToolbarComponent>
      <p>Last key pressed: {lastKey}</p>
    </>
  );
};

export default App;

Custom Navigation with keyDown

Implement custom keyboard behavior:

const handleCustomKeyboard = (args) => {
  const event = args.originalEvent;

  // Custom shortcut: Ctrl+S for save
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Save shortcut triggered');
    // Trigger save action
  }

  // Custom shortcut: Ctrl+Z for undo
  if (event.ctrlKey && event.key === 'z') {
    event.preventDefault();
    console.log('Undo shortcut triggered');
    // Trigger undo action
  }

  // Prevent default if handling custom shortcut
  if (event.ctrlKey || event.metaKey) {
    args.cancel = true;
  }
};

<ToolbarComponent keyDown={handleCustomKeyboard} allowKeyboard={true}>
  {/* items */}
</ToolbarComponent>

Preventing Default Keyboard Navigation

const handlePreventDefault = (args) => {
  // Disable arrow key navigation, handle manually
  if (args.originalEvent.key === 'ArrowLeft' || args.originalEvent.key === 'ArrowRight') {
    args.cancel = true;
    // Implement custom navigation logic
  }
};

<ToolbarComponent keyDown={handlePreventDefault} allowKeyboard={false}>
  {/* items */}
</ToolbarComponent>

---

Screen Reader Support

Screen readers announce toolbar content and navigation options.

What Screen Readers Announce

Toolbar Container:

• "Document Formatting toolbar"
• "Button, Cut"
• "Button, Copy"
• etc.

Keyboard Help:

• "Use arrow keys to navigate toolbar items"
• "Press Enter to activate"

Testing with Screen Readers

Popular Screen Readers:

• JAWS (Windows)
• NVDA (Windows, free)
• VoiceOver (macOS, iOS)
• TalkBack (Android)

Screen Reader Best Practices

1. Always set aria-label:

   <ToolbarComponent aria-label="Editor Commands">
     {/* items */}
   </ToolbarComponent>

2. Use meaningful button text:

   {/* Good */}
   <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
   
   {/* Avoid: just icon */}
   <ItemDirective prefixIcon="e-bold-icon" />

3. Group related items with separators:

   <ItemDirective text="Cut" />
   <ItemDirective text="Copy" />
   <ItemDirective type="Separator" /> {/* Clear grouping */}
   <ItemDirective text="Bold" />

---

Color Contrast

Toolbar components meet WCAG AA color contrast requirements (4.5:1 for text).

Default Themes

All Syncfusion themes provide compliant color contrasts:

• Tailwind3: ✅ Compliant
• Bootstrap5.3: ✅ Compliant
• Fluent2: ✅ Compliant
• Material3: ✅ Compliant

Custom Colors

When customizing colors, ensure:

/* Good: High contrast */
.e-toolbar {
  background: #ffffff;
  color: #000000;  /* 21:1 contrast ratio */
}

/* Avoid: Low contrast */
.e-toolbar {
  background: #eeeeee;
  color: #cccccc;  /* 1.18:1 - too low */
}

Use tools like WebAIM contrast checker to verify.

---

Mobile & Touch Accessibility

Touch Interactions

• Tap - Activate button (same as click)
• Double-tap - Alternative activation
• Long-press - In scrollable mode, scroll continuously
• Swipe - In scrollable mode, navigate hidden items

Mobile Screen Readers

• VoiceOver (iOS): Works natively with ARIA
• TalkBack (Android): Full support for keyboard events
• Magnification: Works with standard zoom

Mobile-Optimized Example

<ToolbarComponent 
  overflowMode="Popup"
  width="100%"
  aria-label="Mobile Toolbar"
>
  <ItemsDirective>
    {/* Touch-friendly button sizes */}
    <ItemDirective 
      text="Save" 
      prefixIcon="e-save-icon" 
      overflow="Show"
    />
    <ItemDirective 
      text="Edit" 
      prefixIcon="e-edit-icon" 
      overflow="Show"
    />
    
    {/* Less important in popup */}
    <ItemDirective text="Share" prefixIcon="e-share-icon" />
    <ItemDirective text="Settings" prefixIcon="e-settings-icon" />
  </ItemsDirective>
</ToolbarComponent>

---

Right-to-Left (RTL) Support

Toolbar automatically adapts for RTL languages.

RTL Implementation

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

const App = () => {
  return (
    <div dir="rtl">
      <ToolbarComponent>
        <ItemsDirective>
          <ItemDirective text="قص" prefixIcon="e-cut-icon" /> {/* Arabic: Cut */}
          <ItemDirective text="نسخ" prefixIcon="e-copy-icon" /> {/* Arabic: Copy */}
          <ItemDirective text="لصق" prefixIcon="e-paste-icon" /> {/* Arabic: Paste */}
        </ItemsDirective>
      </ToolbarComponent>
    </div>
  );
};

export default App;

Automatic RTL Adjustments:

• Items reversed in order
• Text aligned right to left
• Icons mirrored where appropriate
• Arrows reversed in scrollable mode

---

ARIA Best Practices

1. Label All Toolbars

<ToolbarComponent aria-label="Main Navigation">
  {/* items */}
</ToolbarComponent>

2. Use Descriptive Button Text

{/* Good */}
<ItemDirective text="Download File" prefixIcon="e-download-icon" />

{/* Avoid: Too vague */}
<ItemDirective text="Click" prefixIcon="e-icon" />

3. Group Related Items

<ItemDirective text="New" />
<ItemDirective text="Open" />
<ItemDirective text="Save" />
<ItemDirective type="Separator" />
<ItemDirective text="Print" />

4. Indicate Item Status

{/* Disabled item */}
<ItemDirective text="Paste" disabled={true} />

{/* Selected/Active item */}
<ItemDirective text="Bold" active={true} />

5. Provide Tooltips

Use title attribute for additional context:

<ItemDirective 
  text="Save" 
  prefixIcon="e-save-icon"
  title="Save document (Ctrl+S)"
/>

---

Testing Accessibility

Automated Tools

1. axe-core - Automated accessibility testing

   npm install axe-core

2. accessibility-checker - Real-time validation

   npm install accessibility-checker

Manual Testing Checklist

• [ ] Keyboard navigation works (Tab, arrow keys, Enter)
• [ ] Screen reader announces toolbar purpose
• [ ] All buttons have descriptive labels
• [ ] Color contrast is sufficient (4.5:1)
• [ ] Focus indicator is visible
• [ ] Mobile touch interactions work
• [ ] RTL layout is correct

Focus Indicator

Ensure focus is visible:

.e-toolbar .e-tbar-btn:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

---

Common Accessibility Issues & Fixes

Issue: Icon-only buttons unclear

Fix: Add text or tooltip

{/* Before: Unclear */}
<ItemDirective prefixIcon="e-save-icon" />

{/* After: Clear */}
<ItemDirective text="Save" prefixIcon="e-save-icon" title="Save document" />

Issue: Focus not visible

Fix: Add focus styling

.e-toolbar .e-tbar-btn:focus {
  box-shadow: 0 0 0 2px #0066cc;
}

Issue: Toolbar not labeled

Fix: Add aria-label

<ToolbarComponent aria-label="Document Editor">
  {/* items */}
</ToolbarComponent>

Issue: Keyboard navigation skipped item

Fix: Set tabIndex correctly

<ItemDirective text="Important" tabIndex={0} />

---

Summary

The Toolbar component provides:

• ✅ Full WCAG 2.2 compliance
• ✅ Complete keyboard navigation
• ✅ Screen reader support
• ✅ ARIA attributes
• ✅ Mobile/touch support
• ✅ RTL language support
• ✅ High color contrast

Focus on adding descriptive labels and testing with assistive technologies to ensure your implementation is fully accessible.

Advanced Features & Template Configuration

Table of Contents

• Template Configuration
• Item-Wise Custom Templates
• Stateless Templates
• Toggle Buttons
• Link Items
• Tooltips
• Rendering Other Components
• Command Customization
• Dynamic Item Management
• Event Handling
• Scroll Step Customization

---

Template Configuration

Overview

Templates allow you to customize the appearance and content of toolbar items beyond basic buttons. Templates provide complete control over HTML structure, styling, and content.

Template Basics

Templates are defined as functions or JSX components:

const customTemplate = () => {
  return (
    <div className="custom-item">
      Custom Content Here
    </div>
  );
};

<ItemDirective template={customTemplate} />

Template Properties

<ItemDirective
  template={customTemplate}     // Function returning JSX
  type="Button"                 // Item type
  align="Left"                  // Alignment
  overflow="None"               // Overflow behavior
/>

When to Use Templates

• Complex layouts - More than simple button + icon
• Custom styling - Unique appearance needs
• Mixed content - Combine text, icons, badges
• Interactive elements - Dropdowns, inputs, checkboxes
• Conditional rendering - Show/hide based on state

---

Item-Wise Custom Templates

Single Item Template

Create a unique template for one toolbar item:

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

const App = () => {
  // Template for search bar
  const searchTemplate = () => {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <input
          type="text"
          placeholder="Search..."
          style={{
            padding: '6px 12px',
            border: '1px solid #ddd',
            borderRadius: '4px',
            width: '200px'
          }}
        />
        <button className="e-btn">Go</button>
      </div>
    );
  };

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective text="File" />
        <ItemDirective text="Edit" />
        <ItemDirective template={searchTemplate} align="Right" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Multiple Different Templates

Use different templates for different items:

const App = () => {
  // Template 1: Search
  const searchTemplate = () => (
    <input type="text" placeholder="Search..." style={{ width: '150px' }} />
  );

  // Template 2: Dropdown
  const dropdownTemplate = () => (
    <select style={{ padding: '6px' }}>
      <option>View</option>
      <option>List</option>
      <option>Grid</option>
      <option>Cards</option>
    </select>
  );

  // Template 3: Badge Counter
  const badgeTemplate = () => (
    <div style={{ position: 'relative' }}>
      <button className="e-btn">Notifications</button>
      <span style={{
        position: 'absolute',
        top: '-8px',
        right: '-8px',
        backgroundColor: 'red',
        color: 'white',
        borderRadius: '50%',
        width: '20px',
        height: '20px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px'
      }}>
        5
      </span>
    </div>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={searchTemplate} />
        <ItemDirective template={dropdownTemplate} />
        <ItemDirective template={badgeTemplate} align="Right" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Template with State

Use React state within templates:

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

const App = () => {
  const [fontSize, setFontSize] = useState(14);

  const fontSizeTemplate = () => (
    <div>
      <label>Font Size: </label>
      <input
        type="number"
        value={fontSize}
        onChange={(e) => setFontSize(Number(e.target.value))}
        min={8}
        max={72}
        style={{ width: '50px', padding: '4px' }}
      />
    </div>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective text="Bold" />
        <ItemDirective text="Italic" />
        <ItemDirective template={fontSizeTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Template Styling

Apply custom CSS to templates:

const App = () => {
  const customTemplate = () => (
    <div className="toolbar-custom-item">
      <span className="custom-label">Custom Item</span>
    </div>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={customTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.toolbar-custom-item {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 100%;
  background: linear-gradient(to right, #667eea, #764ba2);
  border-radius: 4px;
}

.custom-label {
  color: white;
  font-weight: bold;
  font-size: 14px;
}

---

Stateless Templates

Overview

Stateless templates allow rendering content without maintaining component state. This is useful for performance optimization when templates don't need to react to state changes.

Using statelessTemplates Property

Configure stateless templates in ToolbarComponent:

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

const App = () => {
  const statelessItems = [
    {
      text: 'Cut',
      template: () => (
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span className="e-icons e-cut-icon"></span>
          <span>Cut</span>
        </div>
      )
    }
  ];

  return (
    <ToolbarComponent statelessTemplates={true}>
      <ItemsDirective>
        {/* Templates render without state management */}
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS Classes for Popup Customization

When using stateless templates with Popup mode, customize using CSS classes:

/* Show items in popup */
.e-overflow-show {
  /* Applies to items with overflow="Show" */
  display: flex !important;
}

/* Hide items from popup */
.e-overflow-hide {
  /* Applies to items with overflow="Hide" */
  display: none !important;
}

/* Text display in popup */
.e-popup-text {
  /* Label text styling in popup */
  font-weight: 500;
}

/* Text display in toolbar */
.e-toolbar-text {
  /* Label text styling in toolbar */
  font-weight: normal;
}

Popup Customization Example

<ToolbarComponent overflowMode="Popup" statelessTemplates={true}>
  <ItemsDirective>
    <ItemDirective text="Edit" overflow="Show" />
    <ItemDirective text="Delete" overflow="Show" />
    <ItemDirective text="Archive" overflow="Hide" />
    <ItemDirective text="Share" overflow="Hide" />
  </ItemsDirective>
</ToolbarComponent>

CSS:

.e-overflow-show {
  background-color: #e3f2fd;
}

.e-overflow-hide {
  background-color: #f5f5f5;
}

.e-popup-text {
  color: #1976d2;
  font-weight: bold;
}

---

Toggle Buttons

Basic Toggle Button

Create a button that maintains pressed/unpressed state:

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

const App = () => {
  const [isBold, setIsBold] = useState(false);

  const toggleTemplate = () => (
    <button
      className={`e-btn toggle-btn ${isBold ? 'active' : ''}`}
      onClick={() => setIsBold(!isBold)}
    >
      <span className="e-icons e-bold-icon"></span>
      Bold
    </button>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={toggleTemplate} />
        <ItemDirective text="Italic" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.toggle-btn {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

.toggle-btn.active {
  background-color: #0066ff;
  color: white;
  border-color: #0056b3;
}

Toggle Group (Like Radio Buttons)

Multiple toggles where only one is active:

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

const App = () => {
  const [alignment, setAlignment] = useState('left');

  const alignmentTemplate = () => (
    <div className="toggle-group">
      <button
        className={`e-btn toggle-btn ${alignment === 'left' ? 'active' : ''}`}
        onClick={() => setAlignment('left')}
        title="Align Left"
      >
        ↤
      </button>
      <button
        className={`e-btn toggle-btn ${alignment === 'center' ? 'active' : ''}`}
        onClick={() => setAlignment('center')}
        title="Align Center"
      >
        ⇄
      </button>
      <button
        className={`e-btn toggle-btn ${alignment === 'right' ? 'active' : ''}`}
        onClick={() => setAlignment('right')}
        title="Align Right"
      >
        ⤥
      </button>
    </div>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={alignmentTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.toggle-group {
  display: flex;
  gap: 2px;
}

.toggle-btn {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 6px 12px;
  cursor: pointer;
}

.toggle-btn.active {
  background-color: #0066ff;
  color: white;
  border-color: #0056b3;
}

---

Link Items

Link as Toolbar Item

Render a link or anchor element in toolbar:

<ToolbarComponent>
  <ItemsDirective>
    <ItemDirective text="Home" />
    <ItemDirective>
      <a href="https://example.com" className="e-btn e-tbar-btn">
        External Link
      </a>
    </ItemDirective>
  </ItemsDirective>
</ToolbarComponent>

Navigation Links

Create navigation toolbar:

import { Link } from 'react-router-dom';

const App = () => {
  const navTemplate = () => (
    <nav style={{ display: 'flex', gap: '16px' }}>
      <Link to="/" className="e-btn e-tbar-btn">Home</Link>
      <Link to="/about" className="e-btn e-tbar-btn">About</Link>
      <Link to="/services" className="e-btn e-tbar-btn">Services</Link>
      <Link to="/contact" className="e-btn e-tbar-btn">Contact</Link>
    </nav>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={navTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Breadcrumb-Style Links

const App = () => {
  const breadcrumbTemplate = () => (
    <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
      <a href="/">Home</a>
      <span>/</span>
      <a href="/documents">Documents</a>
      <span>/</span>
      <span>Current Page</span>
    </div>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={breadcrumbTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

---

Tooltips

Add Tooltips to Buttons

Use HTML title attribute for tooltips:

<ItemDirective 
  text="Save" 
  prefixIcon="e-save-icon"
  title="Save document (Ctrl+S)"
/>

Template with Tooltip

const App = () => {
  const saveTemplate = () => (
    <button 
      className="e-btn e-tbar-btn"
      title="Save document (Ctrl+S)"
    >
      <span className="e-icons e-save-icon"></span>
      Save
    </button>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={saveTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Custom Tooltip Component

import { useState } from 'react';

const App = () => {
  const [showTooltip, setShowTooltip] = useState(false);

  const tooltipTemplate = () => (
    <div
      className="tooltip-container"
      onMouseEnter={() => setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
    >
      <button className="e-btn e-tbar-btn">
        <span className="e-icons e-help-icon"></span>
      </button>
      {showTooltip && (
        <div className="tooltip">
          Click here for help. Press F1 for more information.
        </div>
      )}
    </div>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={tooltipTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  margin-bottom: 8px;
  z-index: 1000;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #333;
}

---

Rendering Other Components

Syncfusion Components in Toolbar

Render Syncfusion controls as toolbar items:

import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';

const App = () => {
  const fonts = ['Arial', 'Calibri', 'Courier New', 'Georgia', 'Times New Roman'];
  const sizes = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32];

  const fontTemplate = () => (
    <DropDownListComponent
      dataSource={fonts}
      index={0}
      width={120}
    />
  );

  const sizeTemplate = () => (
    <NumericTextBoxComponent
      value={12}
      min={6}
      max={72}
      step={1}
      width={60}
    />
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
        <ItemDirective type="Separator" />
        <ItemDirective type="Input" template={fontTemplate} />
        <ItemDirective type="Input" template={sizeTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

React Component in Toolbar

Render any React component:

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

// Custom component
const UserProfile = () => {
  const [user, setUser] = useState({ name: 'John Doe', avatar: '👤' });

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <span style={{ fontSize: '20px' }}>{user.avatar}</span>
      <span>{user.name}</span>
    </div>
  );
};

const App = () => {
  const profileTemplate = () => <UserProfile />;

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective text="File" />
        <ItemDirective template={profileTemplate} align="Right" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

---

Command Customization

Add Click Handlers

Handle button clicks:

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

const App = () => {
  const [messages, setMessages] = useState([]);

  const handleSave = () => {
    setMessages([...messages, 'Document saved!']);
  };

  const handlePrint = () => {
    window.print();
    setMessages([...messages, 'Print dialog opened']);
  };

  const saveTemplate = () => (
    <button className="e-btn e-tbar-btn" onClick={handleSave}>
      <span className="e-icons e-save-icon"></span>
      Save
    </button>
  );

  const printTemplate = () => (
    <button className="e-btn e-tbar-btn" onClick={handlePrint}>
      <span className="e-icons e-print-icon"></span>
      Print
    </button>
  );

  return (
    <>
      <ToolbarComponent>
        <ItemsDirective>
          <ItemDirective template={saveTemplate} />
          <ItemDirective template={printTemplate} />
        </ItemsDirective>
      </ToolbarComponent>
      <div>
        {messages.map((msg, i) => (
          <div key={i}>{msg}</div>
        ))}
      </div>
    </>
  );
};

export default App;

Context Menu Integration

Show context menu on button click:

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

const App = () => {
  const [menuVisible, setMenuVisible] = useState(false);

  const menuTemplate = () => (
    <div style={{ position: 'relative' }}>
      <button 
        className="e-btn e-tbar-btn"
        onClick={() => setMenuVisible(!menuVisible)}
      >
        Menu ▼
      </button>
      {menuVisible && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          backgroundColor: 'white',
          border: '1px solid #ccc',
          borderRadius: '4px',
          minWidth: '150px',
          zIndex: 1000,
          marginTop: '4px'
        }}>
          <div style={{ padding: '8px 12px', cursor: 'pointer' }}>New</div>
          <div style={{ padding: '8px 12px', cursor: 'pointer' }}>Open</div>
          <div style={{ padding: '8px 12px', cursor: 'pointer' }}>Save</div>
          <hr style={{ margin: '4px 0' }} />
          <div style={{ padding: '8px 12px', cursor: 'pointer' }}>Exit</div>
        </div>
      )}
    </div>
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective template={menuTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

---

Dynamic Item Management

Add Items at Runtime

Add new items to the toolbar using the addItems() method:

import { useState, useRef } from 'react';
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';

const App = () => {
  const toolbarRef = useRef(null);
  const [itemCount, setItemCount] = useState(0);

  const addNewItem = () => {
    const newItems = [
      {
        text: `New Item ${itemCount + 1}`,
        prefixIcon: 'e-new-icon'
      }
    ];
    
    // Add item at the end
    toolbarRef.current.addItems(newItems);
    setItemCount(itemCount + 1);
  };

  const addItemAtPosition = () => {
    const newItems = [
      {
        text: 'Insert Here',
        prefixIcon: 'e-insert-icon'
      }
    ];
    
    // Add item at index 2
    toolbarRef.current.addItems(newItems, 2);
  };

  return (
    <>
      <button onClick={addNewItem}>Add Item at End</button>
      <button onClick={addItemAtPosition}>Add Item at Position 2</button>
      
      <ToolbarComponent ref={toolbarRef}>
        <ItemsDirective>
          <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
          <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
          <ItemDirective text="Paste" prefixIcon="e-paste-icon" />
        </ItemsDirective>
      </ToolbarComponent>
    </>
  );
};

export default App;

Remove Items

Remove items using the removeItems() method:

const removeByIndex = () => {
  // Remove item at index 1
  toolbarRef.current.removeItems([1]);
};

const removeByID = () => {
  // Remove item with specific ID
  toolbarRef.current.removeItems(['copy-btn']);
};

const removeMultiple = () => {
  // Remove multiple items
  toolbarRef.current.removeItems([0, 2, 4]);
};

Example with remove buttons:

<ItemDirective 
  id="copy-btn"
  text="Copy" 
  prefixIcon="e-copy-icon" 
/>

<button onClick={removeByID}>Remove Copy Button</button>

Enable/Disable Items

Control item enabled state using enableItems():

const enableAllItems = () => {
  // Enable all items
  toolbarRef.current.enableItems(null, true);
};

const disableSpecificItems = () => {
  // Disable items at indices 1 and 3
  toolbarRef.current.enableItems([1, 3], false);
};

const disableByID = () => {
  // Disable item by ID
  toolbarRef.current.enableItems(['delete-btn'], false);
};

Complete example with enable/disable:

<ItemDirective 
  id="delete-btn"
  text="Delete" 
  prefixIcon="e-delete-icon" 
/>

<button onClick={disableByID}>Disable Delete</button>
<button onClick={enableAllItems}>Enable All</button>

Hide/Show Items

Control item visibility using hideItem():

const hideItem = () => {
  // Hide item at index 2
  toolbarRef.current.hideItem(2, true);
};

const showItem = () => {
  // Show item at index 2
  toolbarRef.current.hideItem(2, false);
};

const hideByID = () => {
  // Hide item by ID
  const itemIndex = toolbarRef.current.element.querySelector('#backup-btn');
  const index = Array.from(toolbarRef.current.element.querySelectorAll('.e-toolbar-item')).indexOf(itemIndex?.closest('.e-toolbar-item'));
  toolbarRef.current.hideItem(index, true);
};

Refresh Overflow Layout

When adding/removing items in Scrollable or Popup modes, refresh the layout:

const refreshLayout = () => {
  // Recalculate overflow behavior after dynamic changes
  toolbarRef.current.refreshOverflow();
};

Destroy Toolbar

Clean up the component when no longer needed:

const destroyToolbar = () => {
  toolbarRef.current.destroy();
};

// Typically done in useEffect cleanup
useEffect(() => {
  return () => {
    if (toolbarRef.current) {
      toolbarRef.current.destroy();
    }
  };
}, []);

Complete Dynamic Management Example

import { useState, useRef } from 'react';
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';

const App = () => {
  const toolbarRef = useRef(null);
  const [items, setItems] = useState(['Cut', 'Copy', 'Paste']);

  const addItem = () => {
    const newItem = { text: `Item ${items.length + 1}` };
    toolbarRef.current.addItems([newItem]);
    setItems([...items, newItem.text]);
  };

  const removeLastItem = () => {
    if (items.length > 0) {
      toolbarRef.current.removeItems([items.length - 1]);
      setItems(items.slice(0, -1));
    }
  };

  const disableFirst = () => {
    toolbarRef.current.enableItems([0], false);
  };

  const enableAll = () => {
    toolbarRef.current.enableItems(null, true);
  };

  return (
    <>
      <div style={{ marginBottom: '16px' }}>
        <button onClick={addItem} style={{ marginRight: '8px' }}>Add Item</button>
        <button onClick={removeLastItem} style={{ marginRight: '8px' }}>Remove Last</button>
        <button onClick={disableFirst} style={{ marginRight: '8px' }}>Disable First</button>
        <button onClick={enableAll}>Enable All</button>
      </div>
      
      <ToolbarComponent ref={toolbarRef}>
        <ItemsDirective>
          <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
          <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
          <ItemDirective text="Paste" prefixIcon="e-paste-icon" />
        </ItemsDirective>
      </ToolbarComponent>
    </>
  );
};

export default App;

---

Event Handling

Available Events

Toolbar provides several events for monitoring user interactions and lifecycle:

beforeCreate Event

Fired before the Toolbar component is initialized. Useful for configuration modifications:

const handleBeforeCreate = (args) => {
  console.log('Toolbar initializing');
  console.log('enableCollision:', args.enableCollision); // Get/set collision handling
  console.log('scrollStep:', args.scrollStep);           // Get/set scroll distance
  
  // Modify configuration before creation
  args.scrollStep = 100; // Increase scroll step
};

<ToolbarComponent beforeCreate={handleBeforeCreate}>
  <ItemsDirective>
    {/* items */}
  </ItemsDirective>
</ToolbarComponent>

clicked Event

Fired when a toolbar item is clicked:

const handleClick = (args) => {
  console.log('Item clicked:', args.item.text);
  console.log('Item ID:', args.item.id);
  console.log('Original event:', args.originalEvent); // Browser click event
  
  // Prevent default action
  args.cancel = true; // Cancel if needed
};

<ToolbarComponent clicked={handleClick}>
  <ItemsDirective>
    <ItemDirective text="Save" />
  </ItemsDirective>
</ToolbarComponent>

keyDown Event

Fired when a keyboard key is pressed in the toolbar:

const handleKeyDown = (args) => {
  console.log('Key pressed');
  console.log('Current item:', args.currentItem);   // Currently focused item
  console.log('Next item:', args.nextItem);         // Item that would be selected
  console.log('Original event:', args.originalEvent); // Browser keyboard event
  
  // Implement custom keyboard navigation
  if (args.originalEvent.key === 'Enter') {
    console.log('Enter pressed on:', args.currentItem?.textContent);
  }
  
  // Prevent default navigation
  args.cancel = true;
};

<ToolbarComponent keyDown={handleKeyDown}>
  <ItemsDirective>
    {/* items */}
  </ItemsDirective>
</ToolbarComponent>

created Event

Fired after the Toolbar component is fully initialized:

const handleCreated = () => {
  console.log('Toolbar created successfully');
  // Initialize any post-creation logic
};

<ToolbarComponent created={handleCreated}>
  <ItemsDirective>
    {/* items */}
  </ItemsDirective>
</ToolbarComponent>

destroyed Event

Fired when the Toolbar component is destroyed:

const handleDestroyed = () => {
  console.log('Toolbar destroyed');
  // Cleanup resources
};

<ToolbarComponent destroyed={handleDestroyed}>
  <ItemsDirective>
    {/* items */}
  </ItemsDirective>
</ToolbarComponent>

Complete Event Handling Example

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

const App = () => {
  const [messages, setMessages] = useState([]);

  const addMessage = (msg) => {
    setMessages([...messages, msg]);
  };

  const handleBeforeCreate = (args) => {
    addMessage('beforeCreate: Initializing...');
  };

  const handleCreated = () => {
    addMessage('created: Component ready');
  };

  const handleClick = (args) => {
    addMessage(`clicked: ${args.item.text}`);
  };

  const handleKeyDown = (args) => {
    addMessage(`keyDown: ${args.originalEvent.key} on ${args.currentItem?.textContent}`);
  };

  return (
    <>
      <ToolbarComponent
        beforeCreate={handleBeforeCreate}
        created={handleCreated}
        clicked={handleClick}
        keyDown={handleKeyDown}
      >
        <ItemsDirective>
          <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
          <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
          <ItemDirective text="Paste" prefixIcon="e-paste-icon" />
        </ItemsDirective>
      </ToolbarComponent>
      
      <div style={{ marginTop: '20px' }}>
        <h3>Event Log:</h3>
        {messages.map((msg, i) => (
          <div key={i}>{msg}</div>
        ))}
      </div>
    </>
  );
};

export default App;

---

Scroll Step Customization

Control Scroll Distance

Customize how much the toolbar scrolls:

<ToolbarComponent 
  scrollStep={100}
  overflowMode="Scrollable"
>
  <ItemsDirective>
    {/* items */}
  </ItemsDirective>
</ToolbarComponent>

Default scrollStep is 50 pixels. Increase for larger jumps, decrease for finer control.

Dynamic Scroll Step

Adjust based on device type:

const App = () => {
  const isMobile = window.innerWidth < 768;
  const scrollStep = isMobile ? 150 : 50;

  return (
    <ToolbarComponent 
      scrollStep={scrollStep}
      overflowMode="Scrollable"
    >
      <ItemsDirective>
        {/* items */}
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Touch Swipe Distance

Touch swipe behavior is automatic and uses the scrollStep property.

---

Complete Advanced Example

Comprehensive toolbar with multiple advanced features:

import { useState } from 'react';
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

const App = () => {
  const [alignment, setAlignment] = useState('left');
  const [isBold, setIsBold] = useState(false);
  const [isItalic, setIsItalic] = useState(false);
  const [fontSize, setFontSize] = useState(14);

  // Alignment toggle template
  const alignmentTemplate = () => (
    <div style={{ display: 'flex', gap: '2px' }}>
      {['left', 'center', 'right'].map(align => (
        <button
          key={align}
          className={`e-btn ${alignment === align ? 'active' : ''}`}
          onClick={() => setAlignment(align)}
          style={{
            padding: '6px 10px',
            backgroundColor: alignment === align ? '#0066ff' : '#f5f5f5',
            color: alignment === align ? 'white' : 'black',
            border: 'none',
            cursor: 'pointer'
          }}
        >
          {align.charAt(0).toUpperCase()}
        </button>
      ))}
    </div>
  );

  // Font selector template
  const fontTemplate = () => (
    <DropDownListComponent
      dataSource={['Arial', 'Calibri', 'Courier']}
      index={0}
      width={120}
    />
  );

  // Toggle button template
  const toggleTemplate = (label, state, setState) => () => (
    <button
      className="e-btn"
      onClick={() => setState(!state)}
      style={{
        padding: '6px 12px',
        backgroundColor: state ? '#0066ff' : '#f5f5f5',
        color: state ? 'white' : 'black',
        border: 'none',
        cursor: 'pointer',
        fontWeight: state ? 'bold' : 'normal'
      }}
    >
      {label}
    </button>
  );

  return (
    <ToolbarComponent overflowMode="Popup">
      <ItemsDirective>
        {/* File operations */}
        <ItemDirective text="New" prefixIcon="e-new-icon" />
        <ItemDirective text="Open" prefixIcon="e-open-icon" />
        <ItemDirective text="Save" prefixIcon="e-save-icon" />
        <ItemDirective type="Separator" />

        {/* Format operations */}
        <ItemDirective template={toggleTemplate('Bold', isBold, setIsBold)} />
        <ItemDirective template={toggleTemplate('Italic', isItalic, setIsItalic)} />
        <ItemDirective type="Separator" />

        {/* Alignment */}
        <ItemDirective template={alignmentTemplate} />
        <ItemDirective type="Separator" />

        {/* Font selection */}
        <ItemDirective type="Input" template={fontTemplate} />

        {/* Help at end */}
        <ItemDirective 
          text="Help" 
          prefixIcon="e-help-icon" 
          align="Right"
          title="Press F1 for help"
        />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

---

Summary

Advanced features enable powerful customizations:

• Templates - Complete control over item appearance
• Toggle buttons - State-based button behavior
• Links - Navigation and external links
• Tooltips - Contextual help for users
• Component rendering - Embed Syncfusion or custom components
• Command handlers - Custom actions and logic
• Scroll customization - Fine-tune scroll behavior

Combine these features to build sophisticated, interactive toolbars tailored to your application's needs.

Getting Started with Toolbar

Table of Contents

• Dependencies
• Project Setup
• Adding Syncfusion Packages
• CSS Configuration
• Basic Implementation
• HTML Element Initialization
• Global Configuration
• Locale Support
• Right-to-Left (RTL) Support
• Enable Persistence
• Enable Collision Detection
• Enable HTML Sanitizer
• Running Your Application

---

Dependencies

The Toolbar component requires the following minimum dependencies:

@syncfusion/ej2-react-navigations (main package)
├── @syncfusion/ej2-base
├── @syncfusion/ej2-react-base
└── @syncfusion/ej2-navigations
    ├── @syncfusion/ej2-buttons
    └── @syncfusion/ej2-popups

These packages handle the core functionality, button rendering, and popup components.

---

Project Setup

Using Vite (Recommended)

Vite provides faster development builds and optimized production output. Create a new React application:

npm create vite@latest my-toolbar-app -- --template react
cd my-toolbar-app
npm install

For TypeScript support:

npm create vite@latest my-toolbar-app -- --template react-ts
cd my-toolbar-app
npm install

Using Create React App

If you prefer Create React App:

npx create-react-app my-toolbar-app
cd my-toolbar-app
npm start

---

Adding Syncfusion Packages

Install the Toolbar component package:

npm install @syncfusion/ej2-react-navigations --save

This automatically installs all peer dependencies including buttons and popups.

---

CSS Configuration

Step 1: Import Theme Styles

Add the following CSS imports to your src/App.css file:

@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';

Theme Options:

• tailwind3.css - Tailwind theme (recommended)
• bootstrap5.3.css - Bootstrap theme
• fluent2.css - Microsoft Fluent theme
• material3.css - Material Design theme

Step 2: Import CSS in Application

In your src/App.tsx or src/App.jsx:

import './App.css';

---

Basic Implementation

Simple Button Toolbar

Create a toolbar with basic button items:

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

const App = () => {
  return (
    <ToolbarComponent id='toolbar'>
      <ItemsDirective>
        <ItemDirective text="Cut" />
        <ItemDirective text="Copy" />
        <ItemDirective text="Paste" />
        <ItemDirective type="Separator" />
        <ItemDirective text="Bold" />
        <ItemDirective text="Italic" />
        <ItemDirective text="Underline" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

What happens:

• ToolbarComponent creates the toolbar container
• ItemsDirective wraps all toolbar items
• ItemDirective defines individual items
• Default item type is Button
• type="Separator" creates a visual divider

Toolbar with Icons

Add icons to buttons using prefixIcon:

<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>

The icon is positioned before the text. If no text is provided, only the icon displays.

Minimal Working Example

Minimal setup with required imports:

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

export default function App() {
  return (
    <ToolbarComponent>
      <ItemsDirective>
        <ItemDirective text="File" />
        <ItemDirective text="Edit" />
        <ItemDirective text="View" />
      </ItemsDirective>
    </ToolbarComponent>
  );
}

This is the absolute minimum to render a working toolbar.

---

HTML Element Initialization

The Toolbar can also be rendered from HTML structure:

HTML Structure

<div id="root"></div>

React Component

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

const App = () => {
  return (
    <ToolbarComponent>
      <div>
        <div><button className='e-btn e-tbar-btn'>Cut</button></div>
        <div><button className='e-btn e-tbar-btn'>Copy</button></div>
        <div><button className='e-btn e-tbar-btn'>Paste</button></div>
        <div className='e-separator'></div>
        <div><button className='e-btn e-tbar-btn'>Bold</button></div>
        <div><button className='e-btn e-tbar-btn'>Italic</button></div>
      </div>
    </ToolbarComponent>
  );
};

export default App;

Structure:

• ToolbarComponent - Root toolbar element
• Direct <div> children - Items container
• Nested <div> elements - Individual items
• e-btn e-tbar-btn classes - Button styling
• e-separator class - Separator styling

---

Global Configuration

Locale Support

Support multiple languages by setting the locale property:

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

const App = () => {
  return (
    <ToolbarComponent locale="de-DE">
      <ItemsDirective>
        <ItemDirective text="Speichern" prefixIcon="e-save-icon" />
        <ItemDirective text="Drucken" prefixIcon="e-print-icon" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Common locale codes:

• "en-US" - English (United States)
• "en-GB" - English (Great Britain)
• "de-DE" - German
• "fr-FR" - French
• "es-ES" - Spanish
• "ja-JP" - Japanese
• "ar-AE" - Arabic
• "zh-CN" - Chinese (Simplified)

Right-to-Left (RTL) Support

Enable RTL layout for languages that read right-to-left:

<div dir="rtl">
  <ToolbarComponent enableRtl={true}>
    <ItemsDirective>
      <ItemDirective text="حفظ" prefixIcon="e-save-icon" /> {/* Arabic: Save */}
      <ItemDirective text="طباعة" prefixIcon="e-print-icon" /> {/* Arabic: Print */}
    </ItemsDirective>
  </ToolbarComponent>
</div>

Features with RTL:

• All items automatically reverse order
• Text aligns right to left
• Icons maintain position but layout reverses
• Scrollable arrows reverse direction
• Popup alignment adjusts

RTL with Locale

Combine RTL and locale for complete internationalization:

<div dir="rtl">
  <ToolbarComponent enableRtl={true} locale="ar-AE">
    <ItemsDirective>
      {/* Arabic toolbar with RTL layout */}
      <ItemDirective text="جديد" prefixIcon="e-new-icon" />
      <ItemDirective text="فتح" prefixIcon="e-open-icon" />
      <ItemDirective text="حفظ" prefixIcon="e-save-icon" />
    </ItemsDirective>
  </ToolbarComponent>
</div>

Dynamic Locale Change

Update locale at runtime:

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

const App = () => {
  const [locale, setLocale] = useState('en-US');

  const changeLocale = (newLocale) => {
    setLocale(newLocale);
  };

  return (
    <>
      <div style={{ marginBottom: '16px' }}>
        <button onClick={() => changeLocale('en-US')}>English</button>
        <button onClick={() => changeLocale('de-DE')}>Deutsch</button>
        <button onClick={() => changeLocale('fr-FR')}>Français</button>
      </div>

      <ToolbarComponent locale={locale}>
        <ItemsDirective>
          <ItemDirective 
            text={locale === 'de-DE' ? 'Speichern' : locale === 'fr-FR' ? 'Enregistrer' : 'Save'} 
            prefixIcon="e-save-icon" 
          />
          <ItemDirective 
            text={locale === 'de-DE' ? 'Drucken' : locale === 'fr-FR' ? 'Imprimer' : 'Print'} 
            prefixIcon="e-print-icon" 
          />
        </ItemsDirective>
      </ToolbarComponent>
    </>
  );
};

export default App;

Enable Persistence

Save toolbar state (active items, visibility) between sessions:

<ToolbarComponent enablePersistence={true}>
  <ItemsDirective>
    {/* Toolbar state is saved and restored */}
  </ItemsDirective>
</ToolbarComponent>

Enable Collision Detection

Automatically prevent UI elements from colliding:

<ToolbarComponent 
  enableCollision={true}
  overflowMode="Popup"
>
  <ItemsDirective>
    {/* Items automatically adjust to prevent overlap */}
  </ItemsDirective>
</ToolbarComponent>

Enable HTML Sanitizer

Sanitize HTML content to prevent XSS attacks:

<ToolbarComponent enableHtmlSanitizer={true}>
  <ItemsDirective>
    {/* HTML content is sanitized */}
  </ItemsDirective>
</ToolbarComponent>

---

Running Your Application

For Vite Projects

npm run dev

Your application will start at http://localhost:5173

For Create React App

npm start

Your application will start at http://localhost:3000

Development Server

The dev server provides:

• Hot module replacement (HMR) - instant updates when you save
• Source map support for debugging
• Error overlay for build errors
• Automatic browser refresh

---

Troubleshooting

Styles Not Applied

• Ensure CSS imports are in App.css before using the component
• Check that the correct theme file is imported
• Verify the path is correct relative to node_modules

Component Not Rendering

• Check that @syncfusion/ej2-react-navigations is installed
• Verify imports: ToolbarComponent, ItemsDirective, ItemDirective
• Ensure ItemsDirective wraps all items

Icons Not Displaying

• Verify icon class names (e.g., e-cut-icon, e-copy-icon)
• Check that font dependencies are loaded with CSS
• Use prefixIcon or suffixIcon properties

Port Already in Use

For Vite:

npm run dev -- --port 3000

For Create React App:

PORT=3000 npm start

---

Next Steps

Once you have a basic toolbar running: 1. Add different item types → See item-configuration.md 2. Handle responsive overflow → See responsive-modes.md 3. Add interactions → See advanced-features.md 4. Improve accessibility → See accessibility.md

Item Configuration

Table of Contents

• ItemModel API Reference
• Button Type
• Button Properties
• text
• id
• prefixIcon
• suffixIcon
• width
• align
• disabled
• visible
• cssClass
• htmlAttributes
• overflow
• showAlwaysInPopup
• showTextOn
• Separator Type
• Input Type
• Tab Navigation
• Complete Examples

---

ItemModel API Reference

The ItemModel interface defines the structure for each toolbar item. Understanding this API is essential for configuring toolbar items programmatically.

ItemModel Interface Structure

interface ItemModel {
  // Identification
  id?: string;                              // Unique identifier
  
  // Content
  text?: string;                            // Display text
  template?: Function | JSX.Element;        // Custom template
  
  // Icons
  prefixIcon?: string;                      // Icon before text
  suffixIcon?: string;                      // Icon after text
  tooltipText?: string;                     // Hover tooltip
  
  // Appearance
  width?: string;                           // Item width (px, %, em)
  align?: 'Left' | 'Center' | 'Right';      // Alignment in toolbar
  cssClass?: string;                        // Custom CSS classes
  
  // State
  disabled?: boolean;                       // Is item disabled
  visible?: boolean;                        // Is item visible
  
  // Type & Behavior
  type?: 'Button' | 'Separator' | 'Input';  // Item type (default: Button)
  overflow?: 'Show' | 'Hide' | 'None';      // Popup priority (Popup mode)
  showAlwaysInPopup?: boolean;              // Always show in popup
  showTextOn?: 'Both' | 'Overflow' | 'Toolbar'; // Text visibility
  
  // Attributes & Navigation
  htmlAttributes?: { [key: string]: any };  // HTML attributes
  tabIndex?: number;                        // Tab order
}

Items Array Configuration

Configure items as an array in the ToolbarComponent:

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

const App = () => {
  // Define items as array (recommended for dynamic data)
  const toolbarItems = [
    {
      id: 'cut',
      text: 'Cut',
      prefixIcon: 'e-cut-icon',
      tooltipText: 'Cut (Ctrl+X)'
    },
    {
      id: 'copy',
      text: 'Copy',
      prefixIcon: 'e-copy-icon',
      tooltipText: 'Copy (Ctrl+C)'
    },
    {
      id: 'paste',
      text: 'Paste',
      prefixIcon: 'e-paste-icon',
      tooltipText: 'Paste (Ctrl+V)',
      overflow: 'Show'  // Always visible
    },
    {
      type: 'Separator'
    },
    {
      id: 'bold',
      text: 'Bold',
      prefixIcon: 'e-bold-icon',
      overflow: 'Hide'  // Goes to popup
    }
  ];

  return (
    <ToolbarComponent>
      <ItemsDirective>
        {toolbarItems.map((item, index) => (
          <ItemDirective key={index} {...item} />
        ))}
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Using items Property Directly

Pass items array directly to ToolbarComponent:

import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import { useRef } from 'react';

const App = () => {
  const toolbarRef = useRef(null);

  const items = [
    { text: 'New', prefixIcon: 'e-new-icon' },
    { text: 'Open', prefixIcon: 'e-open-icon' },
    { text: 'Save', prefixIcon: 'e-save-icon' },
    { type: 'Separator' },
    { text: 'Print', prefixIcon: 'e-print-icon' }
  ];

  return (
    <ToolbarComponent ref={toolbarRef} items={items}>
    </ToolbarComponent>
  );
};

export default App;

Complete ItemModel Example

Create a fully configured item with all properties:

const complexItem = {
  // Identification
  id: 'advanced-settings',
  
  // Content
  text: 'Settings',
  tooltipText: 'Configure advanced settings (Alt+S)',
  
  // Icons
  prefixIcon: 'e-settings-icon',
  suffixIcon: 'e-dropdown',
  
  // Appearance
  width: '140px',
  align: 'Right',
  cssClass: 'custom-btn highlight-border',
  
  // State
  disabled: false,
  visible: true,
  
  // Type & Behavior
  type: 'Button',
  overflow: 'Show',
  showAlwaysInPopup: false,
  showTextOn: 'Both',
  
  // Attributes
  htmlAttributes: {
    'aria-label': 'Advanced Settings',
    'data-id': 'settings-btn',
    'role': 'button'
  },
  tabIndex: 5
};

<ItemDirective {...complexItem} />

ItemModel Property Types Reference

interface ItemModel {
  id?: string;
  // Type: string
  // Purpose: Unique identifier for the item
  // Example: "save-btn", "format-bold", "menu-file"
  
  text?: string;
  // Type: string
  // Purpose: Display text shown on button or in popup
  // Example: "Save", "Format", "Edit"
  // If omitted with only icon: just icon displays
  
  prefixIcon?: string;
  // Type: string
  // Purpose: CSS class for icon positioned before text
  // Example: "e-save-icon", "e-icons e-copy-icon"
  
  suffixIcon?: string;
  // Type: string
  // Purpose: CSS class for icon positioned after text
  // Example: "e-dropdown", "e-arrow-right"
  // Note: prefixIcon takes priority if both set
  
  width?: string;
  // Type: string (CSS length)
  // Purpose: Set custom item width
  // Examples: "100px", "50%", "auto", "8em"
  
  align?: 'Left' | 'Center' | 'Right';
  // Type: 'Left' | 'Center' | 'Right'
  // Purpose: Align item within toolbar
  // Default: 'Left'
  // Right alignment useful for Help, Settings buttons
  
  disabled?: boolean;
  // Type: boolean
  // Purpose: Disable item interaction
  // Default: false
  // When true: grayed out, no click events
  
  visible?: boolean;
  // Type: boolean
  // Purpose: Control item visibility
  // Default: true
  // When false: hidden but DOM element exists
  
  type?: 'Button' | 'Separator' | 'Input';
  // Type: 'Button' | 'Separator' | 'Input'
  // Purpose: Define item rendering type
  // Default: 'Button'
  // Separator: vertical divider line
  // Input: container for form components
  
  overflow?: 'Show' | 'Hide' | 'None';
  // Type: 'Show' | 'Hide' | 'None'
  // Purpose: Priority for Popup overflow mode
  // 'Show': always visible in toolbar (priority)
  // 'Hide': always moves to popup
  // 'None': default - moves based on space
  
  showAlwaysInPopup?: boolean;
  // Type: boolean
  // Purpose: Force item to always display in popup
  // Default: false
  // Requires overflow mode: 'Popup'
  
  showTextOn?: 'Both' | 'Overflow' | 'Toolbar';
  // Type: 'Both' | 'Overflow' | 'Toolbar'
  // Purpose: Control where button text displays
  // 'Both': visible everywhere (default)
  // 'Overflow': only in popup
  // 'Toolbar': only in main toolbar
  
  tooltipText?: string;
  // Type: string
  // Purpose: HTML title attribute tooltip
  // Example: "Save (Ctrl+S)", "Download file"
  
  template?: Function | JSX.Element;
  // Type: Function | JSX.Element
  // Purpose: Custom rendering template
  // Example: () => <CustomComponent />
  
  htmlAttributes?: { [key: string]: any };
  // Type: object
  // Purpose: HTML attributes applied to element
  // Examples: { 'aria-label': '...', 'data-test-id': '...' }
  
  tabIndex?: number;
  // Type: number
  // Purpose: Tab navigation order
  // Positive: visited in order (1, 2, 3...)
  // 0: visited in DOM order
  // Negative: skipped from tab navigation
  
  cssClass?: string;
  // Type: string
  // Purpose: Custom CSS class(es)
  // Example: "custom-btn highlight-red"
}

Configuration Patterns

Pattern 1: Simple Button Array

const items = [
  { text: 'Cut', prefixIcon: 'e-cut-icon' },
  { text: 'Copy', prefixIcon: 'e-copy-icon' },
  { text: 'Paste', prefixIcon: 'e-paste-icon' }
];

Pattern 2: With Separators & Grouping

const items = [
  // File operations
  { text: 'New', prefixIcon: 'e-new-icon' },
  { text: 'Save', prefixIcon: 'e-save-icon' },
  { type: 'Separator' },
  // Edit operations
  { text: 'Undo', prefixIcon: 'e-undo-icon' },
  { text: 'Redo', prefixIcon: 'e-redo-icon' }
];

Pattern 3: With State & Conditions

const items = [
  {
    id: 'delete',
    text: 'Delete',
    prefixIcon: 'e-delete-icon',
    disabled: !hasSelection,  // Disabled if nothing selected
    overflow: hasSpace ? 'Show' : 'Hide'
  }
];

Pattern 4: Right-Aligned Items

const items = [
  // Left-aligned
  { text: 'File', prefixIcon: 'e-file-icon' },
  { type: 'Separator' },
  // Right-aligned
  { text: 'Help', prefixIcon: 'e-help-icon', align: 'Right' }
];

Pattern 5: Mixed Content

const items = [
  { text: 'Bold', prefixIcon: 'e-bold-icon', type: 'Button' },
  { type: 'Separator' },
  { type: 'Input', template: fontSizeDropdown },
  { type: 'Input', template: colorPicker }
];

Pattern 6: Accessible Items

const items = [
  {
    id: 'save-btn',
    text: 'Save',
    prefixIcon: 'e-save-icon',
    tooltipText: 'Save document (Ctrl+S)',
    htmlAttributes: {
      'aria-label': 'Save document',
      'data-shortcut': 'Ctrl+S'
    }
  }
];

---

Button Type

Button is the default item type in Toolbar. It renders as a clickable command button.

Basic Button

<ItemDirective text="Save" />

This renders as a simple button with text "Save".

Button with Icon

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

• prefixIcon - Icon positioned before the text
• If text is omitted, only the icon displays

---

Button Properties

text

The display text for the button:

<ItemDirective text="Download" />

id

Unique identifier for the button:

<ItemDirective text="Save" id="save-button" />

If not provided, an ID is auto-generated.

prefixIcon

Icon positioned before the text:

<ItemDirective text="Upload" prefixIcon="e-upload-icon" />

Output: 📤 Upload

suffixIcon

Icon positioned after the text:

<ItemDirective text="Settings" suffixIcon="e-dropdown" />

Note: If both prefixIcon and suffixIcon are provided, only prefixIcon is used.

width

Set button width:

<ItemDirective text="Custom Width" width="120px" />

Common values: "auto", "80px", "100%", "150px"

align

Position the item in the toolbar:

<ItemDirective text="Left Aligned" align="Left" />
<ItemDirective text="Center" align="Center" />
<ItemDirective text="Right Aligned" align="Right" />

Alignment options:

• "Left" - Default, aligns at start
• "Center" - Centers in toolbar
• "Right" - Aligns at end (useful for help buttons)

disabled

Disable or enable the button:

<ItemDirective text="Inactive Button" disabled={true} />
<ItemDirective text="Active Button" disabled={false} />

When disabled={true}, the button appears grayed out and click events don't trigger.

visible

Control item visibility:

<ItemDirective text="Visible Item" visible={true} />
<ItemDirective text="Hidden Item" visible={false} />

When visible={false}, the item is hidden from the toolbar but still exists in the DOM.

cssClass

Add custom CSS classes to the button:

<ItemDirective 
  text="Styled Button" 
  cssClass="custom-class highlight-btn" 
/>

CSS:

.custom-class {
  background-color: #e3f2fd;
  border-radius: 4px;
}

.highlight-btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

htmlAttributes

Add HTML attributes to the button element:

<ItemDirective 
  text="Accessible Button"
  htmlAttributes={{
    'aria-label': 'Save document',
    'data-tooltip': 'Click to save',
    'data-test-id': 'save-btn'
  }}
/>

Renders as:

<button aria-label="Save document" data-tooltip="Click to save" data-test-id="save-btn">
  Accessible Button
</button>

overflow

Control where item displays (Popup mode):

<ItemDirective text="Always Show" overflow="Show" />
<ItemDirective text="Always Hide" overflow="Hide" />
<ItemDirective text="Auto" overflow="None" />

Options:

• "Show" - Always in toolbar (priority display)
• "Hide" - Always in popup (secondary display)
• "None" - Default, moves to popup based on space

showAlwaysInPopup

Force item to always display in popup (Popup mode only):

<ItemDirective 
  text="Advanced" 
  showAlwaysInPopup={true} 
  overflow="Hide"
/>

Even if space is available, item appears in popup dropdown.

showTextOn

Control where button text displays:

<ItemDirective 
  text="Cut" 
  prefixIcon="e-cut-icon" 
  showTextOn="Overflow" 
/>
<ItemDirective 
  text="Copy" 
  prefixIcon="e-copy-icon" 
  showTextOn="Toolbar" 
/>

Options:

• "Both" - Text visible everywhere
• "Overflow" - Text only in popup
• "Toolbar" - Text only in toolbar

---

Separator Type

Separator adds a vertical line to visually group related commands:

<ToolbarComponent>
  <ItemsDirective>
    <ItemDirective text="Cut" />
    <ItemDirective text="Copy" />
    <ItemDirective type="Separator" />
    <ItemDirective text="Bold" />
  </ItemsDirective>
</ToolbarComponent>

Separator rules:

• Separators at the beginning or end are not visible
• Used to group related buttons
• No properties can be set for separators

---

Input Type

Input type is for embedding Syncfusion input-based components:

<ItemDirective type="Input" template={<NumericTextBoxComponent value={10} />} />

Using NumericTextBox

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

<ItemDirective 
  type="Input" 
  template={() => (
    <NumericTextBoxComponent format='c2' value={1} />
  )} 
/>

Using DropDownList

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

const data = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey'];

<ItemDirective 
  type="Input" 
  template={() => (
    <DropDownListComponent dataSource={data} width={120} index={0} />
  )} 
/>

Using CheckBox

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';

<ItemDirective 
  type="Input" 
  template={() => (
    <CheckBoxComponent label='Enable Feature' checked={true} />
  )} 
/>

Using RadioButton

import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';

<ItemDirective 
  type="Input" 
  template={() => (
    <RadioButtonComponent label='Option 1' name='group1' checked={true} />
  )} 
/>

---

Tab Navigation

tabIndex Property

Enable tab key navigation with tabIndex:

<ItemDirective text="Item 1" tabIndex={1} />
<ItemDirective text="Item 2" tabIndex={2} />
<ItemDirective text="Item 3" tabIndex={3} />

Users can navigate using Tab and Shift+Tab keys.

tabIndex Rules

• Positive values (1, 2, 3...): Items are navigated in ascending order
• 0: Items are navigated based on DOM order
• Negative values: Item is skipped from tab navigation

Example: Mixed Navigation Order

<ItemDirective text="First" tabIndex={1} />
<ItemDirective text="Third" tabIndex={3} />
<ItemDirective text="Second" tabIndex={2} />

Navigation order: First → Second → Third (despite DOM order)

Example: Full Toolbar Navigation

<ToolbarComponent width="400" overflowMode="Scrollable">
  <ItemsDirective>
    <ItemDirective text="Cut" prefixIcon="e-cut-icon" tabIndex={0} />
    <ItemDirective text="Copy" prefixIcon="e-copy-icon" tabIndex={0} />
    <ItemDirective text="Paste" prefixIcon="e-paste-icon" tabIndex={0} />
    <ItemDirective type="Separator" />
    <ItemDirective text="Bold" prefixIcon="e-bold-icon" tabIndex={0} />
    <ItemDirective text="Underline" prefixIcon="e-underline-icon" tabIndex={0} />
    <ItemDirective text="Italic" prefixIcon="e-italic-icon" tabIndex={0} />
  </ItemsDirective>
</ToolbarComponent>

All items use tabIndex={0} for DOM-based navigation order.

---

Complete Examples

Multi-Type Toolbar

Combining different item types in one toolbar:

import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import { CheckBoxComponent, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

const App = () => {
  const sportList = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey', 'Rugby'];

  const dropDownTemplate = () => (
    <DropDownListComponent dataSource={sportList} width={120} index={2} />
  );

  const numericTemplate = () => (
    <NumericTextBoxComponent format='c2' value={1} />
  );

  const checkBoxTemplate = () => (
    <CheckBoxComponent label='Checkbox' checked={true} />
  );

  const radioTemplate = () => (
    <RadioButtonComponent label='Radio' name='default' checked={true} />
  );

  return (
    <ToolbarComponent>
      <ItemsDirective>
        {/* Button group */}
        <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
        <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
        <ItemDirective type="Separator" />
        
        {/* Format group */}
        <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
        <ItemDirective text="Italic" prefixIcon="e-italic-icon" />
        <ItemDirective text="Underline" prefixIcon="e-underline-icon" />
        <ItemDirective type="Separator" />
        
        {/* Input components */}
        <ItemDirective type="Input" template={numericTemplate} />
        <ItemDirective type="Input" template={dropDownTemplate} />
        <ItemDirective type="Input" template={checkBoxTemplate} />
        <ItemDirective type="Input" template={radioTemplate} />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Right-Aligned Help Button

Use align="Right" to position items at the end:

<ToolbarComponent>
  <ItemsDirective>
    <ItemDirective text="Save" prefixIcon="e-save-icon" />
    <ItemDirective text="Print" prefixIcon="e-print-icon" />
    <ItemDirective text="Export" prefixIcon="e-export-icon" />
    <ItemDirective 
      text="Help" 
      prefixIcon="e-help-icon" 
      align="Right" 
      id="help-button"
    />
  </ItemsDirective>
</ToolbarComponent>

The Help button appears on the right side of the toolbar.

Icon-Only Toolbar

Buttons with icons only (no text):

<ToolbarComponent>
  <ItemsDirective>
    <ItemDirective prefixIcon="e-cut-icon" />
    <ItemDirective prefixIcon="e-copy-icon" />
    <ItemDirective prefixIcon="e-paste-icon" />
    <ItemDirective type="Separator" />
    <ItemDirective prefixIcon="e-bold-icon" />
    <ItemDirective prefixIcon="e-italic-icon" />
    <ItemDirective prefixIcon="e-underline-icon" />
  </ItemsDirective>
</ToolbarComponent>

Cleaner, more compact appearance.

---

Common Patterns

Text Editor Toolbar

<ToolbarComponent width="500">
  <ItemsDirective>
    {/* File operations */}
    <ItemDirective text="New" prefixIcon="e-new-icon" />
    <ItemDirective text="Open" prefixIcon="e-open-icon" />
    <ItemDirective text="Save" prefixIcon="e-save-icon" />
    <ItemDirective type="Separator" />
    
    {/* Edit operations */}
    <ItemDirective text="Undo" prefixIcon="e-undo-icon" />
    <ItemDirective text="Redo" prefixIcon="e-redo-icon" />
    <ItemDirective type="Separator" />
    
    {/* Formatting */}
    <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
    <ItemDirective text="Italic" prefixIcon="e-italic-icon" />
    <ItemDirective text="Underline" prefixIcon="e-underline-icon" />
  </ItemsDirective>
</ToolbarComponent>

Form Toolbar with Inputs

<ToolbarComponent>
  <ItemsDirective>
    <ItemDirective text="Filter" />
    <ItemDirective type="Input" template={() => (
      <DropDownListComponent dataSource={['All', 'Active', 'Inactive']} />
    )} />
    <ItemDirective type="Input" template={() => (
      <NumericTextBoxComponent placeholder="Items per page" />
    )} />
    <ItemDirective text="Search" prefixIcon="e-search-icon" align="Right" />
  </ItemsDirective>
</ToolbarComponent>

---

Edge Cases

Separator Position

Separators at start or end are not displayed:

{/* These separators are hidden */}
<ItemDirective type="Separator" />
<ItemDirective text="Item 1" />
<ItemDirective type="Separator" />

Item Without Text and Icon

An empty button renders but has no content:

{/* Not recommended - invisible button */}
<ItemDirective />

Always provide either text or prefixIcon.

Mixed Tab Index Values

If you mix specific numbers and 0:

<ItemDirective text="First" tabIndex={1} />
<ItemDirective text="Second" tabIndex={0} />
<ItemDirective text="Third" tabIndex={2} />

Items with tabIndex > 0 are visited first in order, then items with tabIndex={0} in DOM order.

Responsive Modes

Table of Contents

• Scrollable Mode
• Popup Mode
• MultiRow Mode
• Extended Mode
• Command Priority
• Text Display Options
• Mode Comparison
• Choosing the Right Mode
• Examples

---

Scrollable Mode

Scrollable is the default overflow mode. Items display in a single line with horizontal scrolling when space is limited.

How It Works

• All items stay visible in a horizontal row
• Left/right navigation arrows appear when items overflow
• Touch swipe and keyboard arrow keys navigate hidden items
• Arrows become disabled when reaching start/end

Basic Scrollable Toolbar

<ToolbarComponent overflowMode="Scrollable">
  <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" />
    <ItemDirective text="Color-Picker" prefixIcon="e-color-icon" />
    <ItemDirective type="Separator" />
    <ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon" />
    <ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon" />
  </ItemsDirective>
</ToolbarComponent>

Navigation Interactions

Mouse clicks:

• Click left arrow → Previous items become visible
• Click right arrow → Next items become visible
• Hold arrow continuously → Continuous scrolling

Touch devices:

• Swipe left → Scroll right
• Swipe right → Scroll left
• Hold and drag → Continuous scroll

Keyboard:

• Left arrow key → Previous item
• Right arrow key → Next item

Limited Width Example

<ToolbarComponent width="300px" overflowMode="Scrollable">
  <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>

With width="300px", navigation arrows appear to scroll through items.

---

Popup Mode

Popup mode hides overflow items in a dropdown container, keeping the toolbar compact.

How It Works

• Items that fit in available space display normally
• Overflow items move to a popup dropdown
• Dropdown icon appears at toolbar end
• Click dropdown to view overflow items

Basic Popup Toolbar

<ToolbarComponent overflowMode="Popup" width="380px">
  <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" />
    <ItemDirective type="Separator" />
    <ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon" />
    <ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon" />
  </ItemsDirective>
</ToolbarComponent>

First few items stay visible; overflow items go to popup.

Popup Display Behavior

• Popup opens on dropdown icon click
• If popup height exceeds page height, additional items are hidden
• Items in popup maintain their visual representation (icons, text)
• Pressing Escape closes the popup

---

Command Priority

Control which items display in toolbar vs popup using overflow property.

Priority Options

Show Priority Example

Force important commands to stay visible:

<ToolbarComponent overflowMode="Popup" width="300px">
  <ItemsDirective>
    {/* Always visible */}
    <ItemDirective text="Cut" prefixIcon="e-cut-icon" overflow="Show" />
    <ItemDirective text="Copy" prefixIcon="e-copy-icon" overflow="Show" />
    <ItemDirective text="Paste" prefixIcon="e-paste-icon" overflow="Show" />
    <ItemDirective type="Separator" />
    
    {/* Will move to popup */}
    <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
    <ItemDirective text="Italic" prefixIcon="e-italic-icon" />
    <ItemDirective text="Underline" prefixIcon="e-underline-icon" />
    
    {/* Always in popup */}
    <ItemDirective text="Advanced..." prefixIcon="e-more-icon" overflow="Hide" />
  </ItemsDirective>
</ToolbarComponent>

With overflow="Show", Cut, Copy, Paste stay in toolbar even when space is limited.

Hide Priority Example

Move less-used commands to popup:

<ToolbarComponent overflowMode="Popup" width="400px">
  <ItemsDirective>
    <ItemDirective text="Save" prefixIcon="e-save-icon" overflow="Show" />
    <ItemDirective text="Print" prefixIcon="e-print-icon" overflow="Show" />
    <ItemDirective type="Separator" overflow="Show" />
    
    <ItemDirective text="Spell Check" overflow="Hide" />
    <ItemDirective text="Grammar Check" overflow="Hide" />
    <ItemDirective text="Word Count" overflow="Hide" />
  </ItemsDirective>
</ToolbarComponent>

Spell/Grammar/Word Count commands go to popup first.

Behavior When Show Priority Overflows

If Show priority items exceed available space:

{/* All Show items: too many for toolbar */}
<ItemDirective text="Item 1" overflow="Show" />
<ItemDirective text="Item 2" overflow="Show" />
<ItemDirective text="Item 3" overflow="Show" />
<ItemDirective text="Item 4" overflow="Show" /> {/* This might move to popup */}

Excess Show items move to popup top position before Hide items.

---

MultiRow Mode

MultiRow mode wraps overflow items to multiple rows instead of hiding them. Items display in a grid-like structure within the toolbar.

How It Works

• Items fill the available width
• When space is exceeded, items wrap to the next row
• All items remain visible (no popup)
• Toolbar height adjusts based on number of rows needed
• No horizontal scrolling or navigation arrows

Basic MultiRow Toolbar

<ToolbarComponent overflowMode="MultiRow" width="300px" height="auto">
  <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" />
    <ItemDirective text="Color-Picker" prefixIcon="e-color-icon" />
    <ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon" />
    <ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon" />
  </ItemsDirective>
</ToolbarComponent>

Result: First row shows Cut, Copy, Paste; second row shows Bold, Italic, Underline, etc.

MultiRow with Responsive Width

<ToolbarComponent 
  overflowMode="MultiRow" 
  width="100%" 
  height="auto"
>
  <ItemsDirective>
    {/* Items wrap based on available width */}
    <ItemDirective text="New" prefixIcon="e-new-icon" />
    <ItemDirective text="Open" prefixIcon="e-open-icon" />
    <ItemDirective text="Save" prefixIcon="e-save-icon" />
    <ItemDirective type="Separator" />
    <ItemDirective text="Print" prefixIcon="e-print-icon" />
    <ItemDirective text="Export" prefixIcon="e-export-icon" />
    <ItemDirective type="Separator" />
    <ItemDirective text="Undo" prefixIcon="e-undo-icon" />
    <ItemDirective text="Redo" prefixIcon="e-redo-icon" />
  </ItemsDirective>
</ToolbarComponent>

On wide screens, more items fit per row. On narrow screens, fewer items display per row and more rows appear.

MultiRow with Priority

Control which items display using overflow property:

<ToolbarComponent overflowMode="MultiRow" width="250px" height="auto">
  <ItemsDirective>
    {/* Show priority items in first row */}
    <ItemDirective text="Save" prefixIcon="e-save-icon" overflow="Show" />
    <ItemDirective text="Print" prefixIcon="e-print-icon" overflow="Show" />
    
    {/* Hide priority items in subsequent rows */}
    <ItemDirective text="Export PDF" overflow="Hide" />
    <ItemDirective text="Export Excel" overflow="Hide" />
    <ItemDirective text="Export Word" overflow="Hide" />
  </ItemsDirective>
</ToolbarComponent>

Use Cases for MultiRow

• Mobile-first design - Stack items naturally on narrow screens
• Variable width containers - Adapts to available space
• All items visible - No hidden menus or dropdowns
• Dashboard toolbars - Multi-row command layouts
• Responsive forms - Toolbar adapts to form width

---

Extended Mode

Extended mode combines scrolling and multi-row behavior. Items wrap to multiple rows with horizontal scrolling when needed.

How It Works

• Items wrap to multiple rows when space is limited
• If all rows don't fit, horizontal scroll arrows appear
• Users can scroll through rows instead of items
• Provides both vertical and horizontal overflow handling
• Best for toolbars with many items and limited width

Basic Extended Toolbar

<ToolbarComponent overflowMode="Extended" width="300px" height="auto">
  <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" />
    <ItemDirective type="Separator" />
    <ItemDirective text="Font Color" prefixIcon="e-color-icon" />
    <ItemDirective text="Highlight" prefixIcon="e-highlight-icon" />
    <ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon" />
    <ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon" />
  </ItemsDirective>
</ToolbarComponent>

Extended with Multiple Rows

<ToolbarComponent 
  overflowMode="Extended" 
  width="280px" 
  height="80px"
>
  <ItemsDirective>
    <ItemDirective text="Item 1" />
    <ItemDirective text="Item 2" />
    <ItemDirective text="Item 3" />
    <ItemDirective type="Separator" />
    <ItemDirective text="Item 4" />
    <ItemDirective text="Item 5" />
    <ItemDirective text="Item 6" />
    <ItemDirective type="Separator" />
    <ItemDirective text="Item 7" />
    <ItemDirective text="Item 8" />
  </ItemsDirective>
</ToolbarComponent>

If items don't fit in 2 rows of 280px width, horizontal scroll arrows appear to navigate between rows.

Extended with Priority Control

<ToolbarComponent overflowMode="Extended" width="300px">
  <ItemsDirective>
    {/* Essential items always visible */}
    <ItemDirective text="New" overflow="Show" />
    <ItemDirective text="Save" overflow="Show" />
    <ItemDirective text="Delete" overflow="Show" />
    
    {/* Secondary items may wrap */}
    <ItemDirective text="Copy" />
    <ItemDirective text="Paste" />
    
    {/* Hidden by default if space limited */}
    <ItemDirective text="Advanced Options" overflow="Hide" />
    <ItemDirective text="Settings" overflow="Hide" />
  </ItemsDirective>
</ToolbarComponent>

Use Cases for Extended

• Rich text editors - Many formatting options with limited width
• Complex dashboards - Multiple tool categories in one bar
• Data grids - Large toolbar with many actions
• Document editors - Professional tools with wrapping
• Responsive design - Adapts from wide to narrow viewports

---

Mode Comparison Table

With horizontal scrolling arrows *With horizontal scroll arrows if needed

---

Always in Popup Items

Use showAlwaysInPopup to keep items always in popup dropdown:

<ItemDirective text="Advanced Settings" overflow="Show" showAlwaysInPopup={true} />

Note: This property doesn't work with overflow="Show" - item must use overflow="Hide".

<ItemDirective 
  text="Advanced Settings" 
  showAlwaysInPopup={true}
/>

Item always appears in popup, regardless of space.

---

Text Display Options

Control where button text displays using showTextOn.

Display Modes

Icon + Text in Popup Only

Show icons in toolbar, full text in popup:

<ToolbarComponent overflowMode="Popup" width="330px">
  <ItemsDirective>
    <ItemDirective 
      text="Cut" 
      prefixIcon="e-cut-icon" 
      showTextOn="Overflow" 
      overflow="Show" 
    />
    <ItemDirective 
      text="Copy" 
      prefixIcon="e-copy-icon" 
      showTextOn="Overflow" 
      overflow="Show" 
    />
    <ItemDirective 
      text="Paste" 
      prefixIcon="e-paste-icon" 
      showTextOn="Overflow" 
      overflow="Show" 
    />
    <ItemDirective type="Separator" />
    <ItemDirective 
      text="Bold" 
      prefixIcon="e-bold-icon" 
      showTextOn="Overflow" 
    />
    <ItemDirective 
      text="Italic" 
      prefixIcon="e-italic-icon" 
      showTextOn="Overflow" 
    />
  </ItemsDirective>
</ToolbarComponent>

Result:

• Toolbar: Shows icons only (compact)
• Popup: Shows icons + text (informative)

Text Always Visible

Show text in both toolbar and popup:

<ItemDirective 
  text="Settings" 
  prefixIcon="e-settings-icon" 
  showTextOn="Both" 
/>

Text Only in Toolbar

Hide text in popup, show in toolbar:

<ItemDirective 
  text="Help" 
  showTextOn="Toolbar" 
  overflow="Hide" 
/>

---

Choosing the Right Mode

Use Scrollable When:

• You want all items always accessible
• Users prefer continuous horizontal scroll
• Toolbar has moderate number of items (8-12)
• Screen width is variable but usually large
• You want familiar scroll behavior

Example:

<ToolbarComponent overflowMode="Scrollable" width="100%">
  {/* Rich text editor with many formatting options */}
</ToolbarComponent>

Use Popup When:

• You want a compact toolbar
• Important items fit in visible area
• Less-used items can hide in dropdown
• Space is constrained (mobile, narrow panels)
• You want clean, minimal appearance

Example:

<ToolbarComponent overflowMode="Popup" width="400px">
  {/* Mobile toolbar with priority commands visible */}
</ToolbarComponent>

---

Examples

Mobile-Optimized Toolbar

<ToolbarComponent overflowMode="Popup" width="100%">
  <ItemsDirective>
    {/* Essential commands always visible */}
    <ItemDirective 
      text="New" 
      prefixIcon="e-new-icon" 
      overflow="Show" 
      showTextOn="Toolbar"
    />
    <ItemDirective 
      text="Save" 
      prefixIcon="e-save-icon" 
      overflow="Show" 
      showTextOn="Toolbar"
    />
    <ItemDirective type="Separator" overflow="Show" />
    
    {/* Secondary commands in popup with full text */}
    <ItemDirective 
      text="Print" 
      prefixIcon="e-print-icon" 
      showTextOn="Overflow"
    />
    <ItemDirective 
      text="Export" 
      prefixIcon="e-export-icon" 
      showTextOn="Overflow"
    />
    <ItemDirective 
      text="Share" 
      prefixIcon="e-share-icon" 
      showTextOn="Overflow"
    />
  </ItemsDirective>
</ToolbarComponent>

Rich Text Editor Toolbar

<ToolbarComponent overflowMode="Scrollable" width="100%">
  <ItemsDirective>
    {/* File operations */}
    <ItemDirective text="New" prefixIcon="e-new-icon" />
    <ItemDirective text="Open" prefixIcon="e-open-icon" />
    <ItemDirective text="Save" prefixIcon="e-save-icon" />
    <ItemDirective text="Print" prefixIcon="e-print-icon" />
    <ItemDirective type="Separator" />
    
    {/* Edit operations */}
    <ItemDirective text="Undo" prefixIcon="e-undo-icon" />
    <ItemDirective text="Redo" prefixIcon="e-redo-icon" />
    <ItemDirective type="Separator" />
    
    {/* Format operations */}
    <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
    <ItemDirective text="Italic" prefixIcon="e-italic-icon" />
    <ItemDirective text="Underline" prefixIcon="e-underline-icon" />
    <ItemDirective text="Strikethrough" prefixIcon="e-strikethrough-icon" />
    
    {/* Color picker and font size at end */}
    <ItemDirective text="Font Color" prefixIcon="e-color-icon" align="Right" />
  </ItemsDirective>
</ToolbarComponent>

Compact Dashboard Toolbar

<ToolbarComponent overflowMode="Popup" width="500px">
  <ItemsDirective>
    {/* Always visible */}
    <ItemDirective 
      text="Refresh" 
      prefixIcon="e-refresh-icon" 
      overflow="Show" 
    />
    <ItemDirective 
      text="Filter" 
      prefixIcon="e-filter-icon" 
      overflow="Show" 
    />
    <ItemDirective type="Separator" overflow="Show" />
    
    {/* Visible if space */}
    <ItemDirective text="Export to Excel" prefixIcon="e-export-icon" />
    <ItemDirective text="Export to PDF" prefixIcon="e-pdf-icon" />
    <ItemDirective type="Separator" />
    
    {/* Settings always in popup */}
    <ItemDirective 
      text="Column Settings" 
      showAlwaysInPopup={true}
    />
    <ItemDirective 
      text="View Options" 
      showAlwaysInPopup={true}
    />
  </ItemsDirective>
</ToolbarComponent>

---

Edge Cases

Empty Overflow

If all items fit in toolbar, no popup appears:

<ToolbarComponent overflowMode="Popup" width="1000px">
  {/* Few items that fit easily - no popup needed */}
</ToolbarComponent>

All Hide Priority

If all items have overflow="Hide", they all move to popup:

<ToolbarComponent overflowMode="Popup">
  <ItemsDirective>
    <ItemDirective text="Item 1" overflow="Hide" />
    <ItemDirective text="Item 2" overflow="Hide" />
    <ItemDirective text="Item 3" overflow="Hide" />
  </ItemsDirective>
</ToolbarComponent>

Toolbar becomes empty except dropdown arrow.

Separator in Popup

Separators move to popup when items overflow:

<ToolbarComponent overflowMode="Popup" width="200px">
  <ItemsDirective>
    <ItemDirective text="Item 1" />
    <ItemDirective type="Separator" />
    <ItemDirective text="Item 2" />
    <ItemDirective text="Item 3" />
    <ItemDirective text="Item 4" />
  </ItemsDirective>
</ToolbarComponent>

Separator moves to popup with overflowing items, maintaining visual grouping.

Styling & Customization

Table of Contents

• CSS Class Structure
• Toolbar Container Styling
• Item & Button Styling
• Icon Styling
• State Styling
• Theme Integration
• Popup Customization CSS Classes
• Complete Examples

---

CSS Class Structure

Syncfusion Toolbar uses a predictable CSS class structure for styling.

Main Classes

.e-toolbar              /* Toolbar container */
.e-toolbar-item         /* Individual toolbar item wrapper */
.e-tbar-btn             /* Toolbar button element */
.e-icons                /* Icon element */
.e-separator            /* Separator element */
.e-toolbar-pop          /* Popup dropdown */
.e-overflow-button      /* Overflow dropdown toggle button */

Complete Structure Example

<div class="e-toolbar">
  <div class="e-toolbar-item">
    <button class="e-btn e-tbar-btn">
      <span class="e-icons e-cut-icon"></span>
      Cut
    </button>
  </div>
  <div class="e-toolbar-item">
    <div class="e-separator"></div>
  </div>
</div>

---

Toolbar Container Styling

Basic Toolbar Styling

.e-toolbar {
  background-color: #f0f0f0;
  border: 2px solid #333;
  border-radius: 4px;
  padding: 8px;
}

Custom Background

.e-toolbar {
  background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
  color: white;
}

.e-toolbar .e-tbar-btn {
  color: white;
}

Bordered Toolbar

.e-toolbar {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Compact Toolbar

.e-toolbar {
  padding: 4px;
}

.e-toolbar .e-toolbar-item {
  margin: 2px;
}

Full-Width Toolbar

.e-toolbar {
  width: 100%;
  box-sizing: border-box;
}

---

Item & Button Styling

Item Container

.e-toolbar .e-toolbar-item {
  background: #ffffff;
  border: 1px solid #ddd;
  margin: 0 4px;
  padding: 4px;
}

Button Styling

.e-toolbar .e-tbar-btn {
  background-color: #f5f5f5;
  border: 1px solid #999;
  border-radius: 2px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}

Button with Icons

.e-toolbar .e-tbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.e-toolbar .e-tbar-btn .e-icons {
  font-size: 18px;
}

Custom Button Colors

.e-toolbar .e-tbar-btn {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}

Button Sizing

/* Large buttons */
.e-toolbar .e-tbar-btn {
  padding: 10px 16px;
  font-size: 16px;
}

/* Small buttons */
.e-toolbar .e-tbar-btn {
  padding: 4px 8px;
  font-size: 12px;
}

---

Icon Styling

Icon Properties

.e-toolbar .e-icons {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

Icon Colors

/* Blue icons */
.e-toolbar .e-icons {
  color: #0066ff;
}

/* White icons on dark background */
.e-toolbar .e-icons {
  color: #ffffff;
}

Icon Size Variations

/* Small icons */
.e-toolbar .e-icons {
  font-size: 14px;
}

/* Large icons */
.e-toolbar .e-icons {
  font-size: 20px;
}

/* Extra large icons */
.e-toolbar .e-icons {
  font-size: 24px;
}

Icon Spacing

.e-toolbar .e-tbar-btn {
  gap: 8px; /* Space between icon and text */
}

---

State Styling

Hover State

.e-toolbar .e-tbar-btn:hover {
  background-color: #e8e8e8;
  border-color: #666;
}

.e-toolbar .e-tbar-btn:hover .e-icons {
  color: #0066ff;
}

Focus State

.e-toolbar .e-tbar-btn:focus {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

.e-toolbar .e-tbar-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

Active/Selected State

.e-toolbar .e-tbar-btn.e-active {
  background-color: #0066ff;
  color: white;
  border-color: #0056b3;
}

.e-toolbar .e-tbar-btn.e-active .e-icons {
  color: white;
}

Disabled State

.e-toolbar .e-tbar-btn:disabled,
.e-toolbar .e-tbar-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.e-toolbar .e-tbar-btn:disabled .e-icons {
  color: #999;
}

---

Separator Styling

Basic Separator

.e-toolbar .e-separator {
  border-left: 1px solid #ccc;
  height: 24px;
  margin: 0 8px;
}

Custom Separator

.e-toolbar .e-separator {
  border-left: 2px solid #0066ff;
  height: 28px;
  margin: 0 12px;
  border-radius: 1px;
}

Colored Separator

.e-toolbar .e-separator {
  border-left-color: #ff6600;
}

---

Theme Integration

Tailwind Theme Classes

The Toolbar automatically applies Tailwind classes when the theme is imported:

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

No additional configuration needed.

Bootstrap Theme Classes

@import '../node_modules/@syncfusion/ej2-react-navigations/styles/bootstrap5.3.css';

Toolbar integrates with Bootstrap styling.

Theme Override

Override theme colors with custom CSS:

/* After theme import */
.e-toolbar {
  background-color: var(--custom-toolbar-bg);
}

.e-toolbar .e-tbar-btn {
  background-color: var(--custom-btn-bg);
}

CSS Variables

Use CSS variables for consistent theming:

:root {
  --toolbar-bg: #f5f5f5;
  --toolbar-border: #ddd;
  --btn-bg: #ffffff;
  --btn-hover: #e8e8e8;
  --icon-color: #333;
}

.e-toolbar {
  background-color: var(--toolbar-bg);
  border-color: var(--toolbar-border);
}

.e-toolbar .e-tbar-btn {
  background-color: var(--btn-bg);
}

.e-toolbar .e-tbar-btn:hover {
  background-color: var(--btn-hover);
}

.e-toolbar .e-icons {
  color: var(--icon-color);
}

---

Popup Customization CSS Classes

When using Popup overflow mode, customize popup appearance with these CSS classes:

Popup Container

.e-toolbar-pop {
  /* Main popup dropdown container */
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
}

Overflow Button

.e-overflow-button {
  /* The dropdown toggle button at end of toolbar */
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 6px 10px;
}

.e-overflow-button:hover {
  background-color: #e8e8e8;
}

Item Display Control

.e-overflow-show {
  /* Items with overflow="Show" */
  display: flex !important;
  background-color: #ffffff;
}

.e-overflow-hide {
  /* Items with overflow="Hide" */
  display: flex !important;
  background-color: #f9f9f9;
}

Text Display Modes

.e-popup-text {
  /* Text visible in popup only */
  font-weight: 500;
  color: #1976d2;
}

.e-toolbar-text {
  /* Text visible in toolbar only */
  font-weight: normal;
  color: #333;
}

Complete Popup Customization Example

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

const App = () => {
  return (
    <ToolbarComponent overflowMode="Popup" width="350px">
      <ItemsDirective>
        <ItemDirective 
          text="Cut" 
          prefixIcon="e-cut-icon" 
          overflow="Show" 
          showTextOn="Overflow"
        />
        <ItemDirective 
          text="Copy" 
          prefixIcon="e-copy-icon" 
          overflow="Show" 
          showTextOn="Overflow"
        />
        <ItemDirective 
          text="Advanced" 
          overflow="Hide" 
          showTextOn="Overflow"
        />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

/* Customize popup appearance */
.e-toolbar-pop {
  background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
  border: 2px solid #0066ff;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.15);
}

/* Show priority items styling */
.e-overflow-show {
  background-color: #e3f2fd;
  border-left: 3px solid #0066ff;
}

/* Hide priority items styling */
.e-overflow-hide {
  background-color: #fafafa;
  opacity: 0.9;
}

/* Text styling */
.e-popup-text {
  font-size: 14px;
  font-weight: 600;
  color: #0066ff;
}

---

Complete Examples

Minimal Styled Toolbar

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

const App = () => {
  return (
    <ToolbarComponent className="custom-toolbar">
      <ItemsDirective>
        <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
        <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
        <ItemDirective text="Paste" prefixIcon="e-paste-icon" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.custom-toolbar {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px;
}

.custom-toolbar .e-tbar-btn {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  padding: 6px 12px;
}

.custom-toolbar .e-tbar-btn:hover {
  background-color: #f5f5f5;
  border-color: #999;
}

Dark Mode Toolbar

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

const App = () => {
  return (
    <ToolbarComponent className="dark-toolbar">
      <ItemsDirective>
        <ItemDirective text="New" prefixIcon="e-new-icon" />
        <ItemDirective text="Open" prefixIcon="e-open-icon" />
        <ItemDirective text="Save" prefixIcon="e-save-icon" />
        <ItemDirective type="Separator" />
        <ItemDirective text="Print" prefixIcon="e-print-icon" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.dark-toolbar {
  background-color: #2d2d2d;
  border: 1px solid #1a1a1a;
  color: #ffffff;
}

.dark-toolbar .e-tbar-btn {
  background-color: #3d3d3d;
  color: #ffffff;
  border-color: #555;
}

.dark-toolbar .e-tbar-btn:hover {
  background-color: #4d4d4d;
  border-color: #888;
}

.dark-toolbar .e-icons {
  color: #ffffff;
}

.dark-toolbar .e-separator {
  border-left-color: #555;
}

Colorful Gradient Toolbar

const App = () => {
  return (
    <ToolbarComponent className="gradient-toolbar">
      <ItemsDirective>
        <ItemDirective text="Dashboard" prefixIcon="e-dashboard-icon" />
        <ItemDirective text="Reports" prefixIcon="e-chart-icon" />
        <ItemDirective text="Settings" prefixIcon="e-settings-icon" align="Right" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.gradient-toolbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gradient-toolbar .e-tbar-btn {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 500;
}

.gradient-toolbar .e-tbar-btn:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Material Design Toolbar

const App = () => {
  return (
    <ToolbarComponent className="material-toolbar">
      <ItemsDirective>
        <ItemDirective text="Create" prefixIcon="e-add-icon" />
        <ItemDirective text="Edit" prefixIcon="e-edit-icon" />
        <ItemDirective text="Delete" prefixIcon="e-delete-icon" />
        <ItemDirective type="Separator" />
        <ItemDirective text="More" prefixIcon="e-more-icon" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.material-toolbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.material-toolbar .e-tbar-btn {
  background-color: transparent;
  color: #1976d2;
  border: none;
  padding: 8px 16px;
  border-radius: 2px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 13px;
}

.material-toolbar .e-tbar-btn:hover {
  background-color: rgba(25, 118, 210, 0.08);
}

.material-toolbar .e-tbar-btn:active {
  background-color: rgba(25, 118, 210, 0.12);
}

Compact Mobile Toolbar

const App = () => {
  return (
    <ToolbarComponent className="mobile-toolbar">
      <ItemsDirective>
        <ItemDirective prefixIcon="e-back-icon" />
        <ItemDirective text="Title" />
        <ItemDirective prefixIcon="e-search-icon" align="Right" />
        <ItemDirective prefixIcon="e-more-icon" align="Right" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

CSS:

.mobile-toolbar {
  background-color: #2196f3;
  color: white;
  padding: 8px;
  display: flex;
  justify-content: space-between;
}

.mobile-toolbar .e-tbar-btn {
  background-color: transparent;
  color: white;
  border: none;
  padding: 8px;
  font-size: 14px;
}

.mobile-toolbar .e-tbar-btn:active {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.mobile-toolbar .e-icons {
  color: white;
  font-size: 20px;
}

---

Tips & Best Practices

1. Maintain Visual Hierarchy

/* Primary action */
.e-toolbar .e-tbar-btn.primary {
  background-color: #0066ff;
  color: white;
}

/* Secondary action */
.e-toolbar .e-tbar-btn.secondary {
  background-color: #f5f5f5;
  color: #333;
}

2. Consistent Spacing

.e-toolbar {
  padding: 12px;
  gap: 8px;
}

3. Accessible Colors

Ensure sufficient contrast:

/* Good: High contrast */
.e-toolbar .e-tbar-btn {
  background: white;
  color: black;  /* 21:1 ratio */
}

/* Avoid: Low contrast */
.e-toolbar .e-tbar-btn {
  background: #eeeeee;
  color: #cccccc;  /* 1.18:1 - fails WCAG AA */
}

4. Clear Focus Indicator

.e-toolbar .e-tbar-btn:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

5. Responsive Sizing

@media (max-width: 768px) {
  .e-toolbar .e-tbar-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .e-toolbar .e-icons {
    font-size: 14px;
  }
}

---

Performance Considerations

Minimize Repaints

/* Avoid: Animation on paint properties */
.e-toolbar .e-tbar-btn {
  background-color: #fff;
  transition: background-color 0.3s; /* OK */
}

/* Better: Use transform for animation */
.e-toolbar .e-tbar-btn:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
}

CSS Custom Properties

Use CSS variables to reduce recalculations:

:root {
  --primary-color: #0066ff;
  --padding: 12px;
  --border-radius: 4px;
}

.e-toolbar {
  padding: var(--padding);
}

.e-toolbar .e-tbar-btn {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

This enables rapid theme changes without recalculating all values.