@progress/kendo-layout-react-wrapper
Version:
Kendo UI Layout wrapper for React
231 lines (217 loc) • 9.88 kB
Markdown
---
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 & 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 & 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 & 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)