Implementing Syncfusion TypeScript Toolbar

Overview

The Syncfusion TypeScript Toolbar is a navigation component that displays a group of command buttons arranged horizontally. It's built on Essential JS 2 and provides professional-grade toolbar functionality with responsive behavior, template support, and rich customization options.

Key Features at a Glance

• Multiple Overflow Modes: Scrollable, Popup, MultiRow, and Extended modes for flexible content management
• Responsive Design: Automatically adapts to different screen sizes with multiple layout options
• Multiple Item Types: Buttons, separators, and input components (NumericTextBox, DropDownList, etc.)
• Template Support: Render toolbars from HTML elements or item collections
• Rich Customization: CSS styling, icons, tooltips, and templates
• Keyboard Support: Full keyboard navigation and accessibility compliance
• RTL Support: Right-to-left language support built-in
• Event Handling: beforeCreate, clicked, keyDown events with comprehensive event arguments
• Theme Integration: Works with Fluent2 and other theme systems
• Security Features: HTML sanitization and XSS protection for user-provided content

When to Use This Skill

Choose Syncfusion Toolbar when you need:

• Command button interfaces for editors, document tools, or application menus
• Responsive navigation that adapts to mobile/desktop sizes
• Professional-grade toolbar with customizable icons and styling
• Accessibility-compliant navigation components
• Template-based toolbar rendering
• Item state management (enable/disable, toggle states)
• Tooltip support for toolbar items

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Start here for your first Toolbar implementation:

• Installation and NPM package setup
• Dependency configuration for TypeScript
• CSS imports and theme setup
• Basic Toolbar initialization with items
• First working code example
• Using webpack configuration

Item Configuration

📄 Read: references/item-configuration.md

Learn how to structure and configure individual toolbar items:

• Button items with text, icons, and prefixIcon/suffixIcon
• Separator items for visual grouping
• Input items for integrated components (NumericTextBox, DropDownList)
• Item alignment and positioning
• Item IDs and dynamic item access
• Width and sizing properties

Responsive and Popup Modes

📄 Read: references/responsive-and-popup.md

Handle toolbar overflow and responsive behavior:

• Scrollable mode with navigation arrows and touch swipe
• Popup mode for compact layouts
• Display mode switching based on available space
• Scroll step customization for arrow-based scrolling
• Touch and keyboard interaction patterns
• Responsive width configuration

Templates and Customization

📄 Read: references/template-and-customization.md

Create custom toolbar layouts and styling:

• HTML template-based toolbar rendering
• Item-level template customization
• CSS class application for styling
• Custom button templates with HTML content
• Advanced layout patterns and examples
• Style integration with themes

Interactivity and Commands

📄 Read: references/interactivity-and-commands.md

Handle user interactions and command execution:

• Click event handling patterns
• Command customization and execution
• Toggle button implementation
• Enable/disable items programmatically
• Event binding and event arguments
• Item state management

Advanced Features

📄 Read: references/advanced-features.md

Implement advanced toolbar functionality:

• Font Awesome icon integration
• Tooltip configuration for toolbar items
• Right-to-left (RTL) language support
• Keyboard navigation patterns
• Accessibility (WAI-ARIA) compliance
• Links within toolbar items
• Multi-row toolbar layouts

Styling and Accessibility

📄 Read: references/styling-and-accessibility.md

Master styling and accessibility implementation:

• CSS structure for toolbar customization
• Theme classes (toolbar, items, buttons, icons)
• Color and appearance customization
• WCAG compliance requirements
• Keyboard navigation implementation
• Screen reader support and ARIA attributes
• Best practices for accessible toolbars

Complete API Reference

📄 Read: references/api-reference.md

Comprehensive reference for all Toolbar APIs:

• ToolbarModel properties table (12+ properties with examples)
• ItemModel properties table (15+ properties with examples)
• Event reference (beforeCreate, clicked, created, destroyed, keyDown)
• Event arguments documentation (BeforeCreateArgs, ClickEventArgs, KeyDownEventArgs)
• Enumerations reference (ItemType, ItemAlign, OverflowOption, OverflowMode, DisplayMode)
• Quick configuration patterns for common scenarios

Quick Start Example

Here's a minimal working example to get you started immediately:

import { Toolbar } from '@syncfusion/ej2-navigations';

// Create a basic toolbar with button items
let toolbar: Toolbar = new Toolbar({
    items: [
        { text: 'Cut' },
        { text: 'Copy' },
        { text: 'Paste' },
        { type: 'Separator' },
        { text: 'Bold' },
        { text: 'Italic' },
        { text: 'Underline' }
    ]
});

// Render to DOM element
toolbar.appendTo('#element');

HTML container:

<!DOCTYPE html>
<html>
<head>
    <link href="url" rel="stylesheet" />
</head>
<body>
    <div id="element"></div>
    <script src="app.js"></script>
</body>
</html>

Common Patterns

Pattern 1: Toolbar with Icons

let toolbar: Toolbar = new Toolbar({
    items: [
        { prefixIcon: 'e-icons e-cut', text: 'Cut' },
        { prefixIcon: 'e-icons e-copy', text: 'Copy' },
        { prefixIcon: 'e-icons e-paste', text: 'Paste' },
        { type: 'Separator' },
        { prefixIcon: 'e-icons e-bold', text: 'Bold' }
    ]
});
toolbar.appendTo('#element');

Pattern 2: Responsive Toolbar (Scrollable)

let toolbar: Toolbar = new Toolbar({
    width: 600,
    overflowMode: 'Scrollable',
    items: [
        { text: 'Cut', prefixIcon: 'e-cut-icon' },
        { text: 'Copy', prefixIcon: 'e-copy-icon' },
        { text: 'Paste', prefixIcon: 'e-paste-icon' },
        // ... more items
    ]
});
toolbar.appendTo('#element');

Pattern 3: Item Alignment Control

let toolbar: Toolbar = new Toolbar({
    items: [
        { text: 'Cut' },
        { text: 'Copy' },
        { type: 'Separator' },
        { text: 'Save', align: 'Right' },  // Push to right side
        { text: 'Help', align: 'Right' }
    ]
});
toolbar.appendTo('#element');

Pattern 4: Event Handling

let toolbar: Toolbar = new Toolbar({
    items: [
        { id: 'cut-btn', text: 'Cut' },
        { id: 'copy-btn', text: 'Copy' }
    ],
    clicked: (args: ClickEventArgs) => {
        console.log(`Item ${args.item.id} clicked`);
    }
});
toolbar.appendTo('#element');

Key Properties Reference

Property	Type	Purpose
items	ItemModel[]	Array of toolbar items to display
width	Number/String	Toolbar width (px or percentage)
overflowMode	'Scrollable' | 'Popup'	How to handle overflow content
scrollStep	Number	Pixels to scroll on arrow click (Scrollable mode)
enableRtl	Boolean	Enable right-to-left layout for RTL languages
clicked	Function	Event handler for item clicks

Common Use Cases

Use Case 1: Text Editor Toolbar

• Display Cut, Copy, Paste, Bold, Italic, Underline buttons
• Use icons with prefixIcon property
• Add separators for visual grouping
• Implement click handlers for each command

Use Case 2: Mobile-Responsive Toolbar

• Set Popup overflowMode for mobile
• Configure scrollable mode for desktop
• Use responsive width (percentage-based)
• Test on different screen sizes

Use Case 3: Customized Appearance

• Apply CSS classes with theme colors
• Use Font Awesome icons for modern appearance
• Add tooltips for accessibility
• Style specific toolbar items differently

Installation Prerequisites

Required packages:

npm install @syncfusion/ej2-navigations
npm install @syncfusion/ej2-base
npm install @syncfusion/ej2-buttons
npm install @syncfusion/ej2-popups

For TypeScript projects, ensure webpack and TypeScript are properly configured (node v14.15.0 or higher recommended).

---

Note: For additional details on any topic, refer to the specific reference file linked in the navigation guide above. Each reference provides complete code examples, edge cases, and troubleshooting guidance.