Syncfusion Angular Ribbon

Syncfusion Angular Ribbon Component

Component Overview

The Syncfusion Angular Ribbon is a professional command interface component that organizes application commands in a tabbed ribbon format, similar to Microsoft Office. It features:

• Hierarchical Command Organization: Tabs → Groups → Collections → Items for logical command structure
• 7 Built-in Item Types: Button, CheckBox, DropDown, SplitButton, ComboBox, ColorPicker, GroupButton, and Gallery
• Dual Layout Modes: Classic (multi-row) and Simplified (collapsible) layouts with automatic resizing
• File Menu & Backstage Views: Traditional file menus or modern backstage interfaces for document operations
• Contextual Tabs: Dynamic tabs that appear based on user selection or context
• Responsive Resizing: Automatic item size adjustment (Large, Medium, Small) based on available width
• Keyboard Navigation: Full keytips support for keyboard-first workflows
• Accessibility Features: WCAG compliance with ARIA attributes and screen reader support
• RTL Support: Right-to-left layout for Arabic, Hebrew, Persian, and Urdu languages
• Gallery Items: Visual selection panels for themes, styles, and color schemes
• Help Pane: Customizable help pane with template support
• Advanced Event System: Comprehensive events for tab selection, collapse/expand, launcher clicks, and item interactions
• Highly Configurable: Extensive API with 20+ ribbon properties, 30+ item properties, and 10+ events

Key Concepts & Hierarchy

Important concepts:

• Tabs: Organize major feature categories (Home, Insert, View)
• Groups: Group related commands within a tab (Clipboard, Font, Alignment)
• Collections: Visual groupings within a group for better organization
• Items: Individual commands with 7 types (Button, DropDown, ColorPicker, etc.)
• Layouts: Classic (multi-row) or Simplified (collapse-capable) with automatic switching
• File Menu/Backstage: Application-level operations (New, Open, Save, Print)

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup (Ivy vs ngcc)
• CSS theme imports and dependencies
• Creating your first Ribbon
• Adding tabs and groups
• Basic items and running the application

Tabs, Groups, and Items Structure

📄 Read: references/tabs-groups-items.md

• Tab hierarchy and properties
• Adding groups to tabs
• Ribbon collections and items
• Item size configuration (Large, Medium, Small)
• Orientation settings (Row/Column)
• Multiple tabs and groups examples

Item Types and Configuration

📄 Read: references/item-types.md

• All 7 built-in item types
• Button items (toggle, disabled states)
• CheckBox, DropDown, SplitButton items
• ComboBox, ColorPicker, GroupButton items
• Complete code examples for each type
• Item settings models and properties

Ribbon Layouts and Resizing

📄 Read: references/layouts.md

• Classic layout (default multi-row format)
• Simplified layout (with collapse support)
• Switching between layouts
• Item size allowances and configuration
• Responsive resizing behavior
• Layout examples and best practices

File Menu and Backstage Views

📄 Read: references/file-menu-and-backstage.md

• File Menu configuration and visibility
• Adding menu items with icons and actions
• Backstage view as file menu replacement
• Backstage items and content
• Footer items and separators
• Back button customization
• Target element positioning
• Complete file menu and backstage examples

Advanced Features

📄 Read: references/advanced-features.md

• Contextual tabs (dynamic tab creation)
• Keytips for keyboard navigation
• Gallery items for visual selection
• Help pane templates
• Tooltip configuration
• Resizing behavior and responsive design
• RTL support for right-to-left languages
• Accessibility features and WCAG compliance

Events and Interactivity

📄 Read: references/events.md

• Tab selection events (tabSelected, tabSelecting)
• Ribbon collapse/expand events
• Backstage item click events
• Event arguments and cancellation
• Event handling patterns
• Complete event examples

Customization and Styling

📄 Read: references/customization-and-styling.md

• CSS class customization
• Theme integration and switching
• CSS variables for styling
• Custom styling examples
• Group icon customization
• Item customization and appearance
• Launcher icon usage

Quick Start Example

Here's a minimal Ribbon with Home and Insert tabs:

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonButtonSettingsModel, RibbonSplitButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" orientation="Row">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [buttonSettings]="copyButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
        <e-ribbon-tab header="Insert">
          <e-ribbon-groups>
            <e-ribbon-group header="Illustrations" orientation="Row">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="chartButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public pasteSettings = { 
    iconCss: "e-icons e-paste", 
    items: [{ text: "Keep Source Format" }, { text: "Merge format" }], 
    content: "Paste" 
  };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public chartButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-chart", content: "Chart" };
}

---

Common Patterns

Pattern 1: Multi-Tab Command Interface

1. Define multiple tabs for major features (Home, Insert, View, Format) 2. Add groups within each tab for related commands 3. Configure collections to organize items visually 4. Use appropriate item types (Button, DropDown, ColorPicker) 5. Set activeLayout to Classic or Simplified 6. Handle tabSelected event for tab-specific actions

Pattern 2: File Menu Integration with Backstage

1. Configure fileMenu or backStageMenu for document operations 2. Add menu items for New, Open, Save, Print, Export 3. Set icons with iconCss and content areas for backstage 4. Handle menu item clicks with event handlers 5. Use footer items for settings or account options 6. Configure back button for backstage navigation

Pattern 3: Responsive Resizing with Size Priorities

1. Set allowedSizes array on items (Large, Medium, Small) 2. Configure activeSize for initial display size 3. Ribbon automatically adjusts item sizes based on width 4. Use Large for primary commands, Small for secondary 5. Handle ribbonCollapsing event for custom resize logic 6. Test responsive behavior at different viewport widths

Pattern 4: Contextual Tabs for Dynamic Commands

1. Define contextualTabs array with tab configurations 2. Set visible property based on user selection or context 3. Use isSelected to activate contextual tab programmatically 4. Add tab-specific groups and items for contextual commands 5. Handle tabSelected to detect contextual tab activation 6. Toggle visibility dynamically in response to user actions

Pattern 5: Keyboard Navigation with Keytips

1. Enable enableKeyTips on ribbon component 2. Assign keyTip property to tabs (Alt+H for Home) 3. Add keytips to groups and individual items 4. Configure layoutSwitcherKeyTip for layout toggle 5. Set keytips on file menu and backstage items 6. Follow consistent keytip patterns (Alt+ letter combinations)

Pattern 6: Gallery Items for Visual Selection

1. Configure items with type="Gallery" for visual panels 2. Define gallerySettings with groups and items 3. Set itemCount, popupWidth, popupHeight for display 4. Use templates for custom gallery item rendering 5. Handle selection events for gallery item clicks 6. Common use cases: themes, styles, colors, table designs

---

Key Properties & Events

Core Ribbon Configuration

Layout & Appearance

Keyboard & Accessibility

File Menu & Backstage

Advanced Features

Globalization

Tab Configuration

Group Configuration

Item Configuration

File Menu Configuration

Backstage Configuration

Contextual Tab Configuration

Key Events

File Menu Events

---

Advanced Features

Table of Contents

• Contextual Tabs
• Keytips for Keyboard Navigation
• Gallery Items
• Help Pane Templates
• Tooltip Configuration
• RTL Support
• Accessibility Features

Contextual Tabs

Overview

Contextual tabs are tabs that appear and disappear based on user selection or application state. They provide context-specific commands that are only relevant when certain content is selected.

Use cases:

• Format tab appears when text is selected
• Design tab appears when image is selected
• Table tools appear when table is active

Contextual Tab Configuration

The contextualTabs property accepts an array of RibbonContextualTabSettingsModel objects:

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonContextualTabSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" [contextualTabs]="contextualTabSettings">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public contextualTabSettings: RibbonContextualTabSettingsModel[] = [
    {
      visible: true,
      isSelected: false,
      tabs: [
        {
          id: "format-tab",
          header: "Format",
          groups: [
            {
              header: "Text Formatting",
              collections: [
                {
                  items: [
                    { 
                      type: "Button", 
                      buttonSettings: { 
                        iconCss: "e-icons e-bold", 
                        content: "Bold" 
                      } 
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ];
}

RibbonContextualTabSettingsModel Properties

Creating Contextual Tabs

import { Component, ViewChild } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { Ribbon } from '@syncfusion/ej2-ribbon';
import { RibbonTabModel, RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <div>
      <button (click)="showFormatTab()">Select Text</button>
      <button (click)="hideFormatTab()">Deselect</button>
      
      <ejs-ribbon #ribbonObj id="ribbon">
        <e-ribbon-tabs>
          <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard">
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
              </e-ribbon-group>
            </e-ribbon-groups>
          </e-ribbon-tab>
        </e-ribbon-tabs>
      </ejs-ribbon>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('ribbonObj') ribbonObj!: Ribbon;
  
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public showFormatTab() {
    if (this.ribbonObj) {
      // Add contextual tab
      const formatTab: RibbonTabModel = {
        header: "Format",
        groups: [
          {
            header: "Text Formatting",
            collections: [
              {
                items: [
                  { type: "Button", buttonSettings: { iconCss: "e-icons e-bold", content: "Bold" } }
                ]
              }
            ]
          }
        ]
      };
      this.ribbonObj.addTab(formatTab, 1);  // Add at index 1
    }
  }
  
  public hideFormatTab() {
    if (this.ribbonObj) {
      this.ribbonObj.removeTab(1);  // Remove tab at index 1
    }
  }
}

Dynamic Tab Management

// Add tab at specific position
ribbon.addTab(tabModel, index);

// Remove tab by index
ribbon.removeTab(index);

// Get all tabs
const tabs = ribbon.tabs;

// Enable/disable tab
ribbon.enableTab(index, true/false);

Keytips for Keyboard Navigation

Overview

Keytips provide keyboard shortcuts for ribbon commands, enabling power users to operate without mouse. Press Alt to activate keytip mode.

Enable Keytips

First, enable keytips at the ribbon level:

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" [enableKeyTips]="true">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home" keyTip="H">
          <!-- Tabs, groups, and items -->
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {}

Note: Set enableKeyTips to true to activate keytip functionality. When enabled, users can press Alt to show keytip badges on all ribbon elements that have a keyTip property defined.

Implementing Keytips

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home" keyTip="H">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" 
                      keyTip="P"
                      [buttonSettings]="pasteButton">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button"
                      keyTip="X" 
                      [buttonSettings]="cutButton">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button"
                      keyTip="C" 
                      [buttonSettings]="copyButton">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
}

Usage:

• Press Alt to show keytip hints
• Press keytip letter to execute command
• Example: Alt + H opens Home tab, then P for Paste

Gallery Items

Overview

Gallery items display visual options for selection, such as styles, themes, or templates. Users click to preview and apply selections from a grid of visual choices.

Use cases:

• Style galleries (Normal, Heading 1, Heading 2)
• Color themes
• Chart templates
• Table styles
• Shape galleries

Gallery Configuration

The gallerySettings property configures gallery behavior and content:

RibbonGallerySettingsModel Properties:

Basic Gallery

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonGallerySettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Design">
          <e-ribbon-groups>
            <e-ribbon-group header="Styles">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public gallerySettings: RibbonGallerySettingsModel = {
    itemCount: 3,
    items: [
      { text: "Normal", iconCss: "e-icons e-normal" },
      { text: "Heading 1", iconCss: "e-icons e-h1" },
      { text: "Heading 2", iconCss: "e-icons e-h2" },
      { text: "Title", iconCss: "e-icons e-title" },
      { text: "Subtitle", iconCss: "e-icons e-subtitle" }
    ]
  };
}

Gallery with Groups

Organize gallery items into logical groups:

public gallerySettings: RibbonGallerySettingsModel = {
  itemCount: 4,
  popupWidth: "400px",
  popupHeight: "300px",
  groups: [
    {
      header: "Text Styles",
      items: [
        { text: "Normal", iconCss: "e-icons e-normal" },
        { text: "Heading 1", iconCss: "e-icons e-h1" },
        { text: "Heading 2", iconCss: "e-icons e-h2" }
      ]
    },
    {
      header: "Special Styles",
      items: [
        { text: "Quote", iconCss: "e-icons e-quote" },
        { text: "Code", iconCss: "e-icons e-code" }
      ]
    }
  ]
};

Gallery with Custom Template

Create custom gallery item rendering:

@Component({
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Design">
          <e-ribbon-groups>
            <e-ribbon-group header="Themes">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Gallery" [gallerySettings]="themeGallery"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public themeGallery: RibbonGallerySettingsModel = {
    itemCount: 3,
    template: '<div class="theme-item" style="background: ${color};"><span>${text}</span></div>',
    items: [
      { text: "Blue Theme", color: "#007bff" },
      { text: "Green Theme", color: "#28a745" },
      { text: "Red Theme", color: "#dc3545" },
      { text: "Purple Theme", color: "#6f42c1" }
    ]
  };
}

Gallery Item Selection

Handle gallery item selection:

import { GallerySelectEventArgs } from '@syncfusion/ej2-ribbon';

@Component({
  template: `
    <ejs-ribbon id="ribbon" (gallerySelect)="onGallerySelect($event)">
      <!-- Gallery items -->
    </ejs-ribbon>
  `
})
export class AppComponent {
  public onGallerySelect(args: GallerySelectEventArgs) {
    console.log("Selected item:", args.item);
    // Apply the selected style/theme
  }
}

Help Pane Templates

Overview

Help pane templates provide contextual help or tooltips alongside ribbon commands.

Help Pane Configuration

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" [helpPaneTemplate]="helpTemplate">
      <ng-template #helpTemplate>
        <div style="padding: 10px; background: #f5f5f5; border-radius: 4px;">
          <h3>Help & Tips</h3>
          <p>Click a command to learn more about it.</p>
          <div id="help-content"></div>
        </div>
      </ng-template>
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
}

Tooltip Configuration

Button Tooltips

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { TooltipEventArgs } from "@syncfusion/ej2-popups";

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = {
    iconCss: "e-icons e-paste",
    content: "Paste",
    toolTip: "Paste content (Ctrl+V)"
  };
  
  public cutButton: RibbonButtonSettingsModel = {
    iconCss: "e-icons e-cut",
    content: "Cut",
    toolTip: "Cut selected content (Ctrl+X)"
  };
}

Tooltips appear on hover and provide helpful information about commands.

RTL Support

Right-to-Left Layout

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <div dir="rtl">
      <ejs-ribbon id="ribbon" enableRtl="true">
        <e-ribbon-tabs>
          <e-ribbon-tab header="الرئيسية">
            <e-ribbon-groups>
              <e-ribbon-group header="الحافظة">
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
              </e-ribbon-group>
            </e-ribbon-groups>
          </e-ribbon-tab>
        </e-ribbon-tabs>
      </ejs-ribbon>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "لصق" };
}

Features:

• Text direction reversed (right-to-left)
• Layout mirrored appropriately
• Icon positions adjusted
• Support for Arabic, Hebrew, Persian languages

Accessibility Features

ARIA and Semantic HTML

The Ribbon component includes built-in accessibility support:

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" role="application" [ariaLabel]="'Main application ribbon'">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home" [ariaLabel]="'Home tab with clipboard commands'">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" [ariaLabel]="'Clipboard group with copy, cut, paste commands'">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" 
                      [buttonSettings]="pasteButton"
                      [ariaLabel]="'Paste button, paste content from clipboard'">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton = { 
    iconCss: "e-icons e-paste", 
    content: "Paste",
    toolTip: "Paste content (Ctrl+V)"
  };
}

Keyboard Navigation

• Tab: Navigate between items
• Enter/Space: Activate button
• Arrow keys: Navigate within groups
• Alt: Activate keytip mode
• Escape: Close menus/popups

Screen Reader Support

• Proper ARIA labels for all elements
• Semantic HTML structure
• Descriptive tooltips
• Tab order management
• Focus indicators

Color Contrast

Ribbon uses color combinations that meet WCAG AA standards:

• Text color: #333333 on light backgrounds
• Selected state: Clear visual distinction
• Disabled state: Reduced opacity

Best Practices for Accessibility

1. Always include labels for all ribbon items 2. Use meaningful icons with text labels 3. Provide keyboard shortcuts via keytips 4. Test with screen readers (NVDA, JAWS) 5. Ensure focus management between controls 6. Use semantic grouping for related commands

---

Customization and Styling

Table of Contents

• CSS Class Customization
• Theme Integration
• CSS Variables
• Custom Styling Examples
• Group and Item Customization

CSS Class Customization

Custom Classes on Components

Add custom CSS classes to ribbon elements:

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" cssClass="my-custom-ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" cssClass="custom-clipboard-group">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" 
                      cssClass="custom-button"
                      [buttonSettings]="pasteButton">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
}

CSS in app.component.css

/* Custom ribbon styling */
.my-custom-ribbon {
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Custom group styling */
.custom-clipboard-group {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 5px;
}

/* Custom button styling */
.custom-button {
  border-radius: 2px;
}

.custom-button:hover {
  background-color: #e3f2fd;
}

.custom-button:active {
  background-color: #bbdefb;
}

Theme Integration

Available Themes

Syncfusion provides multiple built-in themes:

Switching Themes Dynamically

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <div>
      <div style="margin-bottom: 15px;">
        <label>Select Theme:</label>
        <select (change)="switchTheme($event)">
          <option value="material3">Material 3</option>
          <option value="bootstrap5">Bootstrap 5</option>
          <option value="fluent">Fluent</option>
          <option value="tailwind">Tailwind</option>
        </select>
      </div>
      
      <ejs-ribbon id="ribbon">
        <e-ribbon-tabs>
          <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard">
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
              </e-ribbon-group>
            </e-ribbon-groups>
          </e-ribbon-tab>
        </e-ribbon-tabs>
      </ejs-ribbon>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public switchTheme(event: any) {
    const theme = event.target.value;
    const head = document.head;
    
    // Remove existing theme link
    const existingLink = head.querySelector('link[id="theme-link"]');
    if (existingLink) {
      existingLink.remove();
    }
    
    // Add new theme link
    const link = document.createElement('link');
    link.id = 'theme-link';
    link.rel = 'stylesheet';
    link.href = `../node_modules/@syncfusion/ej2-base/styles/${theme}.css`;
    head.appendChild(link);
    
    console.log(`Theme switched to: ${theme}`);
  }
}

CSS Variables

Overriding Theme Variables

Modern Syncfusion themes use CSS variables for customization:

/* Override default colors */
:root {
  /* Primary colors */
  --e-primary: #0078d4;
  --e-primary-dark: #005a9e;
  --e-primary-light: #b4d7f5;
  
  /* Text colors */
  --e-text: #333333;
  --e-text-light: #666666;
  
  /* Background colors */
  --e-background: #ffffff;
  --e-background-light: #f5f5f5;
  
  /* Border colors */
  --e-border: #d0d0d0;
  
  /* Spacing */
  --e-spacing-2xs: 2px;
  --e-spacing-xs: 4px;
  --e-spacing-sm: 8px;
  --e-spacing-md: 12px;
  --e-spacing-lg: 16px;
  
  /* Border radius */
  --e-border-radius-xs: 2px;
  --e-border-radius-sm: 4px;
  --e-border-radius-md: 6px;
  --e-border-radius-lg: 8px;
}

/* Use variables in custom styles */
.my-custom-ribbon {
  background-color: var(--e-background-light);
  border-bottom: 1px solid var(--e-border);
}

.my-custom-button {
  background-color: var(--e-primary);
  color: white;
  border-radius: var(--e-border-radius-sm);
  padding: var(--e-spacing-sm) var(--e-spacing-md);
}

.my-custom-button:hover {
  background-color: var(--e-primary-dark);
}

Custom Styling Examples

Example 1: Corporate Branding

/* Corporate color scheme */
.corp-ribbon {
  background: linear-gradient(180deg, #1a4d8f 0%, #1e5a96 100%);
}

.corp-ribbon .e-ribbon-tab {
  color: #ffffff;
}

.corp-ribbon .e-ribbon-tab.e-active {
  border-bottom: 3px solid #ffb81c;
  color: #ffb81c;
}

.corp-ribbon .e-ribbon-group-header {
  color: #ffffff;
  font-weight: 600;
}

.corp-ribbon .e-ribbon-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.corp-ribbon .e-ribbon-item.e-active {
  background-color: rgba(255, 184, 28, 0.2);
  border-radius: 4px;
}

Example 2: Dark Mode

/* Dark mode styling */
.dark-ribbon {
  background-color: #2d2d2d;
  color: #e0e0e0;
}

.dark-ribbon .e-ribbon-tab {
  color: #e0e0e0;
  border-bottom-color: #555555;
}

.dark-ribbon .e-ribbon-tab.e-active {
  background-color: #1a1a1a;
  border-bottom-color: #4caf50;
  color: #4caf50;
}

.dark-ribbon .e-ribbon-group {
  background-color: #3a3a3a;
  border: 1px solid #555555;
}

.dark-ribbon .e-ribbon-group-header {
  color: #b0b0b0;
  font-weight: 600;
}

.dark-ribbon .e-ribbon-item:hover {
  background-color: #4a4a4a;
  border-radius: 3px;
}

.dark-ribbon .e-ribbon-item.e-active {
  background-color: #4caf50;
  color: #ffffff;
}

Example 3: Compact/Dense UI

/* Compact ribbon layout */
.compact-ribbon {
  padding: 0;
  --e-spacing-md: 6px;
  --e-spacing-sm: 4px;
}

.compact-ribbon .e-ribbon-tab {
  padding: 4px 12px;
  font-size: 12px;
}

.compact-ribbon .e-ribbon-group {
  padding: 4px;
  margin: 2px;
}

.compact-ribbon .e-ribbon-group-header {
  font-size: 11px;
  padding: 2px 4px;
}

.compact-ribbon .e-ribbon-item {
  padding: 3px 6px;
  margin: 1px;
}

.compact-ribbon .e-ribbon-item-label {
  font-size: 11px;
}

.compact-ribbon .e-icon-large {
  width: 20px;
  height: 20px;
  font-size: 16px;
}

Group and Item Customization

Custom Group Styling

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <!-- Prominent group -->
            <e-ribbon-group header="Critical" 
              cssClass="prominent-group"
              [showLauncherIcon]="true"
              groupIconCss="e-icons e-warning">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="saveButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
            
            <!-- Secondary group -->
            <e-ribbon-group header="Formatting" cssClass="secondary-group">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="boldButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public saveButton = { iconCss: "e-icons e-save", content: "Save" };
  public boldButton = { iconCss: "e-icons e-bold", content: "Bold" };
}

CSS for Custom Groups

/* Prominent group - draws attention */
.prominent-group {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 4px;
}

.prominent-group .e-ribbon-group-header {
  color: #856404;
  font-weight: 700;
}

.prominent-group .e-ribbon-item {
  background-color: #fffbea;
}

.prominent-group .e-ribbon-item:hover {
  background-color: #ffeeba;
}

/* Secondary group - less emphasis */
.secondary-group {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  opacity: 0.8;
}

.secondary-group .e-ribbon-group-header {
  color: #6c757d;
  font-size: 12px;
}

Custom Button Styling

<!-- Buttons with custom styling -->
<e-ribbon-item type="Button" 
  cssClass="danger-button"
  [buttonSettings]="deleteButton">
</e-ribbon-item>

<e-ribbon-item type="Button" 
  cssClass="success-button"
  [buttonSettings]="applyButton">
</e-ribbon-item>

CSS for Custom Buttons

/* Danger button - red styling */
.danger-button .e-ribbon-button {
  background-color: #dc3545;
  color: white;
}

.danger-button .e-ribbon-button:hover {
  background-color: #c82333;
}

.danger-button .e-ribbon-button:active {
  background-color: #bd2130;
}

/* Success button - green styling */
.success-button .e-ribbon-button {
  background-color: #28a745;
  color: white;
}

.success-button .e-ribbon-button:hover {
  background-color: #218838;
}

.success-button .e-ribbon-button:active {
  background-color: #1e7e34;
}

Best Practices for Customization

1. Use CSS variables for maintainability and theme switching 2. Maintain color contrast for accessibility (WCAG AA minimum) 3. Test responsive behavior across different ribbon widths 4. Keep custom classes specific to avoid unintended cascade 5. Document custom styles with comments explaining intent 6. Test with multiple themes to ensure compatibility 7. Avoid inline styles - use external stylesheets 8. Use semantic class names that describe purpose, not appearance

---

Events and Interactivity

Table of Contents

• Tab Selection Events
• Ribbon Expand/Collapse Events
• Backstage Events
• Event Arguments
• Event Handling Patterns
• Complete Event Example

Tab Selection Events

tabSelected Event

Triggered after a tab is successfully selected.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { TabSelectedEventArgs } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" (tabSelected)="onTabSelected($event)">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
        <e-ribbon-tab header="Insert">
          <e-ribbon-groups>
            <e-ribbon-group header="Tables">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="DropDown" [dropDownSettings]="tableSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  public tableSettings = { iconCss: "e-icons e-table", content: "Table", items: [] };
  
  public onTabSelected(args: TabSelectedEventArgs) {
    console.log("Tab selected:", args.element?.innerText);
    // Perform actions based on selected tab
    if (args.element?.innerText?.includes("Insert")) {
      console.log("Insert tab activated - load insert options");
    }
  }
}

tabSelecting Event

Triggered before a tab is selected. Can be canceled to prevent selection.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { TabSelectingEventArgs } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" (tabSelecting)="onTabSelecting($event)">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home"></e-ribbon-tab>
        <e-ribbon-tab header="Insert"></e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public onTabSelecting(args: TabSelectingEventArgs) {
    console.log("About to select tab:", args.element?.innerText);
    
    // Example: Prevent selection of certain tabs
    if (args.element?.innerText?.includes("Insert")) {
      args.cancel = true;  // Cancel tab selection
      console.log("Insert tab selection blocked");
    }
  }
}

Ribbon Expand/Collapse Events

ribbonCollapsing Event

Triggered before the ribbon is collapsed. Can be canceled.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { ExpandCollapseEventArgs } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" (ribbonCollapsing)="onRibbonCollapsing($event)">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public onRibbonCollapsing(args: ExpandCollapseEventArgs) {
    console.log("Ribbon collapsing...");
    
    // Perform cleanup or save state before collapse
    // args.cancel = true;  // Prevent collapse if needed
  }
}

ribbonExpanded Event

Triggered after the ribbon is expanded.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { ExpandCollapseEventArgs } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" (ribbonExpanded)="onRibbonExpanded($event)">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public onRibbonExpanded(args: ExpandCollapseEventArgs) {
    console.log("Ribbon expanded");
    // Load additional resources or update UI
  }
}

Launcher Icon Events

launcherClick Event

Triggered when the launcher icon in a group is clicked.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { LauncherClickEventArgs } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" (launcherClick)="onLauncherClick($event)">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Font" 
              id="font-group"
              [showLauncherIcon]="true" 
              groupIconCss="e-icons e-bold">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="boldButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public boldButton = { iconCss: "e-icons e-bold", content: "Bold" };
  
  public onLauncherClick(args: LauncherClickEventArgs) {
    console.log("Launcher clicked for group:", args.groupId);
    // Open advanced font settings dialog
    if (args.groupId === "font-group") {
      console.log("Opening Font settings dialog...");
    }
  }
}

Overflow Popup Events

overflowPopupOpen Event

Triggered before the overflow popup menu opens.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { OverflowPopupEventArgs } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" (overflowPopupOpen)="onOverflowOpen($event)">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" [enableGroupOverflow]="true">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public onOverflowOpen(args: OverflowPopupEventArgs) {
    console.log("Overflow popup opening", args);
    // args.cancel = true;  // Cancel popup opening if needed
  }
}

overflowPopupClose Event

Triggered before the overflow popup menu closes.

public onOverflowClose(args: OverflowPopupEventArgs) {
  console.log("Overflow popup closing", args);
  // args.cancel = true;  // Prevent popup from closing
}

Layout Switch Events

layoutSwitched Event

Triggered when the ribbon layout is switched between Classic and Simplified.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { LayoutSwitchedEventArgs, RibbonLayout } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" 
      [activeLayout]="activeLayout"
      (layoutSwitched)="onLayoutSwitched($event)">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public activeLayout = RibbonLayout.Classic;
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public onLayoutSwitched(args: LayoutSwitchedEventArgs) {
    console.log("Layout switched to:", args.activeLayout);
    console.log("Event:", args.event);
    
    // Save user preference
    if (args.activeLayout === "Classic") {
      localStorage.setItem("ribbonLayout", "classic");
    } else if (args.activeLayout === "Simplified") {
      localStorage.setItem("ribbonLayout", "simplified");
    }
  }
}

Backstage Events

backstageItemClick Event

Triggered when a backstage item is clicked.

import { Component } from "@angular/core";
import { RibbonModule, RibbonBackstageService } from '@syncfusion/ej2-angular-ribbon';
import { BackStageMenuModel, BackstageItemModel } from '@syncfusion/ej2-angular-ribbon';
import { BackstageItemClickEventArgs } from '@syncfusion/ej2-ribbon';

@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonBackstageService ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" [backStageMenu]="backstageSettings" (backStageItemClick)="onBackstageItemClick($event)">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public menuItems: BackstageItemModel[] = [
    { id: "new", text: "New", iconCss: "e-icons e-file-new", content: "<div style='padding: 20px;'>New Document</div>" },
    { id: "open", text: "Open", iconCss: "e-icons e-folder-open", content: "<div style='padding: 20px;'>Open Document</div>" },
    { id: "save", text: "Save", iconCss: "e-icons e-save", content: "<div style='padding: 20px;'>Save Document</div>" }
  ];
  
  public backstageSettings: BackStageMenuModel = {
    text: "File",
    visible: true,
    items: this.menuItems,
    backButton: { text: "Close" }
  };
  
  public onBackstageItemClick(args: BackstageItemClickEventArgs) {
    console.log("Backstage item clicked:", args.item?.id);
    
    switch (args.item?.id) {
      case "new":
        console.log("Creating new document...");
        break;
      case "open":
        console.log("Opening document...");
        break;
      case "save":
        console.log("Saving document...");
        break;
    }
  }
}

Event Arguments

Common Event Properties

Tab Event Arguments (TabSelectedEventArgs, TabSelectingEventArgs)

public onTabSelected(args: TabSelectedEventArgs) {
  console.log("Selected element:", args.element);
  console.log("Event type:", args.type);
  console.log("Name:", args.name);
}

Expand/Collapse Event Arguments (ExpandCollapseEventArgs)

public onRibbonCollapsing(args: ExpandCollapseEventArgs) {
  console.log("Collapsing state:", args.isExpanded);
  if (args.cancel) {
    console.log("Event was canceled");
  }
}

Event Handling Patterns

Pattern 1: Tab-Based Command Loading

Load different commands based on active tab:

public onTabSelected(args: TabSelectedEventArgs) {
  const tabText = args.element?.innerText;
  
  if (tabText?.includes("Insert")) {
    this.loadInsertCommands();
  } else if (tabText?.includes("Format")) {
    this.loadFormatCommands();
  }
}

public loadInsertCommands() {
  console.log("Loading insert commands...");
  // Fetch and populate insert options
}

public loadFormatCommands() {
  console.log("Loading format commands...");
  // Fetch and populate format options
}

Pattern 2: State Persistence

Save ribbon state for user preferences:

public onTabSelected(args: TabSelectedEventArgs) {
  const activeTab = args.element?.getAttribute('data-tab-id');
  localStorage.setItem('lastActiveTab', activeTab || '');
}

public onRibbonCollapsing(args: ExpandCollapseEventArgs) {
  localStorage.setItem('ribbonCollapsed', 'true');
}

Restore on component initialization:

public ngOnInit() {
  const lastTab = localStorage.getItem('lastActiveTab');
  const wasCollapsed = localStorage.getItem('ribbonCollapsed') === 'true';
  
  if (wasCollapsed) {
    // Collapse ribbon on load
  }
}

Pattern 3: Validation Before Tab Switch

Prevent unsaved data loss:

public onTabSelecting(args: TabSelectingEventArgs) {
  if (this.hasUnsavedChanges) {
    args.cancel = true;
    
    this.showConfirmDialog().then(confirmed => {
      if (confirmed) {
        this.saveChanges().then(() => {
          // Allow tab switch
          args.cancel = false;
        });
      }
    });
  }
}

private hasUnsavedChanges = false;

Complete Event Example

import { Component } from "@angular/core";
import { RibbonModule, RibbonBackstageService } from '@syncfusion/ej2-angular-ribbon';
import { BackStageMenuModel, BackstageItemModel } from '@syncfusion/ej2-angular-ribbon';
import { TabSelectedEventArgs, TabSelectingEventArgs, ExpandCollapseEventArgs, LauncherClickEventArgs, OverflowPopupEventArgs, LayoutSwitchedEventArgs } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonBackstageService ],
  standalone: true,
  selector: "app-root",
  template: `
    <div>
      <div style="margin: 10px;">
        <strong>Last Action:</strong> {{ lastAction }}
      </div>
      
      <ejs-ribbon id="ribbon" 
        [backStageMenu]="backstageSettings"
        (tabSelected)="onTabSelected($event)"
        (tabSelecting)="onTabSelecting($event)"
        (ribbonCollapsing)="onRibbonCollapsing($event)"
        (ribbonExpanded)="onRibbonExpanded($event)"
        (launcherClick)="onLauncherClick($event)"
        (overflowPopupOpen)="onOverflowOpen($event)"
        (overflowPopupClose)="onOverflowClose($event)"
        (layoutSwitched)="onLayoutSwitched($event)"
        (backStageItemClick)="onBackstageItemClick($event)">
        
        <e-ribbon-tabs>
          <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard">
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
              </e-ribbon-group>
            </e-ribbon-groups>
          </e-ribbon-tab>
          
          <e-ribbon-tab header="Insert">
            <e-ribbon-groups>
              <e-ribbon-group header="Tables">
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" [buttonSettings]="tableButton"></e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
              </e-ribbon-group>
            </e-ribbon-groups>
          </e-ribbon-tab>
        </e-ribbon-tabs>
      </ejs-ribbon>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public lastAction = "None";
  
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  public tableButton = { iconCss: "e-icons e-table", content: "Table" };
  
  public menuItems: BackstageItemModel[] = [
    { id: "new", text: "New", iconCss: "e-icons e-file-new", content: "<div style='padding: 20px;'>New Document</div>" },
    { id: "open", text: "Open", iconCss: "e-icons e-folder-open", content: "<div style='padding: 20px;'>Open Document</div>" }
  ];
  
  public backstageSettings: BackStageMenuModel = {
    text: "File",
    visible: true,
    items: this.menuItems,
    backButton: { text: "Close" }
  };
  
  public onTabSelected(args: TabSelectedEventArgs) {
    this.lastAction = `Tab selected: ${args.element?.innerText}`;
    console.log("Tab selected event fired", args);
  }
  
  public onTabSelecting(args: TabSelectingEventArgs) {
    this.lastAction = `Tab selecting: ${args.element?.innerText}`;
    console.log("Tab selecting event fired", args);
  }
  
  public onRibbonCollapsing(args: ExpandCollapseEventArgs) {
    this.lastAction = "Ribbon collapsing";
    console.log("Ribbon collapsing event fired", args);
  }
  
  public onRibbonExpanded(args: ExpandCollapseEventArgs) {
    this.lastAction = "Ribbon expanded";
    console.log("Ribbon expanded event fired", args);
  }
  
  public onLauncherClick(args: LauncherClickEventArgs) {
    this.lastAction = `Launcher clicked: ${args.groupId}`;
    console.log("Launcher click event fired", args);
  }
  
  public onOverflowOpen(args: OverflowPopupEventArgs) {
    this.lastAction = "Overflow popup opening";
    console.log("Overflow popup open event fired", args);
  }
  
  public onOverflowClose(args: OverflowPopupEventArgs) {
    this.lastAction = "Overflow popup closing";
    console.log("Overflow popup close event fired", args);
  }
  
  public onLayoutSwitched(args: LayoutSwitchedEventArgs) {
    this.lastAction = `Layout switched to: ${args.activeLayout}`;
    console.log("Layout switched event fired", args);
  }
  
  public onBackstageItemClick(args: any) {
    this.lastAction = `Backstage item clicked: ${args.item?.id}`;
    console.log("Backstage item click event fired", args);
  }
}

---

File Menu and Backstage Views

Table of Contents

• File Menu Overview
• Adding File Menu
• Menu Items Configuration
• Backstage View
• Adding Backstage Items
• Backstage Footer Items
• Backstage Customization

File Menu Overview

The File Menu is a quick-access menu for document operations like New, Open, Save, and Print. It provides an alternative to the traditional menu bar.

Key characteristics:

• Dropdown button at ribbon start
• Contains frequently used document operations
• Optional component (disabled by default)
• Fully customizable menu items

Adding File Menu

Basic File Menu

import { Component } from "@angular/core";
import { RibbonModule, RibbonFileMenuService } from '@syncfusion/ej2-angular-ribbon';
import { FileMenuSettingsModel, RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonFileMenuService ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" [fileMenu]="fileSettings">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public fileSettings: FileMenuSettingsModel = {
    visible: true,
    menuItems: [
      { text: "New", iconCss: "e-icons e-file-new", id: "new" },
      { text: "Open", iconCss: "e-icons e-folder-open", id: "open" },
      { text: "Save", iconCss: "e-icons e-save", id: "save" },
      { text: "Save As", iconCss: "e-icons e-save", id: "saveAs" },
      { text: "Print", iconCss: "e-icons e-print", id: "print" }
    ]
  };
}

Important: Include RibbonFileMenuService provider for file menu functionality.

Menu Items Configuration

File Menu Properties

Menu Item Properties

Menu Item with Submenu

public fileSettings: FileMenuSettingsModel = {
  visible: true,
  menuItems: [
    { 
      text: "New", 
      iconCss: "e-icons e-file-new", 
      id: "new",
      items: [
        { text: "Blank Document", id: "blank" },
        { text: "From Template", id: "template" }
      ]
    },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "open" },
    { separator: true },
    { text: "Exit", iconCss: "e-icons e-close", id: "exit" }
  ]
};

Menu Item Separator

public fileSettings: FileMenuSettingsModel = {
  visible: true,
  menuItems: [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "open" },
    { separator: true },  // Visual separator
    { text: "Exit", iconCss: "e-icons e-close", id: "exit" }
  ]
};

Item Template

Customize file menu item rendering with templates:

public fileSettings: FileMenuSettingsModel = {
  visible: true,
  text: "File",
  itemTemplate: '<div class="custom-menu-item"><span class="menu-icon ${iconCss}"></span><span class="menu-text">${text}</span></div>',
  menuItems: [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "open" }
  ]
};

Popup Template

Customize the entire file menu popup content:

public fileSettings: FileMenuSettingsModel = {
  visible: true,
  text: "File",
  popupTemplate: `
    <div style="padding: 20px;">
      <h3>File Operations</h3>
      <button class="e-btn">New Document</button>
      <button class="e-btn">Open Document</button>
    </div>
  `,
  menuItems: []
};

Animation Settings

Configure sub menu animations:

public fileSettings: FileMenuSettingsModel = {
  visible: true,
  text: "File",
  animationSettings: {
    effect: 'SlideDown',
    duration: 400,
    easing: 'ease'
  },
  menuItems: [
    { 
      text: "New", 
      items: [
        { text: "Blank Document" },
        { text: "From Template" }
      ]
    }
  ]
};

Show Item on Click

Control sub menu opening behavior:

public fileSettings: FileMenuSettingsModel = {
  visible: true,
  text: "File",
  showItemOnClick: true,  // Sub menu opens only on click, not on hover
  menuItems: [
    { 
      text: "New", 
      items: [
        { text: "Blank Document" },
        { text: "From Template" }
      ]
    }
  ]
};

Keytip and Tooltip

Add keyboard shortcuts and tooltips:

public fileSettings: FileMenuSettingsModel = {
  visible: true,
  text: "File",
  keyTip: "F",  // Press Alt+F to open
  ribbonTooltipSettings: {
    title: "File Menu",
    content: "Access file operations like New, Open, Save, and Print"
  },
  menuItems: [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "open" }
  ]
};

File Menu Events

File menu supports several events for handling user interactions:

import { Component } from "@angular/core";
import { RibbonModule, RibbonFileMenuService } from '@syncfusion/ej2-angular-ribbon';
import { FileMenuSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { FileMenuEventArgs, FileMenuBeforeOpenCloseEventArgs, FileMenuOpenCloseEventArgs } from '@syncfusion/ej2-ribbon';

@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonFileMenuService ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" [fileMenu]="fileSettings"></ejs-ribbon>
  `
})
export class AppComponent {
  public fileSettings: FileMenuSettingsModel = {
    visible: true,
    text: "File",
    menuItems: [
      { text: "New", iconCss: "e-icons e-file-new", id: "new" },
      { text: "Open", iconCss: "e-icons e-folder-open", id: "open" }
    ],
    beforeOpen: (args: FileMenuBeforeOpenCloseEventArgs) => {
      console.log("File menu about to open", args);
      // args.cancel = true;  // Cancel opening if needed
    },
    open: (args: FileMenuOpenCloseEventArgs) => {
      console.log("File menu opened", args);
    },
    beforeClose: (args: FileMenuBeforeOpenCloseEventArgs) => {
      console.log("File menu about to close", args);
    },
    close: (args: FileMenuOpenCloseEventArgs) => {
      console.log("File menu closed", args);
    },
    beforeItemRender: (args: FileMenuEventArgs) => {
      console.log("Rendering menu item", args.item);
    },
    select: (args: FileMenuEventArgs) => {
      console.log("Menu item selected", args.item);
      if (args.item.id === "new") {
        console.log("Creating new document...");
      }
    }
  };
}

Available File Menu Events:

• beforeOpen - Before file menu popup opens (cancelable)
• open - After file menu popup opens
• beforeClose - Before file menu popup closes (cancelable)
• close - After file menu popup closes
• beforeItemRender - While rendering each menu item
• select - When menu item is selected

Backstage View

Backstage Overview

The Backstage view is a modern replacement for the File Menu. It displays application-level information and settings in a full-page overlay.

Features:

• Left sidebar with item list
• Right content area for item details
• Application-level operations
• Professional office-like appearance
• Replaces traditional file menu

Basic Backstage

import { Component } from "@angular/core";
import { RibbonModule, RibbonBackstageService } from '@syncfusion/ej2-angular-ribbon';
import { BackStageMenuModel, BackstageItemModel, RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonBackstageService ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" [backStageMenu]="backstageSettings">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public backstageSettings: BackStageMenuModel = {
    text: "File",
    visible: true,
    items: [
      { 
        id: "home", 
        text: "Home", 
        iconCss: "e-icons e-home", 
        content: "<div style='padding: 20px;'><h2>Welcome</h2><p>Start a new document or open recent files.</p></div>" 
      }
    ],
    backButton: {
      text: "Close",
      visible: true
    }
  };
}

Important: Include RibbonBackstageService provider for backstage functionality.

Adding Backstage Items

Backstage Menu Properties

Backstage Item Properties

Multiple Backstage Items

public menuItems: BackstageItemModel[] = [
  { 
    id: "home", 
    text: "Home", 
    iconCss: "e-icons e-home", 
    content: this.getHomeContent() 
  },
  { 
    id: "new", 
    text: "New", 
    iconCss: "e-icons e-file-new", 
    content: this.getNewContent() 
  },
  { 
    id: "open", 
    text: "Open", 
    iconCss: "e-icons e-folder-open", 
    content: this.getOpenContent() 
  },
  { 
    id: "save", 
    text: "Save", 
    iconCss: "e-icons e-save", 
    content: this.getSaveContent() 
  }
];

public backstageSettings: BackStageMenuModel = {
  text: "File",
  visible: true,
  items: this.menuItems,
  backButton: { text: "Close" }
};

public getHomeContent(): string {
  return "<div style='padding: 20px;'><h2>Home</h2><p>Recent documents and options.</p></div>";
}

public getNewContent(): string {
  return "<div style='padding: 20px;'><h2>New</h2><p>Create new document.</p></div>";
}

public getOpenContent(): string {
  return "<div style='padding: 20px;'><h2>Open</h2><p>Open existing document.</p></div>";
}

public getSaveContent(): string {
  return "<div style='padding: 20px;'><h2>Save</h2><p>Save document.</p></div>";
}

Backstage Footer Items

Adding Footer Items

Footer items appear at the bottom of the backstage item list:

public menuItems: BackstageItemModel[] = [
  { 
    id: "home", 
    text: "Home", 
    iconCss: "e-icons e-home", 
    content: this.getHomeContent() 
  },
  { 
    id: "new", 
    text: "New", 
    iconCss: "e-icons e-file-new", 
    content: this.getNewContent() 
  },
  { separator: true, isFooter: true },
  { 
    id: "options", 
    text: "Options", 
    isFooter: true, 
    content: this.getOptionsContent() 
  },
  { 
    id: "account", 
    text: "Account", 
    isFooter: true, 
    content: this.getAccountContent() 
  }
];

public backstageSettings: BackStageMenuModel = {
  text: "File",
  visible: true,
  items: this.menuItems,
  backButton: { text: "Close" }
};

Footer items are positioned at the bottom, separated by a separator line.

Footer Content Example

public getOptionsContent(): string {
  return `
    <div style='padding: 20px;'>
      <h3>Options</h3>
      <ul>
        <li><label><input type='checkbox' checked> AutoSave</label></li>
        <li><label><input type='checkbox' checked> Spell Check</label></li>
      </ul>
    </div>
  `;
}

Backstage Customization

Back Button Customization

public backstageSettings: BackStageMenuModel = {
  text: "File",
  visible: true,
  items: this.menuItems,
  backButton: {
    text: "Back to Document",
    iconCss: "e-icons e-arrow-left",
    visible: true
  }
};

Backstage Width and Height

public backstageSettings: BackStageMenuModel = {
  text: "File",
  visible: true,
  width: "700px",
  height: "500px",
  items: this.menuItems,
  backButton: { text: "Close" }
};

If not set, dimensions adjust to content.

Backstage Target Element

public backstageSettings: BackStageMenuModel = {
  text: "File",
  visible: true,
  target: "#backstageContainer",  // Position relative to element
  items: this.menuItems,
  backButton: { text: "Close" }
};

Target element must have position: relative CSS property.

Backstage Template

Customize the entire backstage layout:

public backstageSettings: BackStageMenuModel = {
  text: "File",
  visible: true,
  template: `
    <div class="custom-backstage">
      <div class="backstage-sidebar">Custom Navigation</div>
      <div class="backstage-content">Custom Content</div>
    </div>
  `,
  items: []
};

Backstage Keytip and Tooltip

Add keyboard shortcuts and tooltips:

public backstageSettings: BackStageMenuModel = {
  text: "File",
  visible: true,
  keyTip: "F",  // Press Alt+F to open
  ribbonTooltipSettings: {
    title: "File Backstage",
    content: "Access file operations and application settings"
  },
  items: this.menuItems,
  backButton: { text: "Close" }
};

Complete Backstage Example

import { Component } from "@angular/core";
import { RibbonModule, RibbonBackstageService } from '@syncfusion/ej2-angular-ribbon';
import { BackStageMenuModel, BackstageItemModel, RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonBackstageService ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon" [backStageMenu]="backstageSettings">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="pasteButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [buttonSettings]="copyButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  
  public getBackstageContent(item: string): string {
    const contents: any = {
      "home": "<div style='padding: 20px;'><div style='margin-bottom: 20px;'><strong>Home</strong></div><div style='padding: 12px 0px;'><span>Recent Documents</span></div></div>",
      "new": "<div style='padding: 20px;'><div style='margin-bottom: 20px;'><strong>Create New</strong></div><div><button class='e-control e-btn'>Blank Document</button></div></div>",
      "open": "<div style='padding: 20px;'><div style='margin-bottom: 20px;'><strong>Open Document</strong></div><div><button class='e-control e-btn'>Browse Computer</button></div></div>",
      "save": "<div style='padding: 20px;'><div style='margin-bottom: 20px;'><strong>Save</strong></div><div><button class='e-control e-btn'>Save</button><button class='e-control e-btn'>Save As</button></div></div>",
      "print": "<div style='padding: 20px;'><div style='margin-bottom: 20px;'><strong>Print</strong></div><div><button class='e-control e-btn'>Print</button></div></div>",
      "options": "<div style='padding: 20px;'><div style='margin-bottom: 20px;'><strong>Options</strong></div><div><label><input type='checkbox' checked> AutoSave</label></div></div>"
    };
    return contents[item] || "";
  }
  
  public menuItems: BackstageItemModel[] = [
    { id: "home", text: "Home", iconCss: "e-icons e-home", content: this.getBackstageContent("home") },
    { id: "new", text: "New", iconCss: "e-icons e-file-new", content: this.getBackstageContent("new") },
    { id: "open", text: "Open", iconCss: "e-icons e-folder-open", content: this.getBackstageContent("open") },
    { id: "save", text: "Save", iconCss: "e-icons e-save", content: this.getBackstageContent("save") },
    { id: "print", text: "Print", iconCss: "e-icons e-print", content: this.getBackstageContent("print") },
    { separator: true, isFooter: true },
    { id: "options", text: "Options", isFooter: true, content: this.getBackstageContent("options") }
  ];
  
  public backstageSettings: BackStageMenuModel = {
    text: "File",
    visible: true,
    width: "600px",
    height: "500px",
    items: this.menuItems,
    backButton: {
      text: "Back",
      visible: true
    }
  };
}

---

Getting Started with Angular Ribbon Component

Table of Contents

• Installation and Setup
• Ivy vs ngcc Packages
• CSS Theme Setup
• Creating Your First Ribbon
• Adding Tabs and Groups
• Adding Basic Items
• Running the Application

Installation and Setup

Prerequisites

Ensure you have an Angular project set up. If not, create one using Angular CLI:

npm install -g @angular/cli
ng new my-app
cd my-app

Syncfusion Dependencies

The Ribbon component requires the following dependencies:

@syncfusion/ej2-angular-ribbon
├── @syncfusion/ej2-angular-base
├── @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
└── @syncfusion/ej2-ribbon

Ivy vs ngcc Packages

Syncfusion provides two package formats for Angular components:

Ivy Library Format (Recommended)

For Angular 12+, use the Ivy format (default):

npm install @syncfusion/ej2-angular-ribbon --save

This is the modern package format and is compatible with Angular's latest rendering engine.

CSS Theme Setup

Import the required CSS themes in your styles.css file:

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

Available themes:

• material3.css (default modern theme)
• material.css (Material Design)
• bootstrap5.css (Bootstrap 5)
• tailwind.css (Tailwind CSS)
• fluent.css (Microsoft Fluent Design)

Choose one theme based on your application requirements.

Creating Your First Ribbon

Step 1: Import RibbonModule

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home"></e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent { }

Step 2: Render Ribbon

The minimal ribbon renders with a single empty tab. To make it functional, add groups and items.

Adding Tabs and Groups

Adding Multiple Tabs

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home"></e-ribbon-tab>
        <e-ribbon-tab header="Insert"></e-ribbon-tab>
        <e-ribbon-tab header="View"></e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent { }

Adding Groups to Tabs

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard"></e-ribbon-group>
            <e-ribbon-group header="Font"></e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent { }

Group orientation:

• orientation="Row": Horizontal layout (default)
• orientation="Column": Vertical layout

Adding Basic Items

Adding Button Items

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" orientation="Row">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public cutButton: RibbonButtonSettingsModel = { 
    iconCss: "e-icons e-cut", 
    content: "Cut" 
  };
}

Adding Multiple Items

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonButtonSettingsModel, RibbonSplitButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" orientation="Row">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [buttonSettings]="copyButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteSettings: RibbonSplitButtonSettingsModel = { 
    iconCss: "e-icons e-paste", 
    items: [
      { text: "Keep Source Format" }, 
      { text: "Merge format" }, 
      { text: "Keep text only" }
    ], 
    content: "Paste" 
  };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
}

Running the Application

Start the development server:

ng serve

Open your browser and navigate to http://localhost:4200. You should see your Ribbon component with tabs, groups, and items.

Troubleshooting

Issue: Ribbon doesn't display

• Check that CSS imports are correct in styles.css
• Verify RibbonModule is imported in the component
• Ensure standalone: true or RibbonModule is in imports array

Issue: Icons not showing

• Verify Syncfusion icon CSS is imported
• Check that iconCss values match available icon classes (e.g., e-icons e-cut)

Issue: Styling issues

• Ensure correct theme CSS file is imported
• Clear browser cache and rebuild
• Check for CSS conflicts with other stylesheets

---

Item Types and Configuration

Table of Contents

• Overview of Built-in Items
• Button Items
• CheckBox Items
• DropDown Items
• SplitButton Items
• ComboBox Items
• ColorPicker Items
• GroupButton Items

Overview of Built-in Items

The Ribbon component supports seven built-in item types, each serving different purposes:

Common Item Properties

These properties apply to all ribbon item types:

Disabled Items

Disable items to prevent user interaction:

public disabledButton: RibbonButtonSettingsModel = {
  iconCss: "e-icons e-save",
  content: "Save",
  disabled: true  // Item is disabled
};

In template:

<e-ribbon-item type="Button" 
  [disabled]="true"
  [buttonSettings]="saveButton">
</e-ribbon-item>

Active Size

Control the current displayed size of an item:

import { RibbonItemSize } from '@syncfusion/ej2-angular-ribbon';

@Component({
  template: `
    <e-ribbon-item type="Button" 
      [activeSize]="currentSize"
      [allowedSizes]="allowedSizesList"
      [buttonSettings]="pasteButton">
    </e-ribbon-item>
  `
})
export class AppComponent {
  public currentSize = RibbonItemSize.Large;
  public allowedSizesList = RibbonItemSize.Large | RibbonItemSize.Medium | RibbonItemSize.Small;
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
}

Display Options

Control when items are displayed:

import { DisplayMode } from '@syncfusion/ej2-angular-ribbon';

@Component({
  template: `
    <e-ribbon-item type="Button" 
      [displayOptions]="displayMode"
      [buttonSettings]="printButton">
    </e-ribbon-item>
  `
})
export class AppComponent {
  // DisplayMode values: Auto | Classic | Simplified | Overflow
  public displayMode = DisplayMode.Auto;
  public printButton = { iconCss: "e-icons e-print", content: "Print" };
}

Item Template

Customize item rendering with templates:

@Component({
  template: `
    <e-ribbon-item type="Button" 
      [itemTemplate]="customTemplate"
      [buttonSettings]="customButton">
    </e-ribbon-item>
    
    <ng-template #customTemplate let-data>
      <div class="custom-item">
        <span class="custom-icon {{data.buttonSettings.iconCss}}"></span>
        <span class="custom-text">{{data.buttonSettings.content}}</span>
        <span class="badge">New</span>
      </div>
    </ng-template>
  `
})
export class AppComponent {
  public customButton = { iconCss: "e-icons e-paste", content: "Paste" };
}

Item-Level Tooltips

Configure tooltips for individual items:

import { RibbonTooltipModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  template: `
    <e-ribbon-item type="Button" 
      [ribbonTooltipSettings]="tooltipConfig"
      [buttonSettings]="pasteButton">
    </e-ribbon-item>
  `
})
export class AppComponent {
  public pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
  
  public tooltipConfig: RibbonTooltipModel = {
    id: "paste-tooltip",
    title: "Paste (Ctrl+V)",
    content: "Insert content from clipboard",
    iconCss: "e-icons e-paste",
    cssClass: "custom-tooltip"
  };
}

RibbonTooltipModel Properties:

• id - Unique identifier for tooltip
• title - Tooltip header
• content - Tooltip body text
• iconCss - Icon CSS class
• cssClass - Custom CSS class for styling

Button Items

Basic Button

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public cutButton: RibbonButtonSettingsModel = { 
    iconCss: "e-icons e-cut", 
    content: "Cut" 
  };
}

Button with Properties

Toggle Button

Toggle buttons maintain on/off state:

public toggleButton: RibbonButtonSettingsModel = { 
  iconCss: "e-icons e-bold", 
  content: "Bold",
  isToggle: true 
};

Click toggles between active (pressed) and inactive state.

Disabled Button

public disabledButton: RibbonButtonSettingsModel = { 
  iconCss: "e-icons e-paste", 
  content: "Paste",
  disabled: true 
};

Button with Tooltip

public buttonWithTooltip: RibbonButtonSettingsModel = { 
  iconCss: "e-icons e-save", 
  content: "Save",
  toolTip: "Save the document (Ctrl+S)" 
};

CheckBox Items

Basic CheckBox

import { RibbonCheckBoxSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="View">
          <e-ribbon-groups>
            <e-ribbon-group header="Show">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="CheckBox" [checkBoxSettings]="ruler"></e-ribbon-item>
                    <e-ribbon-item type="CheckBox" [checkBoxSettings]="gridlines"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public ruler: RibbonCheckBoxSettingsModel = { 
    label: "Ruler", 
    checked: false 
  };
  
  public gridlines: RibbonCheckBoxSettingsModel = { 
    label: "Gridlines", 
    checked: true 
  };
}

CheckBox Properties

DropDown Items

Basic DropDown

import { RibbonDropDownSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { ItemModel } from "@syncfusion/ej2-angular-splitbuttons";

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Insert">
          <e-ribbon-groups>
            <e-ribbon-group header="Tables">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="DropDown" [dropDownSettings]="tableSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public tableOptions: ItemModel[] = [
    { text: "Insert Table" },
    { text: "This device" },
    { text: "Convert Table" },
    { text: "Excel SpreadSheet" }
  ];
  
  public tableSettings: RibbonDropDownSettingsModel = {
    iconCss: "e-icons e-table",
    content: "Table",
    items: this.tableOptions
  };
}

DropDown Properties

SplitButton Items

Basic SplitButton

import { RibbonSplitButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { ItemModel } from "@syncfusion/ej2-angular-splitbuttons";

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public pasteSettings: RibbonSplitButtonSettingsModel = {
    iconCss: "e-icons e-paste",
    items: [
      { text: "Keep Source Format" },
      { text: "Merge format" },
      { text: "Keep text only" }
    ],
    content: "Paste"
  };
}

SplitButton Behavior

• Left click: Executes primary paste action
• Right click/dropdown: Shows paste options
• Useful for commands with variations

ComboBox Items

Basic ComboBox

import { RibbonComboBoxSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Font">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="ComboBox" [comboBoxSettings]="fontsizeSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public fontSizes: string[] = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26"];
  
  public fontsizeSettings: RibbonComboBoxSettingsModel = {
    dataSource: this.fontSizes,
    index: 4,  // "12" selected by default
    width: "65px",
    allowFiltering: true
  };
}

ComboBox Properties

Font Family ComboBox

public fontFamilies: string[] = [
  "Algerian", "Arial", "Calibri", "Cambria", "Courier New",
  "Georgia", "Impact", "Segoe UI", "Times New Roman", "Verdana"
];

public fontstyleSettings: RibbonComboBoxSettingsModel = {
  dataSource: this.fontFamilies,
  index: 3,  // "Cambria" selected by default
  width: "150px",
  allowFiltering: true
};

ColorPicker Items

Basic ColorPicker

import { RibbonColorPickerSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { RibbonColorPickerService } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonColorPickerService ],
  standalone: true,
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Font">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="ColorPicker" [allowedSizes]="smallSize" [colorPickerSettings]="colorSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public smallSize = RibbonItemSize.Small;
  
  public colorSettings: RibbonColorPickerSettingsModel = {
    value: "#123456"  // Default color
  };
}

ColorPicker Features

• Click to open color palette
• Select from predefined colors
• Custom color input
• Color preview
• Must include RibbonColorPickerService provider

GroupButton Items

Basic GroupButton

import { RibbonGroupButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="View">
          <e-ribbon-groups>
            <e-ribbon-group header="Views">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="GroupButton" [groupButtonSettings]="alignmentGroup"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public alignmentGroup: RibbonGroupButtonSettingsModel = {
    items: [
      { iconCss: "e-icons e-align-left", content: "Left" },
      { iconCss: "e-icons e-align-center", content: "Center" },
      { iconCss: "e-icons e-align-right", content: "Right" }
    ]
  };
}

GroupButton Behavior

• Only one button can be selected at a time
• Useful for mutually exclusive options
• Examples: alignment, text layout, view modes

---

Tabs, Groups, and Items Structure

Table of Contents

• Understanding the Hierarchy
• Adding and Configuring Tabs
• Adding and Configuring Groups
• Collections and Items
• Item Size Configuration
• Orientation Settings
• Complete Structured Example

Understanding the Hierarchy

The Ribbon uses a hierarchical structure to organize commands:

Ribbon (container)
└── Tabs (major feature categories)
    └── Groups (related commands within a tab)
        └── Collections (visual groupings)
            └── Items (individual commands)

Each level provides organization and visual structure:

• Tab: Groups related features (Home, Insert, View, etc.)
• Group: Organizes related commands (Clipboard, Font, Editor, etc.)
• Collection: Visual separation within a group
• Item: Individual command (Button, DropDown, CheckBox, etc.)

Adding and Configuring Tabs

Basic Tab Addition

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home"></e-ribbon-tab>
        <e-ribbon-tab header="Insert"></e-ribbon-tab>
        <e-ribbon-tab header="View"></e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent { }

Tab Properties

Tab with ID

<e-ribbon-tabs>
  <e-ribbon-tab id="home-tab" header="Home">
    <!-- groups here -->
  </e-ribbon-tab>
</e-ribbon-tabs>

Adding and Configuring Groups

Basic Group Addition

<e-ribbon-tabs>
  <e-ribbon-tab header="Home">
    <e-ribbon-groups>
      <e-ribbon-group header="Clipboard"></e-ribbon-group>
      <e-ribbon-group header="Font"></e-ribbon-group>
      <e-ribbon-group header="Editor"></e-ribbon-group>
    </e-ribbon-groups>
  </e-ribbon-tab>
</e-ribbon-tabs>

Group Properties

Group with Orientation

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <!-- Row orientation (horizontal, default) -->
            <e-ribbon-group header="Clipboard" orientation="Row">
            </e-ribbon-group>
            
            <!-- Column orientation (vertical) -->
            <e-ribbon-group header="Font" orientation="Column">
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent { }

Group with Launcher Icon

<e-ribbon-group header="Font" 
  groupIconCss="e-icons e-bold" 
  [showLauncherIcon]="true">
</e-ribbon-group>

The launcher icon provides access to advanced options for the group.

Note: The launcherIconCss property at the Ribbon level sets the default icon CSS for all group launcher icons. Individual groups can override this using groupIconCss.

@Component({
  template: `
    <ejs-ribbon id="ribbon" launcherIconCss="e-icons e-settings">
      <!-- All groups will use this icon unless overridden -->
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Font" [showLauncherIcon]="true">
              <!-- Uses default e-settings icon -->
            </e-ribbon-group>
            <e-ribbon-group header="Paragraph" 
              [showLauncherIcon]="true"
              groupIconCss="e-icons e-paragraph">
              <!-- Overrides with e-paragraph icon -->
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})

Non-Collapsible Groups

<e-ribbon-group header="Clipboard" [isCollapsible]="false">
</e-ribbon-group>

Groups are collapsible by default in Simplified layout.

Group Overflow Handling

<e-ribbon-group header="Font" 
  orientation="Row" 
  [enableGroupOverflow]="true">
</e-ribbon-group>

When enabled, items overflow into a dropdown menu when space is limited.

Collections and Items

Understanding Collections

Collections provide visual groupings within a group. They help organize related items visually.

<e-ribbon-group header="Clipboard" orientation="Row">
  <e-ribbon-collections>
    <!-- Collection 1: Paste operations -->
    <e-ribbon-collection>
      <e-ribbon-items>
        <e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings"></e-ribbon-item>
      </e-ribbon-items>
    </e-ribbon-collection>
    
    <!-- Collection 2: Cut/Copy operations -->
    <e-ribbon-collection>
      <e-ribbon-items>
        <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
        <e-ribbon-item type="Button" [buttonSettings]="copyButton"></e-ribbon-item>
      </e-ribbon-items>
    </e-ribbon-collection>
  </e-ribbon-collections>
</e-ribbon-group>

Collections are separated visually by vertical lines in the ribbon.

Adding Items to Collections

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonButtonSettingsModel, RibbonDropDownSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { ItemModel } from "@syncfusion/ej2-angular-splitbuttons";

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" orientation="Row">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="boldButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [buttonSettings]="italicButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [buttonSettings]="underlineButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `
})
export class AppComponent {
  public boldButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-bold", content: "Bold" };
  public italicButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-italic", content: "Italic" };
  public underlineButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-underline", content: "Underline" };
}

Item Size Configuration

Understanding Item Sizes

Items can display in three sizes:

• Large: Large icon with text label (default)
• Medium: Medium icon with text label
• Small: Small icon only

import { RibbonItemSize } from '@syncfusion/ej2-angular-ribbon';

public largeSize: RibbonItemSize = RibbonItemSize.Large;
public mediumSize: RibbonItemSize = RibbonItemSize.Medium;
public smallSize: RibbonItemSize = RibbonItemSize.Small;

Setting Item Sizes

<e-ribbon-item type="Button" 
  [allowedSizes]="largeSize" 
  [buttonSettings]="largeButton">
</e-ribbon-item>

<e-ribbon-item type="Button" 
  [allowedSizes]="smallSize" 
  [buttonSettings]="smallButton">
</e-ribbon-item>

Multiple Allowed Sizes

Items automatically adjust sizes based on available space:

import { RibbonItemSize } from '@syncfusion/ej2-angular-ribbon';

export class AppComponent {
  // Item can be Large, Medium, or Small depending on space
  public allowedSizes = [
    RibbonItemSize.Large,
    RibbonItemSize.Medium,
    RibbonItemSize.Small
  ];
}

Orientation Settings

Row Orientation (Horizontal)

<e-ribbon-group header="Clipboard" orientation="Row">
  <e-ribbon-collections>
    <e-ribbon-collection>
      <e-ribbon-items>
        <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
        <e-ribbon-item type="Button" [buttonSettings]="copyButton"></e-ribbon-item>
      </e-ribbon-items>
    </e-ribbon-collection>
  </e-ribbon-collections>
</e-ribbon-group>

Items flow horizontally left to right.

Column Orientation (Vertical)

<e-ribbon-group header="Font" orientation="Column">
  <e-ribbon-collections>
    <e-ribbon-collection>
      <e-ribbon-items>
        <e-ribbon-item type="Button" [buttonSettings]="boldButton"></e-ribbon-item>
        <e-ribbon-item type="Button" [buttonSettings]="italicButton"></e-ribbon-item>
      </e-ribbon-items>
    </e-ribbon-collection>
  </e-ribbon-collections>
</e-ribbon-group>

Items stack vertically top to bottom.

Complete Structured Example

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonButtonSettingsModel, RibbonSplitButtonSettingsModel, RibbonDropDownSettingsModel, RibbonItemSize } from '@syncfusion/ej2-angular-ribbon';
import { ItemModel } from "@syncfusion/ej2-angular-splitbuttons";

@Component({
  imports: [ RibbonModule ],
  standalone: true,
  selector: "app-root",
  template: `
    <ejs-ribbon id="ribbon">
      <e-ribbon-tabs>
        <!-- HOME TAB -->
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <!-- Clipboard Group (Row orientation) -->
            <e-ribbon-group header="Clipboard" orientation="Row">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="SplitButton" [allowedSizes]="largeSize" [splitButtonSettings]="pasteSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [buttonSettings]="cutButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [buttonSettings]="copyButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
            
            <!-- Font Group (Column orientation) -->
            <e-ribbon-group header="Font" orientation="Row">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" [allowedSizes]="smallSize" [buttonSettings]="boldButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [allowedSizes]="smallSize" [buttonSettings]="italicButton"></e-ribbon-item>
                    <e-ribbon-item type="Button" [allowedSizes]="smallSize" [buttonSettings]="underlineButton"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
        
        <!-- INSERT TAB -->
        <e-ribbon-tab header="Insert">
          <e-ribbon-groups>
            <e-ribbon-group header="Tables">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="DropDown" [allowedSizes]="largeSize" [dropDownSettings]="tableSettings"></e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
    </ejs-ribbon>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public largeSize: RibbonItemSize = RibbonItemSize.Large;
  public smallSize: RibbonItemSize = RibbonItemSize.Small;
  
  public pasteSettings: RibbonSplitButtonSettingsModel = { 
    iconCss: "e-icons e-paste", 
    items: [
      { text: "Keep Source Format" }, 
      { text: "Merge format" }, 
      { text: "Keep text only" }
    ], 
    content: "Paste" 
  };
  
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public boldButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-bold", content: "Bold" };
  public italicButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-italic", content: "Italic" };
  public underlineButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-underline", content: "Underline" };
  
  public tableOptions: ItemModel[] = [
    { text: "Insert Table" }, 
    { text: "This device" }, 
    { text: "Convert Table" }, 
    { text: "Excel SpreadSheet" }
  ];
  
  public tableSettings: RibbonDropDownSettingsModel = { 
    iconCss: "e-icons e-table", 
    content: "Table", 
    items: this.tableOptions 
  };
}

---