File Menu

27 Apr 202421 minutes to read

The Ribbon component provides a built-in file menu that allows you to add menu items for performing specific actions. The file menu can be enabled by setting the fileMenu property.

Visibility

You can show the file menu 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 } 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

The menu items can be added to the file menu using the menuItems property as 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 } 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

You can open the submenu on menu item click, by setting the showItemOnClick property to true. By default, the submenu will open on mouse hover.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel } 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

You can define the file menu header text content by using the text property.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel } 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>