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

Tabs Configuration

To initialize tabs inside the TabStrip, nest them as TabStripTab components inside the <kendo-tabstrip> tag and use their corresponding properties.

The TabStrip provides the following configuration options for its tabs:

Selected Tab

When the TabStrip is initially loaded, it doesn't display any tabs as selected. To visualize a tab as selected, set its selected property to true.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabled Tabs

You can disable a specific TabStrip tab by setting the disabled property to true.

Example
View Source
Edit In Stackblitz  
Change Theme:

Tab Titles

Use one of the following approaches to provide the tab title:

  • Set the TabStripTab title option.
  • Use the kendoTabTitle template directive to render any custom content.

The kendoTabTitle directive overrides the TabStripTab title option.

The following example demonstrates both approaches for setting the tab title.

Example
View Source
Edit In Stackblitz  
Change Theme:

Tab Position

You can control the position of the tabs by setting the tabPosition property of the TabStrip to top, right, bottom, or left. The default position is top.

Example
View Source
Edit In Stackblitz  
Change Theme:

Tab Alignment

You can control the alignment of the tabs by setting the tabAlignment property of the TabStrip to start, end, center, or justify.

Example
View Source
Edit In Stackblitz  
Change Theme:

Closable Tabs

The TabStrip enables you to render a close button inside each tab. For further details and runnable demos, refer to the article about Closable tabs.

Scrollable Tabs

The TabStrip allows you to scroll through its tabs when the tab list cannot fit in the component boundaries. For further details and runnable demos, refer to the article about Scrollable tabs.