Click here to Skip to main content
15,398,211 members
Articles / Web Development / ASP.NET
Posted 22 Aug 2006


102 bookmarked

ASP.NET TabBar Server Control

Rate me:
Please Sign up or sign in to vote.
4.59/5 (17 votes)
22 Aug 20061 min read
A customizable ASP.NET 2.0 TabBar server control with designer support, written in VB.NET.

tabbar render example


A lot of my clients request tabbed navigation in their web applications. Most of the applications I work on are business type applications, and a favorite navigation scheme is to have a tab bar to represent high-level categories, with sub categories represented with a "sub" tab bar. So off I went to develop a control that would provide a visual representation of a tab bar that could be configured to be page aware or agnostic, integrates with the built-in ASP.NET roles API, has designer support, supports viewstate serialization, and could be easily manipulated programmatically.

Adding the tab bar to a page

First, add a reference to GeminiSoftworks.Web.Navigation.dll.

Next, add the following to your web.config file as a child of <system.web>.

        <add tagPrefix="TabBar" 
        <add tagPrefix="Tab" 

Last, add the control to a page. This can be done by adding the control to your studio toolbox and then dragging the control on to the page, or by adding it directly to the HTML like so:

<TabBar:TabBar ID="TabBar1" runat="server" Width="100%">
    <TabBar:Tab Link="~/default.aspx" Name="Home" PreserveFormOnTransfer="False" 
                Text="Home" ToolTip="Home" UseServerTransferMethod="False" 
                Visible="True" />
    <TabBar:Tab Link="" Name="Resources" PreserveFormOnTransfer="False" 
                Text="Resources" ToolTip="Resources" 
                UseServerTransferMethod="False" Visible="True" />
    <TabBar:Tab Link="" Name="Downloads" PreserveFormOnTransfer="False" 
                Text="Downloads" ToolTip="Downloads" 
                UseServerTransferMethod="False" Visible="True" />

Now, open the page in a browser and your page should render like the example image above.

Working with the tab bar in code

protected void TabBar1_TabClick(object sender, 
          System.ComponentModel.CancelEventArgs ce)
    //basic tabbar operations...

    //example: get the tab that was clicked
    GeminiSoftworks.Web.Navigation.Tab t = 

     * The following examples will modify the tabbar programmatically 
     * I will cancel the click event at the end of this function so that
     * the changes made will render
     * Typically, I will define constants for all the tab objects I need
     * and programmatically render the tabbar based on the circumstances.
     * The only case I declaritively set up tabs
     * is when they are basically static.
     * ** Remember **
     * If you are using the standard ASP.NET roles
     * configuration, secured tabs will be 
     * automatically suppressed for users that
     * don't have the appropriate authority to
     * use them. You can also create a derived
     * class and override the IsTabValidForRole
     * to implement custom security.
     * Roles = * (all users), ? (authenticated users),
     *            and any roles you define
     * ** Remember **
     * Tab authentication is based on the least secure role
     * (e.g. a tab with roles ("Admin","*") will render for all roles. 

    //example: create a new tab
    GeminiSoftworks.Web.Navigation.Tab nt = 
    new GeminiSoftworks.Web.Navigation.Tab("NewTab", 
             "New Tab", "~/newpage.aspx", "New Tab");

    //example: set some pages that the tab should render 'active' for...
    nt.ActivePagesList = new string[] { "~/newsubpage1.aspx", 
                                        "~/newsubpage2.aspx" };

    //example: assign a role to view the tab
    //note: not assigning any roles means all users can view the tab, so
    //this example is the same as not setting the AllowRoles property
    nt.AllowRoles = new string[] { "*" };

    //example: add the new tab to the tabbar

    //example: remove a tab by calling GetTab 
    //which accepts a tab name and returns a tab reference

    /* cancel the click event to see the changes we made above */

    //example: cancel the event
    ce.Cancel = true;

Things you can learn from the source

  • Designer support
  • Embedding web resources
  • Viewstate serialization
  • Using HTML rendering instead of composite control rendering
  • Supporting events

What still needs doing

At some point, I will add a few more things to the tab bar. Specifically, it needs ADA section 508 support, and the ability to use custom images instead of text for the tabs. One day, there will be a few hours free to do this, but instead of taking care of these enhancements at this time, I decided to submit this article in hopes others will find it useful. So please enjoy...


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
United States United States
No Biography provided

Comments and Discussions

AnswerRe: automatic casding of tab control Pin
corebytes11-Sep-06 7:28
Membercorebytes11-Sep-06 7:28 
QuestionMIssing Data Pin
fatfad_817-Sep-06 23:02
Memberfatfad_817-Sep-06 23:02 
AnswerRe: MIssing Data Pin
corebytes8-Sep-06 6:27
Membercorebytes8-Sep-06 6:27 
QuestionAre you planning to release the C# code of your project ? Pin
TanjuOzgur29-Aug-06 21:11
MemberTanjuOzgur29-Aug-06 21:11 
AnswerRe: Are you planning to release the C# code of your project ? Pin
corebytes30-Aug-06 1:55
Membercorebytes30-Aug-06 1:55 
QuestionProblems with tabcontrol Pin
georgeggc28-Aug-06 3:47
Membergeorgeggc28-Aug-06 3:47 
AnswerRe: Problems with tabcontrol Pin
corebytes28-Aug-06 6:30
Membercorebytes28-Aug-06 6:30 
GeneralGreat work Pin
miah alom23-Aug-06 7:20
Membermiah alom23-Aug-06 7:20 
Congrats on writing such a cool control.

Q: How do I integrate this with atlas. If possible can you please give any sample.
AnswerRe: Great work [modified] Pin
corebytes23-Aug-06 12:50
Membercorebytes23-Aug-06 12:50 
AnswerRe: Great work Pin
corebytes8-Sep-06 6:30
Membercorebytes8-Sep-06 6:30 
GeneralPut the tab bar in an update panel, and add a trigger for the TabClick event. Pin
pzlk23-Jul-07 23:14
Memberpzlk23-Jul-07 23:14 
QuestionProblems with ActiveTab Pin
AndreGr22-Aug-06 21:53
MemberAndreGr22-Aug-06 21:53 
AnswerRe: Problems with ActiveTab Pin
corebytes23-Aug-06 7:23
Membercorebytes23-Aug-06 7:23 
Generalgood tab control Pin
DaoNhan22-Aug-06 20:39
MemberDaoNhan22-Aug-06 20:39 
GeneralThx you Pin
dailywake22-Aug-06 9:38
Memberdailywake22-Aug-06 9:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.