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

Direction

The Menu allows you to direct its content in different ways.

The following example demonstrates how to use the direction property and apply its available options—top, bottom, left, and right.

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

  .fieldlist li {
      list-style: none;
      padding-bottom: 1em;
  }
  my-app {
      height: 600px;
  }
</style>
class MenuContainer extends React.Component {
     constructor(props) {
        super(props);
        this.state = {
         selectedOption: 'default'
       };        
    }

    handleOptionChange = (e) => {
      var direction = /custom|customValue/.test(e.target.value) ? $("#customValue").val() : e.target.value;
      this.setState({
        selectedOption: e.target.value
      });

      $("[data-role='menu']").data("kendoMenu").setOptions({
          direction: direction
      });
    }

    render() {
        return (
            <div className="example-wrapper">
             <ul className="fieldlist">
                <li>
                     <input className="k-radio" type="radio" name="direction" id="default" value="default"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'default'}/>
                     <label className="k-radio-label" for="default">Default / Bottom</label>
                </li>
                <li>
                     <input className="k-radio" type="radio" name="direction" id="top" value="top"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'top'}/>
                     <label className="k-radio-label" for="top">Top</label>
                </li>
                <li>
                     <input className="k-radio" type="radio" name="direction" id="right" value="right"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'right'}/>
                     <label className="k-radio-label" for="right">Right</label>
                </li>
                <li>
                    <input className="k-radio" type="radio" name="direction" id="left" value="left"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'left'}/>
                    <label className="k-radio-label" for="left">Left</label>
                </li>

                <li>
                    <input className="k-radio" type="radio" name="direction" id="custom" value="custom"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'custom'}/>
                    <label className="k-radio-label" for="custom">Custom</label>
                    <input id="customValue" type="text" value="top left" className="k-textbox" />
                </li>
              </ul>
              <Menu>
                <MenuItem>
                    Men's
                    <SubMenu>
                        <MenuItem>Footwear
                            <SubMenu>
                                <MenuItem>Leisure Trainers</MenuItem>
                                <MenuItem>Running Shoes</MenuItem>
                                <MenuItem>Outdoor Footwear</MenuItem>
                                <MenuItem>Sandals/Flip Flops</MenuItem>
                                <MenuItem>Footwear Accessories</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Leisure Clothing
                            <SubMenu>
                                <MenuItem>T-Shirts</MenuItem>
                                <MenuItem>Hoodies &amp; Sweatshirts</MenuItem>
                                <MenuItem>Jackets</MenuItem>
                                <MenuItem>Pants</MenuItem>
                                <MenuItem>Shorts</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Sports Clothing
                            <SubMenu>
                                <MenuItem>Football</MenuItem>
                                <MenuItem>Basketball</MenuItem>
                                <MenuItem>Golf</MenuItem>
                                <MenuItem>Tennis</MenuItem>
                                <MenuItem>Swimwear</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Accessories
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
                <MenuItem>
                    Women's
                    <SubMenu>
                        <MenuItem>Footwear
                            <SubMenu>
                                <MenuItem>Leisure Trainers</MenuItem>
                                <MenuItem>Running Shoes</MenuItem>
                                <MenuItem>Outdoor Footwear</MenuItem>
                                <MenuItem>Sandals/Flip Flops</MenuItem>
                                <MenuItem>Footwear Accessories</MenuItem>

                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Leisure Clothing
                            <SubMenu>
                                <MenuItem>T-Shirts</MenuItem>
                                <MenuItem>Jackets</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Sports Clothing
                            <SubMenu>
                                <MenuItem>Basketball</MenuItem>
                                <MenuItem>Golf</MenuItem>
                                <MenuItem>Tennis</MenuItem>
                                <MenuItem>Swimwear</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Accessories
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
                <MenuItem>
                    Boy's
                    <SubMenu>
                        <MenuItem>Footwear
                            <SubMenu>
                                <MenuItem>Leisure Trainers</MenuItem>
                                <MenuItem>Running Shoes</MenuItem>
                                <MenuItem>Outdoor Footwear</MenuItem>
                                <MenuItem>Sandals/Flip Flops</MenuItem>
                                <MenuItem>Footwear Accessories</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Leisure Clothing
                            <SubMenu>
                                <MenuItem>T-Shirts</MenuItem>
                                <MenuItem>Hoodies &amp; Sweatshirts</MenuItem>
                                <MenuItem>Jackets</MenuItem>
                                <MenuItem>Pants</MenuItem>
                                <MenuItem>Shorts</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Sports Clothing
                            <SubMenu>
                                <MenuItem>Football</MenuItem>
                                <MenuItem>Basketball</MenuItem>
                                <MenuItem>Rugby</MenuItem>
                                <MenuItem>Tennis</MenuItem>
                                <MenuItem>Swimwear</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Accessories
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
                <MenuItem>
                    Girl's
                    <SubMenu>
                        <MenuItem>Footwear
                            <SubMenu>
                                <MenuItem>Leisure Trainers</MenuItem>
                                <MenuItem>Running Shoes</MenuItem>
                                <MenuItem>Fitness Trainers</MenuItem>
                                <MenuItem>Sandals/Flip Flops</MenuItem>
                                <MenuItem>Footwear Accessories</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Leisure Clothing
                            <SubMenu>
                                <MenuItem>T-Shirts</MenuItem>
                                <MenuItem>Hoodies &amp; Sweatshirts</MenuItem>
                                <MenuItem>Jackets</MenuItem>
                                <MenuItem>Pants</MenuItem>
                                <MenuItem>Shorts</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Sports Clothing
                            <SubMenu>
                                <MenuItem>Basketball</MenuItem>
                                <MenuItem>Tennis</MenuItem>
                                <MenuItem>Swimwear</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Accessories
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
            </Menu>
            </div>
        );
      }
    }

    ReactDOM.render(
      <MenuContainer/>,
      document.querySelector('my-app')
    );
In this article