Implementing ASP.NET Core Toolbar
The Syncfusion Toolbar is a command-driven navigation component that organizes buttons, input controls, and custom templates into a responsive horizontal container. It's ideal for application headers, document editors, and toolbars that need to handle responsive overflow with scrollable or popup modes.
When to Use This Skill
Use this skill when you need to:
- Create command bars for editors, dashboards, or application headers
- Build responsive toolbars that handle overflow with scrollable or popup modes
- Integrate button controls with icons, text, and custom templates
- Add input components like textboxes, dropdowns, or radio buttons to a toolbar
- Customize toolbar behavior with tooltips, alignment, and keyboard navigation
- Manage item visibility with overflow priority and popup customization
- Toggle states and actions with custom buttons and event handling
Component Overview
The Toolbar control provides:
- Item Types: Buttons (default), Separators, and Input containers
- Responsive Modes: Scrollable (default with navigation arrows) and Popup overflow
- Template Support: HTML-based rendering with item-wise customization
- Styling Options: CSS classes, icons (prefix/suffix), width control, and themes
- Event Handling: Click events, creation/destroy events, and keyboard navigation
- Keyboard Support: Tab navigation with configurable tabIndex and arrow key support
Documentation and Navigation Guide
Navigate to the reference files below to explore specific features and implementation patterns:
Getting Started
📄 Read: references/getting-started.md
- NuGet package installation and setup
- TagHelper registration and configuration
- CSS and script resource inclusion
- Basic toolbar creation with items
- First working examples with icons and text
Item Configuration
📄 Read: references/item-configuration-guide.md
- Button items with text, icons, and width properties
- Separator items and behavior constraints
- Input items for integrated components (NumericTextBox, DropDownList, RadioButton)
- Tab key navigation with tabIndex property
- Complete property tables and examples
Responsive Modes and Overflow
📄 Read: references/responsive-modes-and-overflow.md
- Scrollable mode with navigation arrows and swipe support
- Popup mode with command priority system
- Overflow property options (show, hide, none)
- ShowAlwaysInPopup for permanent popup items
- ShowTextOn property for button text visibility
- Real-world responsive examples
Templates and Customization
📄 Read: references/templates-and-customization.md
- HTML-based template rendering structure
- Item templates using strings and query selectors
- Popup customization with e-overflow-show and e-overflow-hide classes
- Button text modes (e-popup-text, e-toolbar-text)
- Menu component integration
- CSS class customization patterns
Advanced Features
📄 Read: references/advanced-features.md
- Toggle button implementation and state management
- Tooltip integration with tooltipText property
- Command customization with htmlAttributes and cssClass
- Scroll step customization for navigation
- Item-wise custom templates with complex controls
- Event arguments and handler implementation
API Reference
📄 Read: references/api-reference.md
- Complete Toolbar properties and their defaults
- All supported events with signatures
- Item configuration properties
- Overflow and alignment enumerations
- Method signatures for programmatic control
- TagHelper-compliant code examples for each API
Quick Start Example
Basic toolbar with buttons and separator:
html
<!-- In ~/Pages/_ViewImports.cshtml -->
@addTagHelper *, Syncfusion.EJ2
<!-- In ~/Pages/Shared/_Layout.cshtml (head) -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
<!-- In ~/Pages/Shared/_Layout.cshtml (body, end) -->
<ejs-scripts></ejs-scripts>
<!-- In ~/Pages/Index.cshtml -->
<ejs-toolbar id="toolbar" width="600px">
<e-toolbar-items>
<e-toolbar-item text="Cut" prefixIcon="e-cut-icon tb-icons" tooltipText="Cut"></e-toolbar-item>
<e-toolbar-item text="Copy" prefixIcon="e-copy-icon tb-icons" tooltipText="Copy"></e-toolbar-item>
<e-toolbar-item text="Paste" prefixIcon="e-paste-icon tb-icons" tooltipText="Paste"></e-toolbar-item>
<e-toolbar-item type="Separator"></e-toolbar-item>
<e-toolbar-item text="Bold" prefixIcon="e-bold-icon tb-icons" tooltipText="Bold"></e-toolbar-item>
<e-toolbar-item text="Italic" prefixIcon="e-italic-icon tb-icons" tooltipText="Italic"></e-toolbar-item>
</e-toolbar-items>
</ejs-toolbar>
Common Patterns
Icon-only buttons with tooltips:
Use
with
for minimal visual footprint with affordance.
Responsive overflow with priority:
Set
for always-visible buttons and
for secondary actions that move to popup.
Input controls in toolbar:
Use
to embed components like DropDownList or NumericTextBox for filtering or configuration.
Custom templates:
Use
property with HTML strings or query selectors for complex custom controls.
Tab navigation:
Set
on items to enable Tab/Shift+Tab keyboard navigation in addition to arrow keys.
Key Properties
- : Sets toolbar container width (pixels or percentage)
- : Controls responsive behavior - (default) or
- : Distance to scroll when navigation arrows are clicked
- : Enables keyboard navigation (default: true)
- : Enables popup collision detection
- : Applies custom CSS classes to the toolbar root
Item Configuration Quick Reference
| Item Type | Use Case | Key Properties |
|---|
| Button | Command actions | , , , , |
| Separator | Visual dividers | |
| Input | Embedded components | , |
| Custom | Complex controls | , |
Common Use Cases
- Text Editor Toolbar: Cut, Copy, Paste, formatting buttons with separators
- Dashboard Filter Bar: DropDownList and DatePicker for filtering data
- Application Header: Branding + navigation buttons + user menu
- Media Player Controls: Play, Pause, Stop, Volume with custom templates
- Document Tools: Save, Print, Export with responsive overflow handling
Start with Getting Started Guide to set up your first toolbar.