@progress/kendo-layout-react-wrapper/docs/menu/images.md

Kendo UI Layout wrapper for React

---
title: Images
page_title: Images - Menu - Kendo UI Wrappers for React
description: "Display images in the Kendo UI Menu wrapper for React."
slug: images_menu
position: 2
---

# 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.

```jsx-preview
 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.

```html
<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>
```
```jsx
 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')
    );
```

## Suggested Links

* [Kendo UI Menu for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/menu/overview)
* [API Reference of the Menu Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu)