All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

Images

The Menu allows you to enhance its visual effect by adding images to its structure.

Icons

The following example demonstrates how to load images by using the Data Source and the imageUrl property.

class MenuContainer extends React.Component {
      constructor(props) {
        super(props);
        this.dataSource = props.data;
      }

      render() {
        return (
            <div className="example-wrapper">
                 <Menu dataSource={this.dataSource} >
                 </Menu>
            </div>
        );
      }
    }

    ReactDOM.render(
      <MenuContainer data={
          [
             {
                 text: "Baseball", imageUrl: "../icons/sports/baseball.png",
                 items: [
                     { text: "Top News", imageUrl: "../icons/16/star.png" },
                     { text: "Photo Galleries", imageUrl: "../icons/16/photo.png" },
                     { text: "Videos Records", imageUrl: "../icons/16/video.png" },
                     { text: "Radio Records", imageUrl: "../icons/16/speaker.png" }
                 ]
             },
             {
                 text: "Golf", imageUrl: "../icons/sports/golf.png",
                 items: [
                     { text: "Top News", imageUrl: "../icons/16/star.png" },
                     { text: "Photo Galleries", imageUrl: "../icons/16/photo.png" },
                     { text: "Videos Records", imageUrl: "../icons/16/video.png" },
                     { text: "Radio Records", imageUrl: "../icons/16/speaker.png" }
                 ]
             },
             {
                 text: "Swimming", imageUrl: "../icons/sports/swimming.png",
                 items: [
                     { text: "Top News", imageUrl: "../icons/16/star.png" },
                     { text: "Photo Galleries", imageUrl: "../icons/16/photo.png" }
                 ]
             }
         ]
        } />,
      document.querySelector('my-app')
    );

Sprites

The following example demonstrates how to load sprites by using the Data Source and the spriteCssClass property.

<style>
   [data-role="menu"] .k-sprite {
       background-image: url("../icons/flags.png");
   }
   .brazilFlag {
    background-position: 0 0;
   }
   .indiaFlag {
    background-position: 0 -32px;
   }
   .netherlandsFlag {
    background-position: 0 -64px;
   }
   .historyIcon {
    background-position: 0 -96px;
   }
   .geographyIcon {
    background-position: 0 -128px;
   }
</style>
class MenuContainer extends React.Component {
      constructor(props) {
        super(props);
        this.dataSource = props.data;
      }

      render() {
        return (
            <div className="example-wrapper">
                 <Menu dataSource={this.dataSource} >
                 </Menu>
            </div>
        );
      }
    }

    ReactDOM.render(
      <MenuContainer data={
         [{
             text: "Brazil", spriteCssClass: "brazilFlag", items: [
                 { text: "History", spriteCssClass: "historyIcon" },
                 { text: "Geography", spriteCssClass: "geographyIcon" },
             ]
         },
         {
             text: "India", spriteCssClass: "indiaFlag", items: [
                 { text: "History", spriteCssClass: "historyIcon" },
                 { text: "Geography", spriteCssClass: "geographyIcon" },
             ]
         },
         {
             text: "Netherlands", spriteCssClass: "netherlandsFlag", items: [
                 { text: "History", spriteCssClass: "historyIcon" },
                 { text: "Geography", spriteCssClass: "geographyIcon" },
             ]
         }]
        } />,
      document.querySelector('my-app')
    );
In this article