Getting started with JavaScript Ribbon control

06 Jun 2023 / 7 minutes to read

This section explains how to create a simple Ribbon and configure its available functionalities in TypeScript using Essential JS 2 QuickStart seed repository.

Dependencies

The following list of dependencies are required to use the Ribbon component in your application.

|-- @syncfusion/ej2-ribbon
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-navigations

Setup your development environment

To get started with the Ribbon component, clone Essential JS 2 quickstart, and install the npm packages using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

The project is pre-configured with common settings (src/styles/styles.css, system.config.js) to start all the Essential JS 2 components.

Refer to the Ribbon component dependencies in system.config.js configuration file.

[src/system.config.js]

System.config({
  paths: {
"npm:": "./node_modules/",
"syncfusion:": "npm:@syncfusion/",
  },
  map: {
app: "app",

//Syncfusion packages mapping
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
  },
  packages: {
app: { main: "app", defaultExtension: "js" },
  },
});

System.import("app.ts");

Adding Style sheet to the Application

To render Ribbon component, need to import navigations and its dependent components styles as given below in styles.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-ribbon/styles/material.css";

Adding Ribbon component to the application

Add the HTML div tag with the id attribute as ribbon to your index.html file.

[src/index.html]

<!DOCTYPE html>
<html lang="en">
  <head>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<!--style reference from node_modules/@syncfusion/ej2/-->
<link href="/styles/styles.css" rel="stylesheet" />
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
  </head>

  <body>
<div class="control-container">
  <div id="ribbon"></div>
</div>
  </body>
</html>

Import the Ribbon component in your app.ts file and initialize it with the #ribbon.

[src/app/app.ts]

import { Ribbon } from "@syncfusion/ej2-ribbon";

let ribbon: Ribbon = new Ribbon({});
ribbon.appendTo("#ribbon");

Injecting required modules

Inject the Ribbon required modules in your app.ts file using the following code snippet.

import { Ribbon, RibbonFileMenu, RibbonColorPicker } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonFileMenu, RibbonColorPicker);

let ribbon: Ribbon = new Ribbon({});
ribbon.appendTo("#ribbon");

Adding Ribbon Tab

In Ribbon, the options are arranged in tabs for easy access. You can use the tabs property of ribbon to define the ribbon tab like below.

import { Ribbon, RibbonTabModel } from "@syncfusion/ej2-ribbon";

let tabs: RibbonTabModel[] = [{ header: "Home" }];

let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");

Adding Ribbon Group

To define a ribbon group under each tab, you can use the groups property of ribbon tab like below. The orientation property of ribbon group defines whether the collection of items will be rendered column-wise or row-wise.

import { Ribbon, RibbonTabModel, ItemOrientation } from "@syncfusion/ej2-ribbon";

let tabs: RibbonTabModel[] = [{
  header: "Home",
  groups: [{ header: "Clipboard", orientation: ItemOrientation.Row}]
}];

let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");

Adding Ribbon Item

You can use the collections property of ribbon group to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the items property of ribbon collection and the type property of ribbon item to specify the type of control to be rendered, like a button, a drop-down button, a combo box, and more.

import { Ribbon, RibbonTabModel, ItemOrientation, RibbonItemType, RibbonItemSize } from "@syncfusion/ej2-ribbon";

let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
    header: "Clipboard",
    orientation: ItemOrientation.Row,
    collections: [
    {
        id : "paste-collection",
        items: [{
            type: RibbonItemType.SplitButton,
            allowedSizes: RibbonItemSize.Large,
            disabled: true,
            id: "pastebtn",
            splitButtonSettings: {
                iconCss: "e-icons e-paste",
                items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }],
                content: "Paste"
            }
        }]
    },
    {
        id: "cutcopy-collection",
        items: [{
            type: RibbonItemType.Button,
            buttonSettings: {
                content: "Cut",
                iconCss: "e-icons e-cut"
            }
        }, {
            type: RibbonItemType.Button,
            buttonSettings: {
                content: "Copy",
                iconCss: "e-icons e-copy"
            }
        }]
    }]
}]
}];

let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");

Run the application

Run the application in the browser using the following command:

npm start

The following example illustrates how tabs, groups, collections, and items are used in a ribbon control to form the ribbon layout.

Source

Preview

app.ts

index.html

styles.css

import { Ribbon, ItemOrientation, RibbonItemSize, RibbonItemType, RibbonTabModel, RibbonColorPicker, DisplayMode, RibbonFileMenu } from "@syncfusion/ej2-ribbon";
import { MenuItemModel, MenuEventArgs } from "@syncfusion/ej2-navigations";

Ribbon.Inject(RibbonFileMenu, RibbonColorPicker);

let fontSize: string[] = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];

let fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"
];

let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
    id: "clipboard",
    header: "Clipboard",
    showLauncherIcon: true,
    groupIconCss: "e-icons e-paste",
    collections: [{
        items: [{
            type: RibbonItemType.SplitButton,
            allowedSizes: RibbonItemSize.Large,
            splitButtonSettings: {
                iconCss: "e-icons e-paste",
                items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }],
                content: "Paste"
            }
        }]
    }, {
        items: [{
            type: RibbonItemType.Button,
            buttonSettings: {
                content: "Cut",
                iconCss: "e-icons e-cut"
            }
        }, {
            type: RibbonItemType.Button,
            buttonSettings: {
                content: "Copy",
                iconCss: "e-icons e-copy"
            }
        }, {
            type: RibbonItemType.Button,
            buttonSettings: {
                content: "Format Painter",
                iconCss: "e-icons e-format-painter"
            }
        }]
    }]
}, {
    header: "Font",
    isCollapsible: false,
    enableGroupOverflow: true,
    orientation: ItemOrientation.Row,
    groupIconCss: "e-icons e-bold",
    cssClass: "font-group",
    collections: [{
        items: [{
            type: RibbonItemType.ComboBox,
            comboBoxSettings: {
                dataSource: fontStyle,
                index: 3,
                allowFiltering: true,
                width: "150px"
            }
        }, {
            type: RibbonItemType.ComboBox,
            comboBoxSettings: {
                dataSource: fontSize,
                index: 3,
                width: "65px",
                allowFiltering: true
            }
        }]
    }, {
        items: [{
            type: RibbonItemType.ColorPicker,
            allowedSizes: RibbonItemSize.Small,
            displayOptions: DisplayMode.Simplified,
            colorPickerSettings: {
                value: "#123456"
            }
        }, {
            type: RibbonItemType.Button,
            allowedSizes: RibbonItemSize.Small,
            buttonSettings: {
                content: "Bold",
                iconCss: "e-icons e-bold"
            }
        }, {
            type: RibbonItemType.Button,
            allowedSizes: RibbonItemSize.Small,
            buttonSettings: {
                content: "Italic",
                iconCss: "e-icons e-italic"
            }
        }, {
            type: RibbonItemType.Button,
            allowedSizes: RibbonItemSize.Small,
            buttonSettings: {
                content: "Underline",
                iconCss: "e-icons e-underline"
            }
        },{
            allowedSizes: RibbonItemSize.Small,
            type: RibbonItemType.Button,
            buttonSettings: {
                content: "Strikethrough",
                iconCss: "e-icons e-strikethrough"
            }
        }, {
            type: RibbonItemType.Button,
            allowedSizes: RibbonItemSize.Small,
            buttonSettings: {
                content: "Change Case",
                iconCss: "e-icons e-change-case"
            }
        }]
    }]
}, {
    header: "Editor",
    isCollapsible: false,
    collections: [{
        items: [{
            type: RibbonItemType.Button,
            allowedSizes: RibbonItemSize.Large,
            buttonSettings: {
                content: "Editor",
                iconCss:"e-icons e-edit"
            }
        }]
    }]
}]
}, {
header: "Insert",
groups: [{
    header: "Tables",
    isCollapsible: false,
    collections: [{
        items: [{
            type: RibbonItemType.DropDown,
            allowedSizes: RibbonItemSize.Large,
            dropDownSettings: {
                iconCss: "e-icons e-table",
                content: "Table",
                items: [
                    { text: "Insert Table" }, { text: "Draw Table" },
                    { text: "Convert Table" }, { text: "Excel SpreadSheet" }
                ]
            }
        }]
    }]
}, {
    id: "illustration",
    header: "Illustrations",
    showLauncherIcon: true,
    orientation: ItemOrientation.Row,
    enableGroupOverflow: true,
    groupIconCss: "e-icons e-image",
    collections: [{
        items: [{
            type: RibbonItemType.Button,
            buttonSettings: {
                content: "Chart",
                iconCss:"e-icons e-chart"
            }
        },]
    }]
}, {
    header: "Media",
    isCollapsible: false,
    collections: [{
        items: [{
            type: RibbonItemType.Template,
            itemTemplate: "#itemTemplate"
        }]
    }]
}]
}, {
header: "View",
groups: [{
    header: "Views",
    groupIconCss: "e-icons e-print",
    orientation: ItemOrientation.Row,
    collections: [{
        items: [{
            type: RibbonItemType.Button,
            buttonSettings: {
                content: "Print Layout",
                iconCss: "e-print e-icons"
            }
        }, {
            type: RibbonItemType.Button,
            buttonSettings: {
                iconCss: "e-icons e-web-layout",
                content: "Web Layout"
            }
        }]
    }]
}, {
    header: "Show",
    isCollapsible: false,
    collections: [{
        items: [{
            type: RibbonItemType.CheckBox,
            checkBoxSettings: {
                label: "Ruler",
                checked: false
            }
        }, {
            type: RibbonItemType.CheckBox,
            checkBoxSettings: {
                checked: false,
                label: "Gridlines"
            }
        }, {
            type: RibbonItemType.CheckBox,
            checkBoxSettings: {
                label: "Navigation Pane",
                checked: true
            }
        }]
    }]
}]
}];

let menuItems: MenuItemModel[] = [
{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
{ text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
{ text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
{ text: "Save as", iconCss: "e-icons e-save", id: "save" }
];

let ribbon: Ribbon = new Ribbon({
tabs: tabs,
fileMenu: {
    menuItems: menuItems,
    visible: true
}
});
ribbon.appendTo("#ribbon");

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 - Ribbon</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>

    <script type="text/x-jsrender" id="itemTemplate">
        <span class="ribbonTemplate ${activeSize}">
            <span class="e-icons e-video"></span>
            <span class="text">Video</span>
          </span>
    </script>
</body>

</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.ribbonTemplate {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ribbonTemplate.Large {
  flex-direction: column;
}

.ribbonTemplate.Large .e-icons {
  font-size: 35px;
}

.ribbonTemplate.Medium .e-icons,
.ribbonTemplate.Small .e-icons{
  font-size: 20px;
  margin: 15px 5px;
}

.ribbonTemplate.Small .text {
  display:none;
}

.font-group .e-ribbon-group-content {
  justify-content: center;
}

Contents

Dependencies
Setup your development environment
Adding Style sheet to the Application
Adding Ribbon component to the application
Injecting required modules
Adding Ribbon Tab
Adding Ribbon Group
Adding Ribbon Item
Run the application

Contents

Dependencies
Setup your development environment
Adding Style sheet to the Application
Adding Ribbon component to the application
Injecting required modules
Adding Ribbon Tab
Adding Ribbon Group
Adding Ribbon Item
Run the application

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!