Scrollable Menu
The Menu provides options for scrolling its content.
As a result, the user can scroll the Menu items that do not fit within the popup height of the Menu.
<div id="vueapp" class="vue-app" style="height:450px;">
<h4>Horizontal</h4>
<div style="width: 300px">
<kendo-menu :scrollable="true">
<li>
Mens
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>
Ladies
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>
Kids
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>Sports</li>
<li>Brands</li>
<li>Accessories</li>
<li>Promotions</li>
</kendo-menu>
</div>
<h4 style="padding-top:2em; margin-top:30px">Vertical</h4>
<div style="width:100px;">
<kendo-menu id="verticalMenu"
ref="verticalMenu"
:scrollable="true"
:orientation="'vertical'">
<li>
Mens
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>
Ladies
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>
Kids
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>Sports</li>
<li>Brands</li>
<li>News</li>
<li>About us</li>
</kendo-menu>
</div>
</div>
<style>
#verticalMenu {
height: 100px;
}
</style>Vue.use(LayoutInstaller);
new Vue({
el: '#vueapp'
})