---
title: "Blok Toolbar API — open, close, toggle"
description: "Open, close, and toggle the block toolbar and its settings menu from your own code."
source: https://blokeditor.com/docs/toolbar-api/
lastmod: 2026-09-26
---

Framework JavaScript

Interface Toolbar

On this page toolbar.close(options?)

# Toolbar API: control the block toolbar

Control the block toolbar and its state.

Last updated Sep 26, 2026 [Edit this page on GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/api-data.ts)

### Reaching the editor instance

The methods below run on the editor you created with new Blok(). They are available once editor.isReady resolves.

TypeScript

```
// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');
```

## Methods

### toolbar.close(options?)

void

Close the toolbar with optional configuration.

When to use

Dismiss the block toolbar from code. Use it after your custom action runs, so the UI does not linger.

TypeScript

```
// Standard close. The next mousemove re-opens the toolbar: close() clears the
// hovered block and resets the hover dedup, so BlockHovered fires again.
editor.toolbar.close();

// Close and keep it closed while the pointer stays on the same block
// (skips the hover-state reset, so no BlockHovered is re-emitted for it).
editor.toolbar.close({ setExplicitlyClosed: false });
```

### toolbar.open()

void

Open the toolbar.

When to use

Forces the toolbar open for the current block. It normally appears on hover or focus, so use this sparingly.

TypeScript

```
editor.toolbar.open();
```

### toolbar.toggleBlockSettings(openingState?, trigger?, options?)

void

Toggle the block settings menu (☰).

When to use

Opens or closes the ☰ settings menu from code. Pass an explicit boolean to set the state instead of flipping it.

Parameters

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `openingState` | `boolean` | — | `toggle current state` | Force the settings menu open (true) or closed (false). |
| `trigger` | `HTMLElement` | — | `undefined` | Element to anchor the settings popover to. If it sits inside a block, the menu opens for that block, not for the block holding the caret. |
| `options` | `ToolbarBlockSettingsOptions` | — | `undefined` | Placement overrides. `placeLeftOfAnchor` is already `true` when you pass a trigger element. Set it to `false` to open the popover to the right of the trigger instead. |

TypeScript

```
// Toggle current state
editor.toolbar.toggleBlockSettings();

// Force open
editor.toolbar.toggleBlockSettings(true);

// Force close
editor.toolbar.toggleBlockSettings(false);

// Anchor the settings popover to a custom trigger element.
// Left placement is already the default for an element trigger —
// opt out to open the popover to the right instead:
editor.toolbar.toggleBlockSettings(true, triggerEl, { placeLeftOfAnchor: false });
```

### toolbar.toggleToolbox(openingState?)

void

Toggle the toolbox (+ menu).

When to use

Opens or closes the + insert (slash) menu from code. Pass a boolean to force a state.

TypeScript

```
// Toggle current state
editor.toolbar.toggleToolbox();

// Force open
editor.toolbar.toggleToolbox(true);
```

### toolbar.setHidden(hidden)

void

Runtime setter for `config.hideToolbar`. It hides or shows the hover toolbar (plus button and drag handle). It also collapses or restores the editor gutter reserved for it.

The wrapper's `data-blok-toolbar-hidden` attribute is kept in sync, so no dead space is left behind. The keyboard "/" menu keeps working while the toolbar is hidden.

When to use

The runtime half of the `hideToolbar` config option. It flips both the toolbar behaviour and the reserved gutter, so no dead space is left behind.

Parameters

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `hidden` | `boolean` | Required | — | true hides the hover toolbar and collapses the gutter. false restores both. |

TypeScript

```
// Hide the hover toolbar and collapse its gutter
editor.toolbar.setHidden(true);

// Restore it
editor.toolbar.setHidden(false);
```

### toolbar.setPosition(position)

void

Runtime setter for `config.toolbarPosition`. It moves the floating block controls between the editor's inline-start and inline-end gutters. The wrapper's `data-blok-toolbar-position` attribute is kept in sync. That attribute drives both the gutter swap and the side the controls dock to.

The block-settings menu mirrors with them, so it never opens over the block it belongs to. An open toolbar is re-laid out in place rather than closed.

When to use

The runtime half of the `toolbarPosition` config option. It moves the controls and the gutter reserved for them together. It also mirrors the block-settings menu, so it never opens over the block.

Parameters

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `position` | `'left' | 'right'` | Required | — | 'left' for the inline-start gutter (the default), 'right' for inline-end. |

TypeScript

```
// Move the +/⠿ controls to the right of the content column
editor.toolbar.setPosition('right');

// Back to the left gutter
editor.toolbar.setPosition('left');
```