Control Panel Settings

The control panel is the 310px sidebar holding content blocks and block settings. It sits on the left of the template and stays visible throughout editing. Two options change that: one moves it to the other side, the other lets it be hidden and toggled back.

Control panel position

The mainMenuAlign option decides which side of the template the control panel occupies. It defaults to left, so only the right-hand variant needs setting:

mainMenuAlign: 'right', // left by default

This suits platforms whose own navigation lives on the right, keeping the editor chrome on the same side as the surrounding interface.

INFO

mainMenuAlign positions editor chrome and nothing else. It does not switch the interface to a right-to-left layout. RTL handling follows the language option instead, and applies automatically for Arabic and Hebrew. See Internationalization.

Control panel visibility

The hideControlPanel property sets whether the panel starts hidden:

hideControlPanel: true | false, // false by default

Hiding the panel reclaims its width rather than leaving a gap: the canvas and the top bar both widen to fill the space. The same layout applies in Preview mode, which hides the panel regardless of this setting.

Hiding the control panel with no way to bring it back would leave the editor unusable, so there are two ways to toggle it.

1. Custom UI element

Bind a button or other control in your own interface to this function:

TopolPlugin.toggleControlPanel();

Each call flips the panel between shown and hidden.

WARNING

The toggle is one-way, from your application into the editor. Nothing is emitted back when a user toggles the panel from inside the editor, so a custom button cannot track the panel's current state.

Complete list of all callable functions is available here.

2. Built-in editor UI toggle

The editor can also render its own toggle. Enable it with showControlPanelExpand:

showControlPanelExpand: true | false, // false by default

The button attaches to the outer edge of the control panel, which puts it at the panel's right edge under the default left alignment and at its left edge when mainMenuAlign is right. Once the panel is hidden, the button moves to the matching edge of the editor window, and its arrow mirrors so it always points the way the panel will move. Vertically it sits below the top bar, adjusting to whichever bars are enabled.

Related options

Two neighboring options change what the panel contains rather than where it sits. hideSettingsTab removes the template settings tab, and enableSubjectLine adds subject line editing. Both default to false and are listed in the options reference.