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

Home
View
Objects
- Insert
Paste
Cut
Copy
Format
Clipboard
Calibri (body)
Font
Paragraph
Normal
No Spacing
Heading 1
Heading 2
Title
Subtitle
Subtle Emphasis
Emphasis
Intense Emphasis
Strong
Quote
Intense Quote
Subtle Reference
Intense Reference
Book Title
List Paragraph
Styles
Replace
Editing
Zoom
Illustrations
Picture
Clip Art
Shapes
SmartArt
Chart
Illustrations
Links
Hyperlink
Bookmark
Cross-reference
Links
Find...
Go to...
View Macros
Record Macro...
About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application
RadRibbonBar's contextual tabs allows you to group a number of tabs based on some context. Contextual tabs are contained in a contextual tab group and following Microsoft's Ribbon spec they are positioned always last, after the normal set of tabs.
Contextual tab groups are inactive by default. They can be enabled if their Active property is set to true.
There are two modes in which RadRibbonBar's contextual tabs operate:
Server-side

Only active contextual tab groups are rendered by default. Activating/deactivating contextual tab groups happens on the server only. This method is useful when the RibbonBar is in a UserControl used in more than one pages and each context depends on the current page.
Client-side

If the RenderInactiveContextualTabGroups property is set to true, the inactive groups will be rendered and send to the browser. In this case they will be initially invisible. They can be activated and active groups can be dactivated dynamically on the page with the client-side API.
<%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="RibbonBar.Examples.ContextualTabs.DefaultVB" %>
 
<%@ 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>
</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">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" SelectedTabIndex="2">
            <ContextualTabGroups>
                <telerik:RibbonBarContextualTabGroup Text="Objects" Active="true">
                    <telerik:RibbonBarTab Text="Insert">
                        <telerik:RibbonBarGroup Text="Illustrations">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Picture" ImageUrl="../../Images/Icons/insert/Picture.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="../../Images/Icons/insert/Clipart.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Shapes" ImageUrl="../../Images/Icons/insert/Shapes.png" />
                                <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="../../Images/Icons/insert/SmartArt.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="../../Images/Icons/insert/Chart.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Links">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="../../Images/Icons/insert/Link.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="../../Images/Icons/insert/Bookmark.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="../../Images/Icons/insert/Cross_reference.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                </telerik:RibbonBarContextualTabGroup>
            </ContextualTabGroups>
            <Tabs>
                <telerik:RibbonBarTab Text="Home">
                    <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                        <Items>
                            <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageUrl="../../Images/Icons/home/Paste.png">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="../../Images/Icons/home/Paste.png" />
                                    <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="../../Images/Icons/home/Paste.png" />
                                </Items>
                            </telerik:RibbonBarMenu>
                            <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="../../Images/Icons/home/Cut.png" />
                            <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="../../Images/Icons/home/Copy.png" />
                            <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="../../Images/Icons/home/Format_Painter.png" />
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Font">
                        <Items>
                            <telerik:RibbonBarControlGroup Orientation="Vertical">
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarDropDown Width="105">
                                        <Items>
                                            <telerik:RibbonBarListItem Text="Arial" />
                                            <telerik:RibbonBarListItem Text="Calibri (body)" Selected="true" />
                                            <telerik:RibbonBarListItem Text="Comic Sans" />
                                            <telerik:RibbonBarListItem Text="Tahoma" />
                                            <telerik:RibbonBarListItem Text="Verdana" />
                                        </Items>
                                    </telerik:RibbonBarDropDown>
                                    <telerik:RibbonBarComboBox Width="60">
                                        <Items>
                                            <telerik:RibbonBarListItem Text="8" />
                                            <telerik:RibbonBarListItem Text="9" />
                                            <telerik:RibbonBarListItem Text="10" Selected="true" />
                                            <telerik:RibbonBarListItem Text="11" />
                                            <telerik:RibbonBarListItem Text="12" />
                                            <telerik:RibbonBarListItem Text="14" />
                                            <telerik:RibbonBarListItem Text="16" />
                                            <telerik:RibbonBarListItem Text="18" />
                                            <telerik:RibbonBarListItem Text="20" />
                                            <telerik:RibbonBarListItem Text="22" />
                                            <telerik:RibbonBarListItem Text="24" />
                                            <telerik:RibbonBarListItem Text="26" />
                                            <telerik:RibbonBarListItem Text="28" />
                                        </Items>
                                    </telerik:RibbonBarComboBox>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Bold" ImageUrl="../../Images/Icons/home/font/Bold.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="../../Images/Icons/home/font/Italic.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="../../Images/Icons/home/font/Underline.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="../../Images/Icons/home/font/Strike.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleList>
                                        <ToggleButtons>
                                            <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="../../Images/Icons/home/font/Superscript.png">
                                            </telerik:RibbonBarToggleButton>
                                            <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="../../Images/Icons/home/font/Subscript.png">
                                            </telerik:RibbonBarToggleButton>
                                        </ToggleButtons>
                                    </telerik:RibbonBarToggleList>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarMenu Size="Small" Text="Change Case" ImageUrl="../../Images/Icons/home/font/Change_Case.png">
                                        <Items>
                                            <telerik:RibbonBarMenuItem Text="Sentence case.">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="lowercase">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="UPPERCASE">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="Capitalize Each Word">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="tOGGLE cASE">
                                            </telerik:RibbonBarMenuItem>
                                        </Items>
                                    </telerik:RibbonBarMenu>
                                    <telerik:RibbonBarButton Size="Small" Text="Grow Font" ImageUrl="../../Images/Icons/home/font/Grow_Font.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Size="Small" Text="Shring Font" ImageUrl="../../Images/Icons/home/font/Shrink_Font.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Size="Small" Text="Clear Formatting" ImageUrl="../../Images/Icons/home/font/Clear_Formatting.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarColorPicker ImageUrl="../../Images/Icons/home/font/Font_Color.png">
                                    </telerik:RibbonBarColorPicker>
                                </telerik:RibbonBarControlGroup>
                            </telerik:RibbonBarControlGroup>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Paragraph">
                        <Items>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Align Left" ImageUrl="../../Images/Icons/home/paragraph/AlignLeft.png" />
                                    <telerik:RibbonBarButton Text="Align Center" ImageUrl="../../Images/Icons/home/paragraph/AlignCenter.png" />
                                    <telerik:RibbonBarButton Text="Align Right" ImageUrl="../../Images/Icons/home/paragraph/AlignRight.png" />
                                    <telerik:RibbonBarButton Text="Justify" ImageUrl="../../Images/Icons/home/paragraph/Justify.png" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageUrl="../../Images/Icons/home/paragraph/UL.png" />
                                    <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageUrl="../../Images/Icons/home/paragraph/OL.png" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageUrl="../../Images/Icons/home/paragraph/DecrIndent.png" />
                                    <telerik:RibbonBarButton Size="Small" Text="Increase Indent" ImageUrl="../../Images/Icons/home/paragraph/IncrIndent.png" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Styles" EnableLauncher="true">
                        <Items>
                            <telerik:RibbonBarGallery ItemHeight="50px" ItemWidth="60px" Columns="3" ExpandedColumns="4">
                                <telerik:RibbonBarGalleryCategory>
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Normal.png" Text="Normal" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/NoSpacing.png" Text="No Spacing" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Heading1.png" Text="Heading 1" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Heading2.png" Text="Heading 2" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Title.png" Text="Title" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Subtitle.png" Text="Subtitle" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/SubEmphasis.png" Text="Subtle Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Emphasis.png" Text="Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/IntEmphasis.png" Text="Intense Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Strong.png" Text="Strong" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Quote.png" Text="Quote" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/IntQuote.png" Text="Intense Quote" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/SubReference.png" Text="Subtle Reference" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/IntReference.png" Text="Intense Reference" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/BookTitle.png" Text="Book Title" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/ListParagraph.png" Text="List Paragraph" />
                                </telerik:RibbonBarGalleryCategory>
                            </telerik:RibbonBarGallery>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Editing" EnableLauncher="true">
                        <Items>
                            <telerik:RibbonBarSplitButton Size="Medium" Text="Find" ImageUrl="../../Images/Icons/home/Find.png">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Find..." ImageUrl="../../Images/Icons/home/Find.png" />
                                    <telerik:RibbonBarButton Text="Go to..." ImageUrl="../../Images/Icons/home/Go.png" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarButton Size="Medium" Text="Replace" ImageUrl="../../Images/Icons/home/Replace.png" />
                            <telerik:RibbonBarMenu Size="Medium" Text="Select" ImageUrl="../../Images/Icons/home/Select.png">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="../../Images/Icons/home/Select_All.png" />
                                    <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="../../Images/Icons/home/Select.png" />
                                </Items>
                            </telerik:RibbonBarMenu>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
                <telerik:RibbonBarTab Text="View">
                    <telerik:RibbonBarGroup Text="Zoom">
                        <Items>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Large" Text="Zoom" ImageUrl="../../Images/Icons/view/Zoom.png" />
                                    <telerik:RibbonBarToggleButton Size="Large" Text="100%" ImageUrl="../../Images/Icons/view/100.png" />
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" ImageUrl="../../Images/Icons/view/One_Page.png" />
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" ImageUrl="../../Images/Icons/view/Two_Pages.png" />
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" ImageUrl="../../Images/Icons/view/Page_Width.png" />
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Macros">
                        <Items>
                            <telerik:RibbonBarSplitButton Size="Large" Text="Macros" ImageUrl="../../Images/Icons/view/Macros.png">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="View Macros" ImageUrl="../../Images/Icons/view/Macros.png" />
                                    <telerik:RibbonBarButton Text="Record Macro..." ImageUrl="../../Images/Icons/view/Macros_Record.png" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </Tabs>
        </telerik:RadRibbonBar>
    </div>
    </form>
</body>
</html>
Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support