Keyboard Navigation

The keyboard navigation of the TabStrip is always available.

The TabStrip supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Left Arrow In a horizontal TabStrip, selects the previous tab. If no previous tab is available, selects the last tab.
Right Arrow In a horizontal TabStrip, selects the next tab. If no next tab is available, selects the first tab.
Up Arrow In a vertical TabStrip, selects the previous tab. If no previous tab is available, selects the last tab.
Down Arrow In a vertical TabStrip, 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: `
      <div style="margin: 10px">
        <div class="card">
            <div class="card-block k-form">
                <fieldset>
                <legend>Layout Settings</legend>
                <div class="k-form-field">
                    <span>TabPosition</span>
                    <input type="radio" name="mode" id="left" value="left" class="k-radio"
                        [(ngModel)]="position">
                    <label class="k-radio-label" for="left">Left</label>
                    <input type="radio" name="mode" id="right" value="right" class="k-radio"
                        [(ngModel)]="position">
                    <label class="k-radio-label" for="right">Right</label>
                    <input type="radio" name="mode" id="top" value="top" class="k-radio"
                        [(ngModel)]="position">
                    <label class="k-radio-label" for="top">Top</label>
                    <input type="radio" name="mode" id="bottom" value="bottom" class="k-radio"
                        [(ngModel)]="position">
                    <label class="k-radio-label" for="bottom">Bottom</label>
                </div>
                </fieldset>
            </div>
        </div>
      </div>

      <kendo-tabstrip [tabPosition]="position">
        <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 {
  public position: string = 'left';
}

In this article