• What is KendoReact
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilitiesupdated
    • Conversational UI
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PDFViewernew
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Troubleshooting

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, set the scrollable prop to true.

The TabStrip enables you to configure the following options:

  • mouseScrollSpeed—Sets the tab list scroll speed in pixels when scrolling via the mouse wheel. The default value is 10px.
  • buttonScrollSpeed—Sets the tab list scroll speed in pixels when clicking the scroll buttons. The default value is 100px.
  • prevButton—Allows specifying a custom component for the previous scroll button.
  • nextButton—Allows specifying a custom component for the next scroll button.

The following example demonstrates a scrollable TabStrip in action.

Example
View Source
Change Theme:

In this article

Not finding the help you need?