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.

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 currently only available in the Classic editor and Decoupled editor.

# Classic 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' ), {
        toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
        menuBar: {
            isVisible: true
        }
    } );

# Decoupled editor

When using the Decoupled 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.menuBarView.element property.

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

DecoupledEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
    } )
    .then( editor => {
        document.getElementById( '#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.

# Contribute

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