Customize HTML Attributes for Menu Items in EJ2 TypeScript Menu control

18 Dec 20246 minutes to read

To customize the HTML attributes of the Menu, use the htmlAttributes property to add custom HTML attributes to the root element of the menu. This feature is particularly useful for enhancing accessibility, adding custom data attributes, or including additional properties that can be utilized for styling or functionality.

import { Menu, MenuItemModel } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

let menuItems: MenuItemModel[] = [
    {
        text: 'Home',
        htmlAttributes: {
            role: 'menuitem',
            'aria-label': 'Home',
            tabindex: '1'
        }
    },
    {
        text: 'Book Categories',
        items: [
            {
                text: 'Cookbooks',
                htmlAttributes: {
                    role: 'menuitem',
                    'aria-label': 'Cookbooks',
                    tabindex: '1'
                }
            },
            {
                text: 'Children',
                htmlAttributes: {
                    role: 'menuitem',
                    'aria-label': 'Children',
                    tabindex: '1'
                }
            }
        ],
        htmlAttributes: {
            role: 'menuitem',
            'aria-label': 'Book Categories',
            tabindex: '1'
        }
    },
    {
        text: 'Purchase',
        htmlAttributes: {
            role: 'menuitem',
            'aria-label': 'Purchase',
            tabindex: '1'
        }
    },
    {
        text: 'Contact Us',
        htmlAttributes: {
            role: 'menuitem',
            'aria-label': 'Contact Us',
            tabindex: '1'
        }
    },
    {
        separator: true
    },
    {
        text: 'Login',
        id: 'login',
        htmlAttributes: {
            role: 'menuitem',
            'aria-label': 'Login',
            tabindex: '1'
        }
    }
];

let menuObj: Menu = new Menu({ items: menuItems }, '#menu');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <ul id="menu"></ul>
        </div>
    </div>
</body>

</html>