New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Text with Icons

Horizontal tabstrip with icons

  • Index
  • Outbox
  • Trash
  • Meetings

Vertical tabstrip with icons

  • Management
  • Scheduling
  • Meetings
  • Briefcase
  • Settings

RadTabStrip allows you to assign images to each tab to achieve a better look and feel.

Tha ImageUrl property of the tabs holds the path to the image to be shown. If you specify a value for the ImageUrl property of any tab, an image is rendered inside the tab, in front of the tab text.

  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <h2>Horizontal tabstrip with icons</h2>
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server"  SelectedIndex="3" Width="500">
            <Tabs>
                <telerik:RadTab ImageUrl="images/inbox.gif" Text="Index">
                </telerik:RadTab>
                <telerik:RadTab ImageUrl="images/outbox.gif" Text="Outbox">
                </telerik:RadTab>
                <telerik:RadTab ImageUrl="images/trash.gif" Text="Trash">
                </telerik:RadTab>
                <telerik:RadTab ImageUrl="images/meetings.gif" Text="Meetings">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>
    <div class="demo-container size-wide">
        <h2>Vertical tabstrip with icons</h2>
        <telerik:RadTabStrip RenderMode="Lightweight" ID="Radtabstrip2" runat="server"  SelectedIndex="3" Orientation="VerticalLeft">
            <Tabs>
                <telerik:RadTab ImageUrl="images/icon_05.gif" Text="Management">
                </telerik:RadTab>
                <telerik:RadTab ImageUrl="images/icon_02.gif" Text="Scheduling">
                </telerik:RadTab>
                <telerik:RadTab ImageUrl="images/icon_03.gif" Text="Meetings">
                </telerik:RadTab>
                <telerik:RadTab ImageUrl="images/icon_04.gif" Text="Briefcase">
                </telerik:RadTab>
                <telerik:RadTab ImageUrl="images/icon_01.gif" Text="Settings">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance