The mobile TabStrip widget is used inside a mobile view or layout footer element to display an application-wide group of navigation buttons. The looks of the mobile TabStrip vary depending on the user mobile device and operating system.

Getting Started

The Kendo mobile Application will automatically initialize the mobile TabStrip for every element with role data attribute set to tabstrip present in the views/layouts markup. Alternatively, it can be initialized using a jQuery selector. The tabstrip element should contain one or more a elements.

Kendo Mobile Application Integration

If a Kendo mobile Application is initialized, the tabs of the TabStrip will automatically navigate within the application's views. When the application navigates between views, it updates the TabStrip's currently selected tab, based on the current view's URL.

Initialize Kendo mobile TabStrip based on role data attribute.

<div data-role="tabstrip">
  <a href="#index">Home</a>
  <a href="#featured">Featured</a>
</div>

Initialize Kendo mobile TabStrip using a jQuery selector

var tabstrip = $("#tabstrip").kendoMobileTabStrip();

Tab icons

A tab icon can be set in two ways - either by adding an img element inside the a element, or by setting an icon data attribute to the a element. Kendo mobile TabStrip comes out of the box with several ready to use icons:

Additional icons may be added by defining the respective CSS tab class. If the icon data attribute is set to custom, the tab will receive km-custom CSS class.

Define custom tabstrip icon.

<style>
.km-custom {
  background-image: url("foo.jpg");
}
</style>

<div data-role="tabstrip">
  <a href="#index" data-icon="custom">Home</a>
</div>