Configuring Item Properties

The Menu enables you to apply configuration options to its item properties.

Text

You can set the text of the Menu items by using the text property.

class App extends React.Component {
       render() {
           return (
               <Menu>
                   <MenuItem text="First item">
                       <MenuItem text="Child item"/>
                   </MenuItem>
                   <MenuItem text="Second item"/>
               </Menu>
           );
       }
   }
   ReactDOM.render(
       <App />,
       document.querySelector('my-app')
   );

URL

You can set the URL of the items by using the url property. The URL will be rendered as a href attribute on the item link.

class App extends React.Component {
       render() {
           return (
               <Menu>
                   <MenuItem text="Item1">
                       <MenuItem text="Item1.1" url="https://www.example.com/?item=1.1" />
                   </MenuItem>
                   <MenuItem text="Item2" url="https://www.example.com/?item=2" />
               </Menu>
           );
       }
   }
   ReactDOM.render(
       <App />,
       document.querySelector('my-app')
   );

Icon

You can specify the name of a font icon that will be rendered for the item by using the icon property.

const items = [{
       text: 'My Web Site', icon: 'folder', items: [{
           text: 'images', icon: 'folder', items: [
               { text: 'logo.png', icon: 'image' },
               { text: 'body-back.png', icon: 'image' },
               { text: 'my-photo.png', icon: 'image' }
           ]
       }, {
           text: 'resources', icon: 'folder', items: [
               {
                   text: 'pdf', icon: 'folder', items: [
                       { text: 'prices.pdf', icon: 'pdf' },
                       { text: 'brochure.pdf', icon: 'pdf' }
                   ]
               },
               { text: 'zip', icon: 'folder' }
           ]
       },
       { text: 'about.html', icon: 'file' },
       { text: 'contacts.html', icon: 'file' },
       { text: 'index.html', icon: 'file' },
       { text: 'portfolio.html', icon: 'file' }]
  }];
  class App extends React.Component {
       render() {
           return <Menu items={items} />;
       }
   }
   ReactDOM.render(
       <App />,
       document.querySelector('my-app')
   );

Styles and Classes

You can set styles and classes to the items by using the cssStyle and cssClass properties.

<style>
   .active {
       box-shadow: inset 0 0 3px 1px #ff6358;
   }
 </style>
class App extends React.Component {
       render() {
           return (
               <Menu>
                   <MenuItem text="Item1" cssClass="active" />
                   <MenuItem text="Item2" cssStyle={{ backgroundColor: '#d3d3d3' }} />
               </Menu>
           );
       }
   }
   ReactDOM.render(
       <App />,
       document.querySelector('my-app')
   );

Disabled Items

You can specify that a Menu item is disabled by using the disabled property.

const items = [
      { text: 'Item1', disabled: true, items: [{ text: 'Item1.1' }] },
      { text: 'Item2', disabled: true }
  ];
  class App extends React.Component {
       render() {
           return <Menu items={items} />;
       }
   }
   ReactDOM.render(
       <App />,
       document.querySelector('my-app')
   );

In this article