Powered by jQuery, JavaScript and HTML5
Organize the content of your website or application efficiently with the help of the Progress Kendo UI TabStrip control. Enjoy user-friendly UI and full control over the tab appearance, behavior and orientation. Easily allow your end users to move, add and remove tabs. With a few JavaScript lines only, you’ll have a single content area, with multiple content tabs, with customizable tab names in the header.
Quickly build the tabbed navigation of your web site by adding tabs just once, directly in the master page. Leverage the NavigateUrl property of each tab to specify the page it should lead to. For in-page navigation between different pieces of content, associate each tab with a PageView to quickly determine what should be displayed when a tab is selected. Choose to declare the tabs in the markup, dynamically, or add them on demand with server or client-side code.
Modify the Kendo UI TabStrip control to fit the design of your site or app. Use the Kendo UI Mobile OS specific-look and feel, or choose the “flat” skin for a universal look across all devices and platforms. Customize any and all of the widgets in Kendo UI Mobile with the drag and drop Kendo UI Mobile Theme Builder.
Easily implement hierarchical tabs. You can create a hierarchy by defining the structure with the design-time wizard or declaratively in the markup, by binding the control to a hierarchical data source, or by building its structure using the server-side API.
Codelessly bind the Progress Kendo UI TabStrip control to any data source component, including EntityDataSource, LinqDataSource, SqlDataSource, HTMLDataSource, ObjectDataSource and SiteMapDataSource. Whether you want to bind it programmatically to a DataSet, DataView and DataTable or to populate with data directly from an html file, all of this is supported out-of-the-box. Binding to hierarchical data has never been easier, thanks to the DataBindings collection allowing you to bind tabs of different levels to different sets of data.
When you have many tabs and not enough space to show them all, you can use a single property to either display them on multiple rows or enable scrolling. Depending on your scenario, you can enable scrolling for all tab levels or for specific child levels. You can also control the position of the scroll buttons.
Easily position Progress Kendo UI TabStrip in the best manner for your scenario by choosing one of the out-of-the-box orientation options. Choose horizontal, top or bottom; vertical, right or left; and alignment, right, left, center or justified, based on platform-specific app design guidance. With just a few lines of code, you’ll be able to prevent violating UI guidance and ensure smooth approval process for your app.
Use a single property to allow your end users to reorder tabs as they see fit, thanks to the Kendo UI TabStrip drag and drop support.
By using TabStrip widget, you will inherit standard Kendo UI framework benefits such as MVVM, Customizing Templates, RTL support, Globalization and Keyboard Navigation.
Kendo UI TabStrip comes with built-in ‘toggle’ and ‘expand’ visual animations. By using only pure JavaScript, you will be able to create tabs users are accustomed to in modern web browsers. However, that base functionality is expanded by visual animations which can be further customized by setting tab opacity.
Download 30-day free trial
Launch demos
See pricing