Having trouble getting help?
Contact Support
Contact Support
Customize HTML Attributes for Menu Items in React Menu component
18 Dec 202412 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 { 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);
function App() {
// Menu items definition
let menuItems = [
{
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'
}
}
];
return (<MenuComponent items={menuItems}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
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);
function App() {
// Menu items definition
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'
}
}
];
return (
<MenuComponent items={menuItems}/>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));