TabStrip - Text with Icons

Horizontal tabstrip with icons

  • Index
  • Outbox
  • Trash
  • Meetings

Vertical tabstrip with icons

  • Management
  • Scheduling
  • Meetings
  • Briefcase
  • Settings
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <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">
                <telerik:RadTab ImageUrl="images/inbox.gif" Text="Index">
                <telerik:RadTab ImageUrl="images/outbox.gif" Text="Outbox">
                <telerik:RadTab ImageUrl="images/trash.gif" Text="Trash">
                <telerik:RadTab ImageUrl="images/meetings.gif" Text="Meetings">
    <div class="demo-container size-wide">
        <h2>Vertical tabstrip with icons</h2>
        <telerik:RadTabStrip RenderMode="Lightweight" ID="Radtabstrip2" runat="server"  SelectedIndex="3" Orientation="VerticalLeft">
                <telerik:RadTab ImageUrl="images/icon_05.gif" Text="Management">
                <telerik:RadTab ImageUrl="images/icon_02.gif" Text="Scheduling">
                <telerik:RadTab ImageUrl="images/icon_03.gif" Text="Meetings">
                <telerik:RadTab ImageUrl="images/icon_04.gif" Text="Briefcase">
                <telerik:RadTab ImageUrl="images/icon_01.gif" Text="Settings">

Find Assistance

Help Us Improve

Was this example helpful?