All Components

Keyboard Navigation

By default, the keyboard navigation of the TabStrip is enabled.

The TabStrip supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow & Left Arrow Selects the previous tab. If no previous tab is available, selects the last tab.
Down Arrow & Right Arrow Selects the next tab. If no next tab is available, selects the first tab.
Home Selects the first tab.
End Selects the last tab.
@Component({
  selector: 'my-app',
  template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
          <ng-template kendoTabContent>
            <div class="weather">
              <h4>17<span>&ordm;C</span></h4>
              <p>Rainy weather in Paris.</p>
            </div>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'New York'">
          <ng-template kendoTabContent>
            <div class="weather">
              <h4>29<span>&ordm;C</span></h4>
              <p>Sunny weather in New York.</p>
            </div>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'London'">
          <ng-template kendoTabContent>
            <div class="weather">
              <h4>21<span>&ordm;C</span></h4>
              <p>Sunny weather in London.</p>
            </div>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Moscow'">
          <ng-template kendoTabContent>
            <div class="weather">
              <h4>16<span>&ordm;C</span></h4>
              <p>Cloudy weather in Moscow.</p>
            </div>
          </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        .weather {
            margin: 30px;
            text-align: center;
        }
    `]
})
class AppComponent {}
In this article