New to Telerik UI for Blazor? Download Free 30-day trial

TabStrip - Tab Overflow

Configurator

Use the slider below to resize the TabStrip and observe the behavior of tabs as they move into the overflow menu.

Overview

A high-level summary of workspace activity and system health.

  • Tab-overflow.razor
Loading the demo source code...please wait.
Style in ThemeBuilder
  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Description

The Telerik UI for Blazor TabStrip handles large numbers of tabs with a built-in overflow menu. When the available width cannot accommodate all tabs, extra tabs are automatically collapsed into a More overflow button on the right side of the tab strip.

Enable the overflow menu by setting OverflowMode="TabStripOverflowMode.Menu" on the TelerikTabStrip. The component detects available width in real time, so overflow recalculates automatically as the container is resized — no extra configuration required.

Clicking the overflow button opens a dropdown listing all hidden tabs. Selecting an item from the list activates that tab in the strip.

This Blazor TabStrip Tab Overflow example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.