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

jQuery TabStrip Sortable tabs

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

sortable-tabs.html

Also available for:

API REFERENCE

Paris
New York
London
Moscow

17ºC

Rainy weather in Paris.

29ºC

Sunny weather in New York.

21ºC

Sunny weather in London.

16ºC

Cloudy weather in Moscow.

$(document).ready(function () { $("#tabstrip").kendoTabStrip({ sortable: true }); }); .sunny, .cloudy, .rainy { display: block; margin: 30px auto 10px; width: 128px; height: 128px; background: url('../content/web/tabstrip/weather.png') transparent no-repeat 0 0; } .cloudy { background-position: -128px 0; } .rainy { background-position: -256px 0; } .weather { margin: 0 auto 30px; text-align: center; } #tabstrip h2 { font-weight: lighter; font-size: 5em; line-height: 1; padding: 0 0 0 30px; margin: 0; } #tabstrip h2 span { background: none; padding-left: 5px; font-size: .3em; vertical-align: top; } #tabstrip p { margin: 0; padding: 0; }

Description

The Kendo UI for jQuery TabStrip supports a sortable funtionality. To activate it, set the sortable option to true.

This demo shows how to use the sortable feature of the TabStrip, which allows you to sort the tabs by dragging each tab to the desired position.

jQuery TabStrip Sortable tabs

Description

Support & Learning Resources

Additional Resources