CKEditor button group

CKEditor Button Group allows Drupal site administrators to organize CKEditor 5 toolbar buttons into dropdown menus. It helps reduce toolbar clutter and makes frequently used editing tools easier to find.

The module works with Drupal text formats, allowing each format to have its own button group configuration. For example, administrators can create separate toolbar groups for formatting tools, lists, media, tables, or other available CKEditor 5 buttons.

Features

• Create dropdown groups containing multiple CKEditor 5 toolbar buttons.
• Configure button groups independently for each Drupal text format.
• Add custom labels to button groups.
• Use custom SVG icons for dropdown buttons.
• Add separators inside button groups.
• Keep individual buttons and separators outside groups.
• Validate configured buttons against the CKEditor 5 toolbar items available on the site.
• Ignore invalid or unavailable toolbar items instead of breaking the editor.
• Integrate directly into the text format configuration form.
• Support Drupal 10 and Drupal 11.
• Work with core, contributed, and custom CKEditor 5 plugins that provide toolbar items.

This module is useful when a text editor has a large number of toolbar buttons and the toolbar becomes difficult to use. It is especially helpful for grouping related tools such as text formatting, lists, media, tables, links, or source editing controls.

Post-Installation

After installing and enabling the module:

1. Go to Administration > Configuration > Content > Text formats and editors.
2. Edit the text format you want to configure.
3. Locate the Button group section below the filter settings.
4. Enable the Active checkbox.
5. Enter one button, separator, or button group per line in the Buttons field.
6. Save the text format configuration.

The buttons used in a group must also be enabled in the text format's Active toolbar configuration. Buttons that are not available in the active toolbar, or that are not provided by an installed CKEditor 5 plugin, will be ignored.

Example configuration:

label=Formatting, bold, italic, underline
label=Lists, bulletedList, numberedList, |, blockQuote
label=Media, drupalMedia, insertTable

A line containing a single button or separator remains outside a dropdown group:

bold
italic
|
link

Group parameters can be added using the following syntax:

label=Formatting, icon=public://icons/formatting.svg, bold, italic, underline

Custom SVG icons must be readable by the web server. The icon path can be relative to the Drupal root or use a Drupal stream wrapper such as public:// or private://.

Complete example:

undo
redo
|
heading
|
bold
italic
removeFormat
subscript,superscript,specialCharacters,outdent,indent,label=Format,icon=themes/custom/custom_theme/assets/admin-theme/elipsis.svg
|
bulletedList
numberedList
|
link
|
blockQuote,insertTable,drupalMedia,htmlEmbed,label=Complex,icon=themes/custom/custom_theme/assets/admin-theme/plus.svg
|
sourceEditing
|
Fullscreen

Additional Requirements

This module requires:

• Drupal 10 or Drupal 11.
• The Drupal core CKEditor 5 module.

No external PHP libraries or JavaScript libraries are required.

Community Documentation

Community documentation, demonstrations, and usage examples are welcome.

For configuration details, refer to the project documentation and the Drupal.org issue queue.