Control Panel Settings

By default, the editor control panel appears on the left side of the template and remains visible at all times while in editing mode. However, this default layout or constant visibility may not be ideal for every user, depending on the design of their platform or the preferences of their audience.

To accommodate different workflows, we provide flexible options that let you adjust the control panel’s position or toggle its visibility as needed.

Control Panel Position

This option allows you to define whether the editor’s control panel appears on the left or right side of the template.

By default, the control panel is positioned on the left. To move it to the right, set the mainMenuAlign option to right in your TOPOL_OPTIONS configuration:

mainMenuAlign: 'right', // left by default

This setting provides greater flexibility when integrating the editor into your platform and is especially useful for interfaces that use right-hand navigation or support right-to-left (RTL) layouts.

Control Panel Visibility

This option gives you and your users complete control over whether the editor control panel is shown or hidden.

To set the initial visibility state of the control panel, use the hideControlPanel property in your TOPOL_OPTIONS configuration:

hideControlPanel: true | false, // false by default

Hiding the control panel entirely without a way to toggle it back on would make the editor unusable. For that reason, we provide two simple methods for toggling the control panel’s visibility:

1. Custom UI Element

If your platform includes a custom button or interactive element for controlling the panel, simply bind it to the following function:

TopolPlugin.toggleControlPanel();

Calling this function will show or hide the control panel dynamically.

Complete list of all callable functions is available here.

2. Built-in Editor UI Toggle

Topol also provides a built-in toggle button within the editor interface itself. To display this toggle button, enable the showControlPanelExpand property:

showControlPanelExpand: true | false, // false by default

When enabled, a toggle button will appear in the top-left corner of the editor window, allowing users to show or hide the control panel as needed.