React Menu - Getting Started

jQuery

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Angular

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Vue

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

React

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

This tutorial shows how to add the Menu component to your application and configure the component's core features.

Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository.

View on GitHub

Create Base Menu Level

You can display Menu items from the items array or a data source. This tutorial uses the first technique. To see how to use the dataSource, refer to the following demo: Menu Overview Demo.

To create a base Menu level, define the component in the markup and populate it with items one by one. You can use predefined item properties to customize the items. For example, the code example below uses icon and text item properties. To further customize the appearance and content of items, use an itemTemplate to customize all items simultaneously or the item template property to customize individual items.

jQuery

index.js

index.html

$(function() {
    const menu = $("#menu").dxMenu({
        items: [
            {
                icon: 'home'
            },
            {   
                text: 'About'
            },
            {   
                text: 'Products'
            },
            {
                icon: 'cart'
            }
        ]
    }).dxMenu('instance');
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_23_2/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_23_2/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div id="container">
            <div id="menu"></div>
        </div>
    </body>
</html>

Angular

app.component.html

app.module.ts

<div id="container">
    <dx-menu>
        <dxi-item 
            icon="home"
        >
        </dxi-item>
        <dxi-item 
            text="About"
        >
        </dxi-item>
        <dxi-item 
            text="Products"
        >
        </dxi-item>
        <dxi-item 
            icon="cart"
        >
        </dxi-item>    
    </dx-menu>
</div>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxMenuModule } from "devextreme-angular";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxMenuModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <div id="container">
        <dxMenu>
            <dxItem 
                icon="home"
            >
            </dxItem>
            <dxItem 
                text="About" 
            >
            </dxItem>
            <dxItem 
                text="Products"
            >
            </dxItem>
            <dxItem
                icon="cart"
            >
            </dxItem>
        </dxMenu>
    </div>
</template>

<script>
    import DxMenu, { DxItem } from 'devextreme-vue/menu';

    export default {
        components: {
            DxMenu,
            DxItem
        },
        data() {
            return {

            };
        }
    }
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Menu, { Item } from 'devextreme-react/menu';

function App() {
    return (
        <div>
            <div id="container">
                <Menu>
                    <Item
                        icon="home"
                    >
                    </Item>
                    <Item
                        text="About"
                    >
                    </Item>
                    <Item
                        text="Products"
                    >
                    </Item>
                    <Item
                        icon="cart"
                    >
                    </Item>
                </Menu>
            </div>
        </div>
    );
}

export default App;

Create Submenus

jQuery

To create a submenu, use nested items. An array within the base item object corresponds to a submenu.

Use the beginGroup property to separate items in the submenu.

index.js

$(function() {
    const menu = $("#menu").dxMenu({
        items: [
            // ...
            {   
                text: 'Products',
                items: [
                    {
                        text: 'Product 1',
                    },
                    {
                        text: 'Category',
                        items: [
                            {
                                text: 'Product 2'
                            },
                            {
                                beginGroup: true,
                                text: 'Product 3'
                            },
                            {
                                text: 'Product 4'
                            }
                        ]
                    },
                    {   
                        disabled: true,
                        text: 'Product 5'
                    }
                ]
            },
            // ...
        ]
    }).dxMenu('instance');
});

Angular

To create a submenu, use nested items. A submenu is defined as another item in the base item's markup.

Use the beginGroup property to separate items in the submenu.

app.component.html

<div id="container">
    <dx-menu>
        <!-- ... -->
        <dxi-item 
            text="Products"
        >
            <dxi-item 
                text="Product 1"
            >
            </dxi-item> 
            <dxi-item 
                text="Category"
            >
                <dxi-item 
                    text="Product 2"
                >
                </dxi-item>
                <dxi-item 
                    [beginGroup]="true"
                    text="Product 3"
                >
                </dxi-item>
                <dxi-item 
                    text="Product 4"
                >
                </dxi-item>
            </dxi-item>
            <dxi-item 
                [disabled]="true"
                text="Product 5"
            >
            </dxi-item> 
        </dxi-item>
        <!-- ... -->
    </dx-menu>
</div>

Vue

To create a submenu, use nested items. A submenu is defined as another item in the base item's markup.

Use the beginGroup property to separate items in the submenu.

App.vue

<template>
    <div id="container">
        <dxMenu>
            <!-- ... -->
            <dxItem 
                text="Products"
            >
                <dxItem 
                    text="Product 1" 
                >
                </dxItem>
                <dxItem 
                    text="Category" 
                >
                    <dxItem 
                        text="Product 2" 
                    >
                    </dxItem>
                    <dxItem 
                        :begin-group="true"
                        text="Product 3" 
                    >
                    </dxItem>
                    <dxItem 
                        text="Product 3" 
                    >
                    </dxItem>
                </dxItem>
                <dxItem 
                    :disabled="true"
                    text="Product 5" 
                >
                </dxItem>
            </dxItem>
            <!-- ... -->
        </dxMenu>
    </div>
</template>

<script>
    // ...
</script>

React

To create a submenu, use nested items. A submenu is defined as another item in the base item's markup.

Use the beginGroup property to separate items in the submenu.

App.js

// ...

function App() {
    return (
        <div>
            <div id="container">
                <Menu>
                    <!-- ... -->
                    <Item
                        text="Products"
                    >
                        <Item
                            text="Product 1"
                        >
                        </Item>
                        <Item
                            text="Category"
                        >
                            <Item
                                text="Product 2"
                            >
                            </Item>
                            <Item
                                beginGroup={true}
                                text="Product 3"
                            >
                            </Item>
                            <Item
                                text="Product 4"
                            >
                            </Item>
                        </Item>
                        <Item
                            disabled={true}
                            text="Product 5"
                        >
                        </Item>
                    </Item>
                    <!-- ... -->
                </Menu>
            </div>
        </div>
    );
}

export default App;

Handle Clicks on Items

To access the clicked item, use the onItemClick event handler function. The following code displays the clicked item's name in the console:

jQuery

index.js

$(function() {
    const menu = $("#menu").dxMenu({
        // ...
        onItemClick: function(e) {
            if (e.itemData.text) {
                console.log(e.itemData.text + ' has been clicked!');
            }
            else if (e.itemData.icon) {
                console.log(e.itemData.icon.charAt(0).toUpperCase() + e.itemData.icon.slice(1) + ' has been clicked!');
            }
        }
    }).dxMenu('instance');
});

Angular

app.component.html

app.component.ts

<div id="container">
    <dx-menu
        (onItemClick)="onItemClick($event)"
    >
        <!-- ... -->    
    </dx-menu>
</div>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    onItemClick(e: any) {
        if (e.itemData.text) {
            console.log(e.itemData.text + ' has been clicked!');
        }
        else if (e.itemData.icon) {
            console.log(e.itemData.icon.charAt(0).toUpperCase() + e.itemData.icon.slice(1) + ' has been clicked!');
        }
    }
}

Vue

App.vue

<template>
    <div id="container">
        <dxMenu
            @item-click="onItemClick"
        >
            <!-- ... -->
        </dxMenu>
    </div>
</template>

<script>
    // ...

    export default {
        components: {
            DxMenu,
            DxItem
        },
        data() {
            return {

            };
        },
        methods: {    
            onItemClick(e) {
                if (e.itemData.text) {
                    console.log(e.itemData.text + ' has been clicked!');
                }
                else if (e.itemData.icon) {
                    console.log(e.itemData.icon.charAt(0).toUpperCase() + e.itemData.icon.slice(1) + ' has been clicked!');
                }
            }
        }
    }
</script>

React

App.js

// ...

const onItemClick = (e) => {
    if (e.itemData.text) {
        console.log(e.itemData.text + ' has been clicked!');
    }
    else if (e.itemData.icon) {
        console.log(e.itemData.icon.charAt(0).toUpperCase() + e.itemData.icon.slice(1) + ' has been clicked!');
    }
}

function App() {
    return (
        <div>
            <div id="container">
                <Menu
                    onItemClick={onItemClick}
                >
                    <!-- ... -->
                </Menu>
            </div>
        </div>
    );
}

export default App;

Enable Menu Adaptivity

In adaptive render mode, the Menu is shown as a list icon, and Menu items are arranged hierarchically like TreeView items. This functionality is in effect only if the container's width is less than the Menu width. Set the adaptivityEnabled property to true to enable adaptive rendering.

In the code below, the CheckBox toggles Menu render mode.

jQuery

index.js

index.html

index.css

$(function() {
    const menu = $("#menu").dxMenu({
        // ...
    }).dxMenu('instance');

    $("#checkbox").dxCheckBox({
        text: 'Enable adaptivity',
        onValueChanged: function(e) {
            menu.option('adaptivityEnabled', e.value)
        }
    });
});

<html>
    <head>
        <!-- ... -->
    </head>
    <body>
        <div id="container">
            <div id="menu"></div>
        </div>
        <div id="checkbox"></div>
    </body>
</html>

#container {
    width: 200px;
    height: 140px;
}

Angular

app.component.html

app.component.ts

app.module.ts

app.component.css

<div id="container">
    <dx-menu
        [adaptivityEnabled]="toggle"
    >
        <!-- ... -->
    </dx-menu>
</div>
<dx-check-box
    text="Enable adaptivity"
    (onValueChanged)="onValueChanged($event)"
>
</dx-check-box>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    // ...
    toggle: boolean = false;

    onValueChanged(e: any) {
        this.toggle = e.value;
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxMenuModule, DxCheckBoxModule } from "devextreme-angular";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxMenuModule,
        DxCheckBoxModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

#container {
    width: 200px;
    height: 140px;
}

Vue

App.vue

<template>
    <div id="container">
        <dxMenu
            :adaptivity-enabled="toggle"
        >
            <!-- ... -->
        </dxMenu>
    </div>
    <dxCheckBox
        text="Enable adaptivity"
        @value-changed="onValueChanged"
    >
    </dxCheckBox>
</template>

<script>
    import DxMenu, { DxItem } from 'devextreme-vue/menu';
    import DxCheckBox from 'devextreme-vue/check-box';

    export default {
        components: {
            DxMenu,
            DxItem,
            DxCheckBox
        },
        data() {
            return {
                toggle: false
            };
        },
        methods: {    
            // ...
            onValueChanged(e) {
                this.toggle = e.value;
            }
        }
    }
</script>

<style>
    #container {
        width: 200px;
        height: 140px;
    }
</style>

React

App.js

import React, { useState, useCallback } from 'react';

import 'devextreme/dist/css/dx.light.css';

import Menu, { Item } from 'devextreme-react/menu';
import CheckBox from 'devextreme-react/check-box';

function App() {
    const [toggle, setToggle] = useState(false);

    const onValueChanged = useCallback((e) => {
        setToggle(e.value);
    }, []);

    return (
        <div>
            <div id="container">
                <Menu
                    adaptivityEnabled={toggle}
                >
                    <!-- ... -->
                </Menu>
            </div>
            <CheckBox
                text="Enable adaptivity"
                onValueChanged={onValueChanged}
            >
            </CheckBox>
        </div>
    );
}

export default App;

Was this topic helpful?

Thank you!

Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!