---
title: Block toolbar
category: features
---
The {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar} plugin provides an additional [configurable](#configuration) toolbar on the left-hand side of the content area (the gutter). The toolbar is represented by a button with a pilcrow, or a paragraph mark, ¶. It is positioned next to the block element that the selection is anchored to (e.g. a paragraph), following the caret as the user edits the content and navigates the document.
The block toolbar comes in handy when the main editor toolbar cannot be accessed. It complements the {@link builds/guides/overview#balloon-editor Balloon editor} when it falls short, e.g. when some content must be inserted (e.g. an image) but the selection is collapsed, leaving the user unable to access the toolbar.
## Example
Move the caret around to see the block toolbar button following the selection. Click the button (¶) to use the toolbar, e.g. create a header or insert an image.
{@snippet features/blocktoolbar}
## Configuration
The content of the toolbar can be defined using the {@link module:core/editor/editorconfig~EditorConfig#blockToolbar} configuration. See the [installation instructions](#installation) to learn more.
Because the toolbar is always connected to the block of content, it works best with the features that modify entire blocks (e.g. create {@link features/headings headers}) or insert objects (e.g. {@link features/image images} or {@link features/table tables}) rather than inline styles (e.g. {@link features/basic-styles bold or italic}).
To adjust the position of the block toolbar button to match the styles of your website, use the CSS `transform` property:
```css
.ck.ck-block-toolbar-button {
transform: translateX( -10px );
}
```
## Installation
Remember to add relevant features to the editor configuration first. The block toolbar provides a space for the buttons, it does not bring the actual features. For example, the `heading1` button will not work if there is no {@link features/headings Headings} feature in the editor.
To add this feature to your editor install the [`@ckeditor/ckeditor5-ui`](https://www.npmjs.com/package/@ckeditor/ckeditor5-ui) package:
```bash
npm install --save @ckeditor/ckeditor5-ui
```
And add it to your plugin list:
```js
import BlockToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar';
import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui';
import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui';
BalloonEditor
.create( document.querySelector( '#editor' ), {
plugins: [ BlockToolbar, ParagraphButtonUI, HeadingButtonsUI, ... ],
blockToolbar: [
'paragraph', 'heading1', 'heading2', 'heading3',
'|',
'bulletedList', 'numberedList',
'|',
'blockQuote', 'imageUpload'
],
toolbar: [ ... ]
} )
.then( ... )
.catch( ... );
```
Read more about {@link builds/guides/development/installing-plugins installing plugins}.
## Contribute
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-ui.