If enabled, the Menu displays buttons that scroll the items when they cannot fit the width or the popups' height of the Menu. By default, scrolling is disabled.

The following example demonstrates how to enable the scrolling functionality.

Example

<ul id="menu" style="width:150px;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    $("#menu").kendoMenu({
        scrollable: true
    });
</script>

Sets the scroll amount (in pixels) that the Menu scrolls when the scroll buttons are hovered. Each such distance is animated and then another animation starts with the same distance. If clicking a scroll button, the Menu scrolls by doubling the distance.

Example

<ul id="menu" style="width:150px;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    $("#menu").kendoMenu({
        scrollable: {
            distance: 20
        }
    });
</script>

Determines where the scroll buttons appear when menu content overflows. Here's an explanation of the available options:

• "split" (default): Places one scroll button at the beginning and another at the end of the scrollable container
• "start": Places both scroll buttons at the beginning of the scrollable container
• "end": Places both scroll buttons at the end of the scrollable container

Example

<ul id="menu" style="width:150px;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    $("#menu").kendoMenu({
        scrollable: {
            scrollButtonsPosition: "start"
        }
    });
</script>