syncfusion-javascript-toolbar

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.