---
title: Customize the Tab Bar
product: Survey Creator
description: With SurveyJS you can easily modify the tab bar to make it more convenient for your end users. For example, you can hide or show the existing tabs, remove them, or add new ones. View a free demo for JavaScript.
framework: React
source: https://surveyjs.io/survey-creator/examples/modify-tab-bar/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Customize the Tab Bar (React)

SurveyJS offers the flexibility to add, remove, and modify tabs in its Form Builder UI to implement additional functionality as needed. In this example, we demonstrate how to manage built-in tabs and create a custom "Survey Templates" tab that enables survey authors to quickly load boilerplate surveys into Survey Creator for further customization.

## Manage Built-In Survey Creator Tabs

Survey Creator includes six built-in tabs. To specify the visibility of each tab, use a dedicated configuration property:

- [`showDesignerTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showDesignerTab)
- [`showPreviewTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showPreviewTab)
- [`showJSONEditorTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showJSONEditorTab)
- [`showLogicTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showLogicTab)
- [`showTranslationTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showTranslationTab)
- [`showThemeTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showThemeTab)

By default, the Designer, Preview, Logic, and JSON Editor tabs are visible, while the Translations and Themes tabs are hidden. In this demo, the Translations tab is made visible by setting the `showTranslationTab` property to `true`.

## Add a Custom Survey Creator Tab

If you want to add a custom tab to Survey Creator, follow the instructions below:

1. Implement a custom component that renders tab markup.        
In this demo, the component renders buttons that load different JSON schemas into Survey Creator.

1. Register your component under a custom name in the component collection.      
    In HTML/CSS/JavaScript projects, register the component in `ReactElementFactory` as shown in the `index.js` file.           
    In React, register the component in `ReactElementFactory` as shown in the `SurveyCreatorComponent.jsx` file.          
    In Angular, register the component in `AngularComponentFactory` as shown in the `survey-templates-tab.component.ts` file.          
    In Vue.js, use [techniques native to this framework](https://vuejs.org/guide/components/registration).

2. Configure a tab plugin.      
A tab plugin is an object that allows you to handle user interactions with a tab. The tab plugin object must specify the `activate` and `deactivate` functions. They are executed when users switch to or from the tab and allow you to handle and cancel the switch if necessary. In this demo, `activate` is empty, and `deactivate` always returns `true`, which means that they do not interfere with user interactions in any way.

1. Register a custom tab.        
Call the [`addTab(tabOptions)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#addTab) method on a `SurveyCreatorModel` instance to register a custom tab.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/survey_json.js`

```js
export const npsJson = {
  "title": "NPS Survey Question",
  "logo": "https://surveyjs.io/Content/Images/examples/logo.png",
  "logoHeight": "60px",
  "logoFit": "cover",
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "rating",
          "name": "nps_score",
          "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
          "isRequired": true,
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "(Most unlikely)",
          "maxRateDescription": "(Most likely)"
        },
        {
          "type": "checkbox",
          "name": "promoter_features",
          "visibleIf": "{nps_score} >= 9",
          "title": "Which of the following features do you value the most?",
          "description": "Please select no more than three features.",
          "isRequired": true,
          "validators": [
            {
              "type": "answercount",
              "text": "Please select no more than three features.",
              "maxCount": 3
            }
          ],
          "showOtherItem": true,
          "choices": [
            "Performance",
            "Stability",
            "User interface",
            "Complete functionality",
            "Learning materials (documentation, demos, code examples)",
            "Quality support"
          ],
          "otherText": "Other features:",
          "colCount": 2
        },
        {
          "type": "comment",
          "name": "passive_experience",
          "visibleIf": "{nps_score} >= 7  and {nps_score} <= 8",
          "title": "What can we do to make your experience more satisfying?"
        },
        {
          "type": "comment",
          "name": "disappointing_experience",
          "visibleIf": "{nps_score} <= 6",
          "title": "Please let us know why you had such a disappointing experience with our product"
        }
      ]
    }
  ],
  "completedHtml": "<h3>Thank you for your feedback</h3>",
  "completedHtmlOnCondition": [
    {
      "expression": "{nps_score} >= 9",
      "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you love our product. Your ideas and suggestions will help us make it even better.</h4>"
    },
    {
      "expression": "{nps_score} >= 6  and {nps_score} <= 8",
      "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you shared your ideas with us. They will help us make our product better.</h4>"
    }
  ]
};
export const jobApplicationJson = {
  "title": "Job Application Form",
  "description": "Thank you for your interest in working with us. Please fill out the form and send your application. We will get back to you within a week.",
  "logo": "https://surveyjs.io/Content/Images/examples/logo.png",
  "questionErrorLocation": "bottom",
  "logoHeight": "60px",
  "logoFit": "cover",
  "elements": [
    {
      "type": "panel",
      "name": "personal-info",
      "title": "Personal Information",
      "elements": [
        {
          "type": "text",
          "name": "first-name",
          "title": "First name",
          "isRequired": true
        },
        {
          "type": "text",
          "name": "last-name",
          "startWithNewLine": false,
          "title": "Last name",
          "isRequired": true
        },
        {
          "type": "text",
          "name": "birthdate",
          "title": "Date of birth",
          "inputType": "date",
          "isRequired": true
        }
      ]
    },
    {
      "type": "panel",
      "name": "location",
      "title": "Your Location",
      "elements": [
        {
          "type": "dropdown",
          "name": "country",
          "title": "Country",
          "choicesByUrl": {
            "url": "https://surveyjs.io/api/CountriesExample"
          }
        },
        {
          "type": "text",
          "name": "city",
          "title": "City/Town"
        },
        {
          "type": "text",
          "name": "zip",
          "startWithNewLine": false,
          "title": "Zip code",
          "inputType": "number",
          "validators": [
            {
              "type": "numeric"
            }
          ]
        },
        {
          "type": "text",
          "name": "address",
          "title": "Street address"
        }
      ]
    },
    {
      "type": "text",
      "name": "email",
      "title": "Email",
      "inputType": "email",
      "placeholder": "mail@example.com"
    },
    {
      "type": "text",
      "name": "salary",
      "title": "Expected salary (in US dollars)",
      "inputType": "number",
      "validators": [
        {
          "type": "numeric"
        }
      ]
    },
    {
      "type": "dropdown",
      "name": "position",
      "title": "What position are you applying for?",
      "choices": [
        {
          "value": "frontend",
          "text": "Frontend Developer"
        },
        {
          "value": "backend",
          "text": "Backend Developer"
        },
        {
          "value": "fullstack",
          "text": "Full-Stack Developer"
        },
        {
          "value": "intern",
          "text": "Intern"
        }
      ]
    },
    {
      "type": "text",
      "name": "start-date",
      "title": "Date available to start work",
      "isRequired": true,
      "inputType": "date"
    },
    {
      "type": "file",
      "name": "resume",
      "title": "Upload your resume",
      "acceptedTypes": "application/pdf"
    }
  ],
  "completeText": "Send",
  "widthMode": "static",
  "width": "800px"
};
```

### `src/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { ReactElementFactory } from "survey-react-ui";
import { npsJson, jobApplicationJson } from "./survey_json";
import { Component } from "react";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

const surveyTemplates = [{
    name: "NPS Survey",
    json: npsJson
}, {
    name: "Job Application Form",
    json: jobApplicationJson
}, {
    name: "Empty Survey",
    json: {}
}];

class SurveyTemplatesTabComponent extends Component {
    render() {
        const templateBtnClick = (json) => {
            this.props.creator.JSON = json;
            this.props.creator.switchTab("designer");
        };
        const renderButton = (text, json) => {
            text = "Load " + text;
            const className = "sd-action sd-action--brand sd-action--primary sd-action--large sd-action--border";

            return (
                <button className={className} onClick={() => templateBtnClick(json)}>
                    <span className="sd-action__title">
                        {text}
                    </span>
                </button>);
        };
        const list = [];
        for (let i = 0; i < surveyTemplates.length; i++) {
            const template = surveyTemplates[i];
            const style = { padding: "7px" };
            const btn = renderButton(template.name, template.json);
            list.push(
                <div key={i + 1}>
                    <div style={style}>{btn}</div>
                </div>
            );
        }
        const mainDivStyle = { padding: "7px" };
        return (
            <div style={mainDivStyle}>
                {list}
            </div>
        );
    }
}



ReactElementFactory.Instance.registerElement(
    "svc-tab-survey-templates",
    (props) => {
        return React.createElement(SurveyTemplatesTabComponent, props);
    }
);
function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator({ showTranslationTab: true });
    const surveyTemplatesPlugin = {
        // Do nothing when the tab is activated or deactivated
        activate: () => { },
        deactivate: () => { return true; }
    };
    // Add the `svc-tab-survey-templates` plugin as the first tab
    creator.addTab({
        name: "survey-templates",
        plugin: surveyTemplatesPlugin,
        title: "Survey Templates",
        componentName: "svc-tab-survey-templates",
        index: 0
    });
    creator.activeTab = "survey-templates";
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render(<SurveyCreatorRenderComponent />);
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "babel": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-react": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/modify-tab-bar/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/modify-tab-bar/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/modify-tab-bar/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/modify-tab-bar/vanillajs.md)