TabStrip Scrollable Tabs and Overflow Menu
The Telerik TabStrip for Blazor provides three built-in mechanisms to handle scenarios in which the tabs do not fit in the available space. This article describes how to set up tab scrolling and how to use a dropdown menu to display the overflowing tabs.
Basics
The TabStrip provides an OverflowMode parameter, which controls how the component handles scenarios with too many tabs that don't fit in a single row in the available space. The parameter expects a TabStripOverflowMode enum value:
None(default)—Tabs wrap to multiple rows.Scroll—All tabs remain on a single row or column, and scroll buttons appear.Menu—The TabStrip displays a dropdown menu after the last tab that fits in the available space. The dropdown lists all the other visible tabs.
The TabStrip
Scrollableparameter is deprecated and must be replaced byOverflowModein Telerik UI for Blazor 13.1.0 and later versions.
Tab Scrolling
The built-in tab scrolling is enabled when the TabStrip OverflowMode parameter is set to Scroll. The tab scrolling UX depends on two additional TabStrip parameters:
ScrollButtonsVisibility—Sets whether the scroll buttons display always, never or only when necessary (default).ScrollButtonsPosition—Sets whether the scroll buttons display before the tabs, after the tabs, or one on each side (default).
The Start and End values of ScrollButtonsPosition take into account if right-to-left mode is being used.
Using scrollable TabStrip tabs
Overflow Menu
The TabStrip tab overflow menu is a DropDownButton that renders when the TabStrip OverflowMode parameter is set to Menu. The menu collects tabs that do not fit and lets users activate them from the dropdown. If there are no overflowing tabs, the DropDownButton is disabled.
If the user activates a tab from the overflow menu, it moves to the list of visible tabs, and one tab from the visible list moves to the overflow menu.
The TabStrip exposes the built-in overflow menu as a separate TabStripOverflowMenu component that you can use inside the TabStripSuffixTemplate.
Using the TabStrip overflow menu
TabStripOverflowMenu Component
The TabStrip Overflow Menu renders in the default TabStripSuffixTemplate. To use a custom Suffix Template together with Menu OverflowMode, you must:
- Define a
TabStripOverflowMenucomponent in the<TabStripSuffixTemplate>child content. - Obtain the reference to the
TabStripOverflowMenucomponent instance with a@refatttribute. - Call the
Refresh()method of the Overflow Menu instance whenever the visible tabs or tab count change.
See the TabStriptOverflowMenu component API reference for all available parameters and methods.
Using TabStripOverflowMenu component in TabStripSuffixTemplate
Next Steps
- Persist tab content on active tab change
- Reorder and pin tabs
- Customize TabStrip UI with templates
- Change the number of tabs at runtime
- Manage TabStrip state
- Handle TabStrip events