File Menu in Angular Ribbon component

27 Aug 202521 minutes to read

The Syncfusion Angular Ribbon component includes a built-in file menu that allows you to add menu items for performing specific actions like creating, opening, or saving documents. The file menu is highly configurable and can be enabled by defining the fileMenu property.

Visibility

The visibility of the file menu can be controlled by setting the visible property to true. By default, the file menu is hidden.

app.component.ts
main.ts
app.component.html
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel, RibbonModule, RibbonFileMenuService } from '@syncfusion/ej2-angular-ribbon';
@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonFileMenuService ],
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public fileSettings: FileMenuSettingsModel = {
      menuItems: [{ text: "New", iconCss: "e-icons e-file-new", id: "new" }],
      visible: true
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<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-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>

Menu items are added to the file menu through the menuItems property, which accepts an array of MenuItemModel.

app.component.ts
main.ts
app.component.html
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel, RibbonModule, RibbonFileMenuService } from '@syncfusion/ej2-angular-ribbon';
import { MenuItemModel } from "@syncfusion/ej2-navigations";
@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonFileMenuService ],
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public fileOptions: MenuItemModel[] = [{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
  { text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
  { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
  { text: "Save as", iconCss: "e-icons e-save", id: "save" }]
  public fileSettings: FileMenuSettingsModel = {
      menuItems: this.fileOptions,
      visible: true
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<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-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>

Open submenu on click

By default, a submenu expands when the user hovers over its parent item. This behavior can be changed to expand on a click by setting the showItemOnClick property to true.

app.component.ts
main.ts
app.component.html
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel, RibbonModule, RibbonFileMenuService } from '@syncfusion/ej2-angular-ribbon';
import { MenuItemModel } from "@syncfusion/ej2-navigations";
@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonFileMenuService ],
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public fileOptions: MenuItemModel[] =[
      { text: 'New', iconCss:'e-icons e-file-new', id: 'new' },
      { text: 'Open', iconCss:'e-icons e-folder-open', id: 'open' },
      { text: 'Rename', iconCss:'e-icons e-rename', id: 'rename' },
      {
          text: 'Save as',
          iconCss:'e-icons e-save',
          id: 'save',
          items: [
              { text: 'Microsoft Word (.docx)' },
              { text: 'Microsoft Word 97-2003(.doc)' },
              { text: 'Download as PDF' }
          ]
      }
  ];
  public fileSettings: FileMenuSettingsModel = {
      menuItems: this.fileOptions,
      showItemOnClick: true,
      visible: true
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<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-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>

Custom Header Text

The header text can be customized by defining new content in thetext property.

app.component.ts
main.ts
app.component.html
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel, RibbonModule, RibbonFileMenuService } from '@syncfusion/ej2-angular-ribbon';
@Component({
  imports: [ RibbonModule ],
  providers: [ RibbonFileMenuService ],
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public fileSettings: FileMenuSettingsModel = {
      text: 'App',
      menuItems: [{ text: "New", iconCss: "e-icons e-file-new", id: "new" }],
      visible: true
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<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-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>

File Menu in the Angular Ribbon

Visibility

Adding Menu Items

Open submenu on click

Custom Header Text