---
title: "Top Bar"
description: "Create your own save and close buttons and fully remove the editor's top bar, so the Topol Plugin interface never limits your custom layout."
url: https://docs.topol.io/email-editor/guide/top-bar.html
---

# Top bar modification

**The Top Bar is the editor's main control strip, and it can be trimmed down to selected buttons or removed entirely.** It holds Save, Undo/Redo, the preview toggles, and more. For a fully branded or embedded experience, the whole bar can be replaced with your own interface.

![Top Bar](https://docs.topol.io/top-bar.png)

## Remove the Top Bar

To build your own interface, remove the entire default Top Bar:

```ts
removeTopBar: true, // to display, set to false or skip
```

Once removed, saving and closing are your application's responsibility, handled through our APIs.

## Hide or show specific Top Bar elements

To keep the Top Bar but control which buttons appear, list them in the `topBarOptions` array. The default value is `[]`.

```ts
topBarOptions: [
  "undoRedo", // shows Undo/Redo button
  "save", // shows Save button
  "saveAndClose", // shows Save & Close button
  "changePreview", // shows Change preview button
  "previewSize", // shows Toggle mobile/desktop preview button
  "previewTestMail", // shows Send test email button
  "changeLanguage", // shows Multilingual dropdown
  "translate" // shows Translate button (requires AI to be enabled)
],
```

If `topBarOptions` is not set or is an empty array `[]`, all elements are shown.

Listing an element makes it eligible to appear, but some elements carry their own conditions on top of that. The Translate button needs AI enabled on your account and `disableAiAssistant` left unset, and it is hidden while [Multilingual Templates](./multilingual-templates.html) is active, where the language dropdown takes over instead. Values outside the list above are ignored silently, so a typo shows up as a missing button rather than an error.

## Additional Window Bar

![Top Bar](https://docs.topol.io/window-bar.png)

Alongside the Top Bar sits an optional Window Bar, enabled by the `windowBar` array:

-   `fullscreen` - Toggles fullscreen mode for distraction-free editing

-   `close` - Closes the editor and triggers the `onClose` callback


```ts
windowBar: [
    "fullscreen", // Toggles fullscreen mode for distraction-free editing
    "close" // Closes the editor and triggers the onClose callback
],
```

The `close` action needs a matching callback:

```ts
callbacks: {
  onClose: () => {
    // Your custom logic for closing the editor
  }
}
```

`onClose` receives no arguments, and closing does **not** save first. Save the template from your own handler if the work should be kept.

> **INFO**
>
> Fullscreen relies on the browser's Fullscreen API. Where that API is unavailable, the button renders but does nothing.