---
title: "Custom Top Bar"
description: "With Topol you can utilize a custom top bar and incorporate existing branded buttons for a seamless user experience."
url: https://docs.topol.io/email-editor/guide/how-to-use-custom-topbar.html
---

# Using a custom top bar with Topol Plugin

**Hiding the built-in top bar lets you drive the editor from your own branded buttons, calling `TopolPlugin` methods and reacting through callbacks, so the editor blends into your app's UI.**

## Removing the default top bar

Hide the built-in top bar with a single option in `TOPOL_OPTIONS`:

```ts
removeTopBar: true,
```

## Driving the editor from your own buttons

With the top bar gone, actions like save, undo, and preview are triggered by calling methods on the `TopolPlugin` object. To save, call:

```ts
window.TopolPlugin.save();
```

That runs the editor's save and fires your `onSave` callback with the current template data.

## Setting up callbacks

Callbacks in `TOPOL_OPTIONS` let your app react when an action completes. `onSave` and `onSaveAndClose` share the same arguments: the template JSON first, then the rendered HTML, then the language mutations (an array of `{ lang, primary }`) and the synced-sections usage.

```ts
const TopolOptions = {
  id: "#app",
  authorize: {
    apiKey: "YOUR_API_KEY",
    userId: "YOUR_USER_ID",
  },
  removeTopBar: true,

  callbacks: {
    onSave(json, html, mutations, syncedSections) {
      // Save json and html to your database
    },

    onSaveAndClose(json, html, mutations, syncedSections) {
      // Save the data, then close or redirect from the editor
    },

    onUndoChange(count) {
      // React to an undo, count is the number of undo steps
    },

    onRedoChange(count) {
      // React to a redo, count is the number of redo steps
    },
  },
};
```

With the top bar removed, `save()` is the method that runs `onSave`. There is no public method for save-and-close, but the built-in `Ctrl/Cmd + Shift + S` shortcut still runs `onSaveAndClose`.

The diagram below traces the save flow:

![Saving a template from the editor's custom top bar](https://docs.topol.io/saving-light.png)

## Methods you can call from a custom top bar

-   Save: `window.TopolPlugin.save()`

-   Save a specific language mutation: `window.TopolPlugin.save({ lang: "en" })`

-   Undo: `window.TopolPlugin.undo()`

-   Redo: `window.TopolPlugin.redo()`

-   Open or close preview mode: `window.TopolPlugin.togglePreview()`

-   Switch the preview between mobile and desktop width: `window.TopolPlugin.togglePreviewSize()`


### Combining with mobile-first

The editor also supports a mobile-first editing experience, and the mobile and desktop views can be switched from your own buttons alongside a custom top bar. The [mobile-first guide](https://docs.topol.io/email-editor/guide/mobile-first.html#mobile-first-email-template) covers the methods for that.