All Components

Keyboard Navigation

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

The following table lists the keyboard shortcuts the TabStrip supports.

SHORTCUT DESCRIPTION
Upper Arrow & Left Arrow keys Selects the previous tab. If there is no previous tab, selects the last tab.
Down Arrow & Right Arrow keys Selects the next tab. If there is no next tab, 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