New to Kendo UI for jQuery? Start a free 30-day trial

Scrollable

configuration

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.

scrollable

Boolean|Object

Default: true

<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

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

Default: 200

<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.scrollButtons

String

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

Default: "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>

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

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

scrollable.scrollButtonsPosition

String

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

Default: "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: "start"
		}
	});
</script>

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

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