scrollable Boolean|Object (default: true)

If enabled, the TabStrip will display buttons that will scroll the tabs horizontally, when they cannot fit the TabStrip width. By default scrolling is enabled.

Unless disabled, scrollable must be set to a JavaScript object, which represents the scrolling configuration.

See Scrollable Tabs for more information.

Example - disable scrolling

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: false
    });
</script>

scrollable.distance Number (default: 200)

Sets the scroll amount (in pixels) applied when the user clicks on a scroll button.

Example

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: {
            distance: 30
        }
    });
</script>

scrollable.scrollButtonsPosition String (default: "split")

Sets the scroll buttons position.

Can be set to:

• start - the buttons are displayed before the tabs
• end - the buttons are displayed after the tabs
• split - the previous button is displayed before the tabs and the next button is displayed after the tabs

Example - scrollButtonsPosition set to start

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: {
            scrollButtonsPosition: "start"
        }
    });
</script>

Example - scrollButtonsPosition set to end

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: {
            scrollButtonsPosition: "end"
        }
    });
</script>

Example - scrollButtonsPosition set to split

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: {
            scrollButtonsPosition: "split"
        }
    });
</script>

scrollable.scrollButtons String (default: "auto")

Sets the scroll buttons visibility.

Can be set to:

• auto - the buttons are added only when tabstrip enters scrollable mode
• visible - the buttons are always visible
• hidden - the buttons are never visible

Example - scrollButtons set to auto

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: {
            scrollButtons: "auto"
        }
    });
</script>

Example - scrollButtons set to visible

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: {
            scrollButtons: "visible"
        }
    });
</script>

Example - scrollButtons set to hidden

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: {
            scrollButtons: "hidden"
        }
    });
</script>