File Menu in the Angular Ribbon

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

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
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<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>

Adding Menu Items

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

app.component.ts

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
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<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

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
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<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

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
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<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>