Navigation menu using RadTabStrip

2 posts, 0 answers
  1. kdyeqb
    kdyeqb avatar
    21 posts
    Member since:
    Feb 2012

    Posted 31 May 2016 Link to this post


    I would like to get the child tabs below the parent tab and it should open only when the parent is clicked. Now , if any other parent tab is clicked , then earlier one should collapse and this parent tab should get open with its child tabs. I tried using ChildGroupCSSClass but it was not working. Moreover, also I would like to change the color, size of tab strip.

    Please let me know how can I place the child tab below the parent one and apply the CSS.....

  2. Ivan Danchev
    Ivan Danchev avatar
    1617 posts

    Posted 01 Jun 2016 Link to this post

    Hello Ankit,

    The default behavior of the TabStrip with tabs that contain child tabs is as you describe it: the child tabs are displayed below the parent tab and clicking on another parent shows its children. Here's an example:
    <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server">
            <telerik:RadTab Text="Examples">
                    <telerik:RadTab Text="Example1"></telerik:RadTab>
                    <telerik:RadTab Text="Example2"></telerik:RadTab>
                    <telerik:RadTab Text="Example2"></telerik:RadTab>
            <telerik:RadTab Text="Configurators">
                    <telerik:RadTab Text="Configurator1"></telerik:RadTab>
                    <telerik:RadTab Text="Configurator2"></telerik:RadTab>
                    <telerik:RadTab Text="Configurator3"></telerik:RadTab>
            <telerik:RadTab Text="Tests">
                    <telerik:RadTab Text="Test1"></telerik:RadTab>
                    <telerik:RadTab Text="Test2"></telerik:RadTab>
                    <telerik:RadTab Text="Test3"></telerik:RadTab>

    As for changing the size and the color of the tabs here are two CSS rules, which demonstrate how you can increase the size of the tabs as set their background-color:
        .rtsLI {
            width: 120px;
            height: 50px;
            background-color: lightblue;
        html .RadTabStrip .rtsLevel .rtsSelected .rtsLink {
            background-color: lightgreen;

    Ivan Danchev
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top