---
title: Direction
page_title: Direction - Menu - Kendo UI Wrappers for React
description: "Change the direction of the Kendo UI Menu wrapper for React."
slug: direction_menu
position: 4
---

# Direction

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

The following example demonstrates how to use the [`direction`](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu#configuration-direction) property and apply its available options—`top`, `bottom`, `left`, and `right`.

{% meta height:420 %}
```html
<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>
```
```jsx-preview
 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')
    );
```
{% endmeta %}

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