---
title: "Tabs Widget"
description: "A Jodit widget that builds a tabbed interface from a list of named panes, accepting HTML or DOM content for each tab including other widgets."
metadata:
  - name: keywords
    content: "jodit, tabs widget, tabswidget, tabbed interface, editor popup, jodit ui"
---
# Tab widget

```javascript
const editor = Jodit.make('#editor');
const tabs = Jodit.modules.TabsWidget(editor, [
  { name: 'Images', content: '<div>Images</div>' },
  {
    name: 'Title 2',
    content: editor.c.fromHTML('<div>Some content</div>')
  },
  {
    name: 'Color Picker',
    content: ColorPickerWidget(
      editor,
      function (color) {
        box.style.color = color;
      },
      box.style.color
    )
  }
]);
```


## Interfaces

- [TabOption](../interfaces/widget_tabs.TabOption.html)

### TabsWidget()

**TabsWidget**(`jodit`, `tabs`, `state?`): [`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)

Defined in: [src/modules/widget/tabs/tabs.ts:56](https://github.com/xdan/jodit/blob/main/src/modules/widget/tabs/tabs.ts#L56)

Build tabs system

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `jodit` | [`IViewBased`](../interfaces/types.IViewBased.html) | - |
| `tabs` | [`TabOption`](../interfaces/widget_tabs.TabOption.html)[] | PlainObject where 'key' will be tab's Title and `value` is tab's content |
| `state?` | \{ `activeTab`: `string`; \} | You can use for this param any HTML element for remembering active tab |
| `state.activeTab?` | `string` | - |

#### Returns

[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)

#### Example

```javascript
const editor = Jodit.make('#editor');
const tabs = Jodit.modules.TabsWidget(editor, [
 { name: 'Images', content: '<div>Images</div>' },
 {
   name: 'Title 2',
   content: editor.c.fromHTML('<div>Some content</div>')
 },
 {
   name: 'Color Picker',
   content: ColorPickerWidget(
     editor,
     function (color) {
       box.style.color = color;
     },
     box.style.color
   )
 }
]);
```