# Add a Tab

## Content

Follow the below steps to customize the ribbon component by adding a new tab "Contact Us".

1. Access the default configuration.

    ```JavaScript
    // Configure Workbook and Worksheet
    var spread = new GC.Spread.Sheets.Workbook("ss");
    var activeSheet = spread.getActiveSheet();
    
    // Access the default config
    var config = GC.Spread.Sheets.Designer.DefaultConfig;
    ```
2. Create the layout structure for the new tab and add it to the config.

    ```JavaScript
    // Layout structure of a new tab
    var newTab = {
        "id" : "contactUs",
        "text": "Contact Us",
        "buttonGroups": [
            { 
                "label": "Contact sales at (+1) 412-681-4343 or us.sales@grapecity.com to request temporary deployment authorization.",
                //"commandGroup" is a must required parameter
                "commandGroup": {}
            }
        ]
    }
    
    // Add new tab to config ribbon
    config.ribbon.push(newTab);
    ```
3. Initialize the designer instance by passing the `config` parameter for customizable configuration.

    ```JavaScript
    // Initialize the designer instance
    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);
    ```

The below output will be generated:

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/designer-component-new-tab.PNG)

> **Note:** If you want to delete a built-in tab from ribbon component, remove its content from default config and repeat step 2 from above.