New to Kendo UI for Angular? Start a free 30-day trial

Scrollable Tabs

The TabStrip allows you to scroll through its tabs when the tab list cannot fit in the component boundaries. It provides a rich API for customizing the scroll logic and the TabStrip appearance based on your preference.

Setup

To enable the scrolling of the tab list, configure the scrollable option. It accepts both boolean and ScrollableSettings parameters. The default value of the scrollable option is false.

If you use a ScrollableSettings parameter, the TabStrip enables you to configure the following options:

enabled—Determines if the scrolling is initially enabled. The default value is true.
scrollButtons—Determines the visibility behavior of the scroll buttons in the tab list. The default value is auto.
scrollButtonsPosition—Allows customizing the position of the scroll buttons. The default value is split.
mouseScroll—Specifies if the tab list scroll position can be changed by mouse scrolling. The default value is true.
buttonScrollSpeed—Sets the tab list scroll speed in pixels when clicking the scroll buttons. The default value is 100px.
prevButtonIcon—Allows specifying a custom icon for the previous scroll button.
nextButtonIcon—Allows specifying a custom icon for the next scroll button.

The following example demonstrates a scrollable TabStrip in action.

Change Theme

Theme

Loading ...

Scroll Buttons Visibility

You can configure the TabStrip to display scroll buttons in the tab list. To customize this behavior, use the scrollButtons option of the TabStrip ScrollableSettings. This option accepts the following values of type TabStripScrollButtonsVisibility:

auto(Default)—The scroll buttons will be automatically shown if the tabs do not fit inside the TabStrip boundaries, and hidden otherwise.
visible—The scroll buttons will be constantly visible. If the tabs fit inside the TabStrip boundaries, the buttons will be disabled.
hidden—The scroll buttons won't be displayed.

The following example demonstrates this option in action.

Change Theme

Theme

Loading ...

Scroll Buttons Position

By default, the TabStrip renders its scroll buttons on both ends of the tab list. To customize the position of the scroll buttons, use the scrollButtonsPosition property of the TabStrip ScrollableSettings. This option accepts the following values of type TabStripScrollButtonsPosition:

split(Default)—The scroll buttons will be rendered on both sides of the tab list.
start—The scroll buttons will be rendered before the tab list.
end—The scroll buttons will be rendered after the tab list.

The following example demonstrates the different positions of the scroll buttons.

Change Theme

Theme

Loading ...

Scroll Button Icons

The TabStrip allows you to change the default scroll button icons rendered in the tab list by using predefined and custom font icons or SVG icons.

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

Using SVG Icons

To display SVG icons for the TabStrip scroll buttons, set the prevSVGButtonIcon and nextSVGButtonIcon properties of the TabStripScrollableSettings to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

html

<kendo-tabstrip [scrollable]="settings"></kendo-tabstrip>

import {chevronLeftIcon, chevronRightIcon} from '@progress/kendo-svg-icons';

public settings:TabStripScrollableSettings = {
    prevSVGButtonIcon: chevronLeftIcon,
    nextSVGButtonIcon: chevronRightIcon,
};

The following example demonstrates how to display SVG scroll button icons.

Change Theme

Theme

Loading ...

Using Font Icons

To display Font icons inside the TabStrip scroll buttons:

Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
Set the prevButtonIcon and nextButtonIcon options of the TabStrip ScrollableSettings. Both options accept a CSS class or multiple classes separated by spaces—this allows you to render font icons provided by Kendo UI for Angular and third-party icons like FontAwesome.
html
```
<kendo-tabstrip [scrollable]="settings"></kendo-tabstrip>
```
ts
```
public settings: TabStripScrollableSettings = {
    prevButtonIcon: 'fa fa-arrow-circle-left', // FontAwesome icon
    nextButtonIcon: 'k-font-icon k-i-arrow-right' // Kendo UI font icon
};
```

The following example demonstrates how to replace the default scroll button icons with a Kendo UI font icon class and a FontAwesome icon.

Change Theme

Theme

Loading ...

Adjusting the Scroll Speed

The TabStrip allows you to fine tune the scroll speed of the tabs. To adjust this behavior, use the buttonScrollSpeed option of the TabStrip ScrollableSettings. This option sets the scroll speed in pixels when using the scroll buttons and has a default value of 100px.

The following example demonstrates how to set custom scroll speed.

Change Theme

Theme

Loading ...

Configuring the Mouse Scroll

By default the tabs can be scrolled with mouse wheel (or touchpad, trackpad etc.). In order to disable this behavior, set the mouseScroll option of the TabStrip ScrollableSettings to false.

The following example demonstrates how to conditionally enable or disable the mouse scrolling.

Change Theme

Theme

Loading ...