Search results

Getting started with React Menu Bar component

05 Mar 2021 / 3 minutes to read

This section explains how to create a simple Menu, and configure its available functionalities in React.

Dependencies

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

Copied to clipboard
|-- @syncfusion/ej2-react-navigations
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-data
        |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-lists
        |-- @syncfusion/ej2-popups
            |-- @syncfusion/ej2-buttons

Setup your development environment

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

To install create-react-app run the following command.

Copied to clipboard
npm install -g create-react-app

Start a new project using create-react-app command as follows

Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
Copied to clipboard
create-react-app quickstart

cd quickstart

‘react-scripts-ts’ is used for creating React app with typescript.

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry.

To install Menu component, use the following command

Copied to clipboard
npm install @syncfusion/ej2-react-navigations --save

The above command installs Menu dependencies which are required to render the component in the React environment.

Adding Style sheet to the Application

Add Menu component’s styles as given below in App.css.

Copied to clipboard
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

Add Menu to the project

Now, you can add Menu component in the application For getting started, add Menu component in src/App.tsx file. Using the following code snippet.

Copied to clipboard
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

class App extends React.Component<{}, {}> {
    // Menu items definition
    public menuItems: MenuItemModel[] = [
        {
            items: [
                { text: 'Open' },
                { text: 'Save' },
                { text: 'Exit' }
            ],
            text: 'File'
        },
        {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ],
             text: 'Edit'
        },
        {
            items: [
                { text: 'Toolbar' },
                { text: 'Sidebar' }
            ],
            text: 'View'
        },
        {
            items: [
                { text: 'Spelling & Grammar' },
                { text: 'Customize' },
                { text: 'Options' }
            ],
            text: 'Tools'
        },
        { text: 'Go' },
        { text: 'Help' }
    ];

    public render() {
        return (
            <MenuComponent items={this.menuItems}/>
        );
    }
}
Copied to clipboard
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        // Menu items definition
        this.menuItems = [
            {
                items: [
                    { text: 'Open' },
                    { text: 'Save' },
                    { text: 'Exit' }
                ],
                text: 'File'
            },
            {
                items: [
                    { text: 'Cut' },
                    { text: 'Copy' },
                    { text: 'Paste' }
                ],
                text: 'Edit'
            },
            {
                items: [
                    { text: 'Toolbar' },
                    { text: 'Sidebar' }
                ],
                text: 'View'
            },
            {
                items: [
                    { text: 'Spelling & Grammar' },
                    { text: 'Customize' },
                    { text: 'Options' }
                ],
                text: 'Tools'
            },
            { text: 'Go' },
            { text: 'Help' }
        ];
    }
    render() {
        return (<MenuComponent items={this.menuItems}/>);
    }
}

Run the application

Run the application in the browser using the following command:

Copied to clipboard
npm start

The following example shows a basic Menu component.

Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

class App extends React.Component<{}, {}> {
    // Menu items definition
    public menuItems: MenuItemModel[] = [
        {
            items: [
                { text: 'Open' },
                { text: 'Save' },
                { text: 'Exit' }
            ],
            text: 'File'
        },
        {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ],
            text: 'Edit'
        },
        {
            items: [
                { text: 'Toolbar' },
                { text: 'Sidebar' }
            ],
            text: 'View'
        },
        {
            items: [
                { text: 'Spelling & Grammar' },
                { text: 'Customize' },
                { text: 'Options' }
            ],
            text: 'Tools'
        },
        { text: 'Go' },
        { text: 'Help' }
    ];

    public render() {
        return (
            <MenuComponent items={this.menuItems}/>
        );
    }
}

ReactDom.render(<App />,document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
class App extends React.Component {
    constructor() {
        super(...arguments);
        // Menu items definition
        this.menuItems = [
            {
                items: [
                    { text: 'Open' },
                    { text: 'Save' },
                    { text: 'Exit' }
                ],
                text: 'File'
            },
            {
                items: [
                    { text: 'Cut' },
                    { text: 'Copy' },
                    { text: 'Paste' }
                ],
                text: 'Edit'
            },
            {
                items: [
                    { text: 'Toolbar' },
                    { text: 'Sidebar' }
                ],
                text: 'View'
            },
            {
                items: [
                    { text: 'Spelling & Grammar' },
                    { text: 'Customize' },
                    { text: 'Options' }
                ],
                text: 'Tools'
            },
            { text: 'Go' },
            { text: 'Help' }
        ];
    }
    render() {
        return (<MenuComponent items={this.menuItems}/>);
    }
}
ReactDom.render(<App />, document.getElementById('element'));

This example demonstrates the basic rendering of Menu with items support. For more information about data source support, refer to the Data Source Binding section.

See Also