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:

  • enabledDetermines if the scrolling is initially enabled. The default value is true.
  • scrollButtonsDetermines if scroll buttons will be displayed on both ends of the tab list.
  • mouseScrollSpecifies if the tab list scroll position can be changed by mouse scrolling. The default value is true.
  • buttonScrollSpeedSets the tab list scroll speed in pixels when clicking the scroll buttons. The default value is 100px.
  • mouseScrollSpeedSets the tab list scroll speed in pixels when scrolling via the mouse wheel. The default value is 10px.
  • prevButtonIconAllows specifying a custom icon for the previous scroll button.
  • nextButtonIconAllows specifying a custom icon for the next scroll button.

The following example demonstrates a scrollable TabStrip in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Scroll Buttons Visibility

The TabStrip allows you to configure if scroll buttons will be displayed on both ends of the tab list. To customize this behavior, use the scrollButtons option of the TabStrip ScrollableSettings. This option accepts values of type TabStripScrollButtonsVisibility, which are:

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

The following example demonstrates this option in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Scroll Button Icons

To display custom icons inside the tab list scroll buttons, utilize the prevButtonIcon and nextButtonIcon options of the TabStrip ScrollableSettings.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Scroll Speed

The TabStrip allows you to fine tune the scroll speed of the tabs. To adjust this behavior, utilize the following options of the TabStrip ScrollableSettings:

  • buttonScrollSpeedSets the scroll speed in pixels when clicking the scroll buttons. The default value is 100px.
  • mouseScrollSpeedSets the scroll speed in pixels when scrolling via the mouse wheel. The default value is 10px.

The following example demonstrates how to set custom scroll speed.

Example
View Source
Edit In Stackblitz  
Change Theme: