description: A short introduction to creating sidebars.
keywords: sidebar
---
@ -15,6 +15,8 @@ The sidebar API allows developers to add sidebars on editor instances in a simil
This is the syntax for the addSidebar function: `editor.ui.registry.addSidebar(name:String, spec:Object)`
When a new sidebar is registered, a corresponding toolbar button for toggling the sidebar open and close is also created using the same name. This button can then be included in the toolbar by adding the sidebar name to the [`toolbar`]({{site.baseurl}}/configure/editor-appearance/#toolbar/) option.
### Specification object
#### `tooltip`
@ -25,7 +27,7 @@ The `tooltip` specifies a tooltip to be displayed when hovering over the sidebar
#### `icon`
The `icon` specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the TinyMCE skin.
The `icon` specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the TinyMCE skin or a [custom icon]({{site.baseurl}}/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addicon/).
**Type**: `String`
@ -60,10 +62,11 @@ The `element():HTMLElement` function returns the root element of the sidebar pan
```js
tinymce.init({
...
toolbar: "mysidebar",
setup: function (editor) {
editor.ui.registry.addSidebar('mysidebar', {
tooltip: 'My sidebar',
icon: 'settings',
icon: 'comment',
onSetup: function (api) {
console.log('Render panel', api.element());
},
@ -85,7 +88,7 @@ tinymce.init({
tinymce.PluginManager.add('myplugin', function (editor) {