TabStrip Header Template

The TabStrip HeaderTemplate allows you to define custom content in the tab header - such as components, icons or badges, instead of plain text.

If you only want to include text in TabStripTab's header use the Title attribute of the tab.

If both the Title parameter and the HeaderTemplate are used, only the HeaderTemplate will be rendered.

You can define the HeaderTemplate with the following configuration in the TabStripTab:

• <HeaderTemplate> tag holding the custom content that you want to display in the TabStripTab's title (e.g., components, an icon, icon + text, badge, etc.)

• <Content> tag holding the content of the tab.

  • If you do not use the HeaderTemplate, you can define the content of the tab directly between its opening and closing tag.

The following example showcases the use of a <HeaderTemplate>, including TelerikIcons

@*A couple of tabs with defferent header configuration.*@

<TelerikTabStrip>
    <TabStripTab>
        <HeaderTemplate>            
            <TelerikSvgIcon Icon="@SvgIcon.Envelope" />
            <strong>Icon and text</strong>
        </HeaderTemplate>
        <Content>            
            This is a tab with a header template including an icon and text.
        </Content>
    </TabStripTab>
    <TabStripTab Title="History">        
        <HeaderTemplate>
            <TelerikSvgIcon Icon="@SvgIcon.Clock" />
            <strong>Icon and text 2</strong>
        </HeaderTemplate>
        <Content>
            This is a tab that has a header template and as well as Title parameter.
            <br />
            Title parameter will not be displayed. Only the Header template will be displayed.
        </Content>
    </TabStripTab>
    <TabStripTab Title="Text only">
        This is a tab with Title parameter. If you want to use only text in the header, 
        set the Title parameter only and you can omit the Content tag.
    </TabStripTab>
</TelerikTabStrip>

If you only need to add some styling to the TabStripTab header, you can use the Class parameter of the TabStripTab to define your custom CSS class instead of the Header template.

Next Steps

• Use TabStrip Events

See Also

• Live Demo: TabStrip Header Template
• How to remove TabStrip tabs