Having trouble getting help?
Contact Support
Contact Support
Rounded corner in React Menu component
30 Jan 20237 minutes to read
The rounded corner can be achieved by using the cssClass
property. Add a custom class to the menu component and customize it using the border-radius
CSS property. For more information, refer to the style.css
file mapped under the source tab.
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
// Menu items definition
let 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' }
];
return (<MenuComponent items={menuItems} cssClass='e-rounded-menu'/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
// Menu items definition
let 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' }
];
return (
<MenuComponent items={menuItems} cssClass='e-rounded-menu'/>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));