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

Orientation

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

The following example demonstrates how to use the orientation property.

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

  .fieldlist li {
      list-style: none;
      padding-bottom: 1em;
  }
</style>
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')
    );
In this article