Skip to content
FrameworkJavaScript

Tabs block: content in switchable tabs

A block that splits content into tabs. A strip of tabs sits on top, and the open tab's content shows below it. Insert it from the toolbox, or type /tabs. A new tabs block starts with three tabs: Tab 1, Tab 2, and Tab 3.

Each tab is a child tab block, and the blocks you write live inside the tabs (via contentIds). The tabs block itself saves nothing. Which tab is open is UI state, kept per editor, and never saved. A tabs block holds only tab blocks. Any other child is moved out to just after it.

To manage tabs:

  • click "+" to add a tab
  • click the open tab, right-click a tab, or press Shift+F10 or the ContextMenu key on it to open its menu: Rename, Edit icon, and Delete
  • press F2 on a tab to rename it
  • press Delete or Backspace on the open tab to delete it
  • drag a tab sideways to reorder it

Deleting a tab deletes its content. Deleting the last tab deletes the whole tabs block, and deleting the tabs block deletes every tab.

The arrow keys, Home, and End move between tabs. While you drag a block, rest it on a tab to open that tab, or drop it on the tab to add it at the end of that tab. Find in page opens the tab that holds a match.

You can register both tools at once with the Tabs group handle: tools: { tabs: Tabs } expands to the tabs and tab tools. The saved JSON still contains tabs and tab blocks.

It works in read-only mode. Pasting tabs from Notion creates this block. Markdown export writes every tab in order, each under its bold title. blocksToHtml writes a <div data-blok-tabs> with one <section data-blok-tab> per tab, and htmlToBlocks reads that HTML back as tabs.

Import

TypeScript
import { TabsTool } from '@bloklabs/core/tools';
// …or register both tab tools at once with the group handle:
import { Tabs } from '@bloklabs/core/tools';

Save Data

TypeScript
interface TabsData {
  // No persisted fields. The tabs are the child `tab` blocks, referenced by
  // the block's saved `content` array (exposed as `contentIds` on the
  // in-memory Block). The open tab is UI state and is never saved.
}
JSON
{
  "id": "tabs001",
  "type": "tabs",
  "data": {},
  "content": ["tab1", "tab2"]
}

Usage Example

TypeScript
import { Blok } from '@bloklabs/core';
import { TabsTool, TabTool } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    tabs: {
      class: TabsTool,
    },
    tab: {
      class: TabTool,
    },
  },
});