Menu bar

The menu bar is a user interface component that gives you access to all features provided by the editor, organized in menus and categories. This familiar experience popular in large editing desktop and online packages improves usability of the editor.

As the menu bar gathers all the editor features, the toolbar can be simple and tidy, providing only the most essential and commonly used features. This is especially welcome in heavily-featured editor integrations.

For your convenience, the menu bar provides a default preset structure, based on the plugins loaded in the editor. However, you can arrange it to suit your needs, remove unnecessary items, as well as add menu items related to your custom features.

# Demo

The demo below presents all items available in the menu bar preset settings.

The three greatest things you learn from traveling

Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.

The real voyage of discovery consists not in seeking new landscapes, but having new eyes.

Marcel Proust

Appreciation of diversity

Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person.

You learn to appreciate each and every single one of the differences while you become more culturally fluid.

You can easily remove some presets or add more items, including menu items for custom features. The structure can also be arranged to suit particular needs.

# Enabling the menu bar

The menu bar is available in all editor types. Usage will vary depending on used editor type.

# Classic editor and Inline editor

The menu bar is disabled by default. To make it available in your editor, set the config.menuBar.isVisible property to true. This will turn on the menu bar with a default set of features. The menu bar is located right above the editor toolbar.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
        toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
        menuBar: {
            isVisible: true
        }
    } );

# Other editor types

When using the Decoupled, Balloon or Multi-root editor, you will need to insert the menu bar in a desired place yourself. The menu bar HTML element is available under the editor.ui.view.menuBarView.element property.

    <div id="menuBarContainer"></div>
    <div id="editor"><p>Document content.</p></div>

DecoupledEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...
        toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
    } )
    .then( editor => {
        document.querySelector( '#menuBarContainer' ).appendChild( editor.ui.view.menuBarView.element );
    } );

# Configuration

The menu bar can be configured using the config.menuBar option and its config.menuBar.removeItems and config.menuBar.addItems properties. Please refer to the config.menuBar API documentation for details on how to do it.

# Adding custom buttons to the menu bar

To add custom buttons or other components to the menu bar, follow these steps:

1. Create a new UI component using editor.ui.componentFactory. Define its behavior and appearance.
2. Use editor.ui.extendMenuBar() method to add your component to the menu bar at a desired position.

Here’s an example of a custom plugin that adds a button to the menu bar inside the “Format” menu, after the “Bold” button:

import { Plugin, ButtonView } from 'ckeditor5';

class MyCustomPlugin extends Plugin {
	init() {
		const editor = this.editor;

		// Register the toolbar button.
		editor.ui.componentFactory.add( 'menuBar:myCustomButton', locale => {
			const view = new ButtonView(locale);

			view.set( {
				label: 'My Custom Button',
				withText: true,
				tooltip: true
			} );

			// Execute a command when the button is clicked.
			view.on( 'execute', () => {
				editor.execute('myCustomCommand');
			} );

			return view;
		} );

		// Add your component in the preferred position.
		editor.ui.extendMenuBar( {
			item: 'menuBar:myCustomButton',
			position: 'after:menuBar:bold'
		} );
    }
}

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-ui.