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

Kendo UI Layout wrapper for React

---
title: Orientation
page_title: Orientation - Menu - Kendo UI Wrappers for React
description: "Toggle the orientation of the Kendo UI Menu wrapper for React."
slug: orientation_menu
position: 3
---

# Orientation

You can toggle the orientation of the Menu and render it horizontally or vertically.

The following example demonstrates how to use the [`orientation`](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu#configuration-orientation) property.

```html
<style>
  [data-role="menu"]{
      width: 120px;
  }
  .fieldlist {
      margin: 0 0 -1em;
      padding-bottom: 2em;
  }

  .fieldlist li {
      list-style: none;
      padding-bottom: 1em;
  }
</style>
```
```jsx-preview
 class MenuContainer extends React.Component {
     constructor(props) {
        super(props);
        this.dataSource = props.data;
        this.state = {
         selectedOption: 'vertical'
       };        
    }

    handleOptionChange = (e) => {
      this.setState({
        selectedOption: e.target.value
      });
      $("[data-role='menu']").data("kendoMenu").setOptions({
          orientation: this.state.selectedOption
      })
    }

    render() {
        return (
            <div className="example-wrapper">
             <ul className="fieldlist">
                <li>
                     <input className="k-radio" type="radio" name="orientation" id="horizontal" value="horizontal"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'horizontal'}/>
                     <label className="k-radio-label" for="horizontal">Horizontal</label>
                </li>
                <li>
                    <input className="k-radio" type="radio" name="orientation" id="vertical" value="vertical"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'vertical'}/>
                    <label className="k-radio-label" for="vertical">Vertical</label>
                </li>
              </ul>
                 <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')
    );
```

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