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

    Items

    • Items
    • DropDown Items
    • Input Items
    • Gallery Items
    Item ImageLarge
    Item ImageMedium
    Item Image
    Buttons
    Item Image
    ToggleButtons
    Item ImageItem ImageItem ImageItem Image
    ButtonStrip
    Item Image
    ToggleList
    item 1
    DropDown
    ComboBox
    NumericTextBox
    ColorPicker
    Gallery
    Category 1
    Category 2
    Category 3
    Gallery
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText
    • Item ImageText

    RadRibbonBar introduces the following items:

    RibbonBarButton - Light-weight Button.
    RibbonBarSplitButton - A combination between menu and button.
    RibbonBarToggleButton - A button with toggle state.
    RibbonBarToggleList - List of ToggleButtons with at most 1 selected item at any time (similar to OptionButtonList).
    RibbonBarButtonStrip - A container for buttons with specific appearance.
    RibbonBarMenu -Light-weight menu designed specifically for the needs of RadRibbonBar.
    RibbonBarDropDown -Light-weight DropDown.
    RibbonBarComboBox - Light-weight ComboBox.
    RibbonBarNumericTextBox - Light-weight NumericTextBox.
    RibbonBarColorPicker - Light-weight ColorPicker.
    RibbonBarGallery - Light-weight Gallery.
    • DefaultVB.aspx
    <%@ Page Language="VB" AutoEventWireup="true"  %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
    <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 size-wide">
            <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" SelectedTabIndex="3">
                <telerik:RibbonBarTab Text="Items">
                    <telerik:RibbonBarGroup Text="Buttons">
                        <Items>
                            <telerik:RibbonBarButton Size="Large" Text="Large" ImageUrl="images/itemIcon.gif" />
                            <telerik:RibbonBarButton Size="Medium" Text="Medium" ImageUrl="images/itemIcon.gif" />
                            <telerik:RibbonBarButton Size="Small" Text="Small" ImageUrl="images/itemIcon.gif" />
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="ToggleButtons">
                        <Items>
                            <telerik:RibbonBarToggleButton Size="Large" Text="Large" ImageUrl="images/itemIcon.gif" />
                            <telerik:RibbonBarToggleButton Size="Medium" Text="Medium" ImageUrl="images/itemIcon.gif" />
                            <telerik:RibbonBarToggleButton Size="Small" Text="Small" ImageUrl="images/itemIcon.gif" />
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="ButtonStrip">
                        <Items>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton ImageUrl="images/itemIcon.gif" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="ToggleList">
                        <Items>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Large" Text="Large" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Medium" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Small" ImageUrl="images/itemIcon.gif" />
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
                <telerik:RibbonBarTab Text="DropDown Items">
                    <telerik:RibbonBarGroup Text="SplitButtons">
                        <Items>
                            <telerik:RibbonBarSplitButton Size="Large" Text="Large" ImageUrl="images/itemIcon.gif">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarSplitButton Size="Medium" Text="Medium" ImageUrl="images/itemIcon.gif">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarSplitButton Size="Small" Text="Small" ImageUrl="images/itemIcon.gif">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarButton Text="Text" ImageUrl="images/itemIcon.gif" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Menu">
                        <Items>
                            <telerik:RibbonBarMenu Size="Large" Text="Large" ImageUrl="images/itemIcon.gif">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                </Items>
                            </telerik:RibbonBarMenu>
                            <telerik:RibbonBarMenu Size="Medium" Text="Medium" ImageUrl="images/itemIcon.gif">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                </Items>
                            </telerik:RibbonBarMenu>
                            <telerik:RibbonBarMenu Size="Small" Text="Small" ImageUrl="images/itemIcon.gif">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                    <telerik:RibbonBarMenuItem Text="Text" ImageUrl="images/itemIcon.gif" />
                                </Items>
                            </telerik:RibbonBarMenu>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
                <telerik:RibbonBarTab Text="Input Items">
                    <telerik:RibbonBarGroup Text="DropDown">
                        <Items>
                            <telerik:RibbonBarDropDown Width="100">
                                <Items>
                                    <telerik:RibbonBarListItem Text="item 1" Selected="true" />
                                    <telerik:RibbonBarListItem Text="item 2" />
                                    <telerik:RibbonBarListItem Text="item 3" />
                                    <telerik:RibbonBarListItem Text="item 4" />
                                </Items>
                            </telerik:RibbonBarDropDown>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="ComboBox">
                        <Items>
                            <telerik:RibbonBarComboBox Width="100">
                                <Items>
                                    <telerik:RibbonBarListItem Text="item 1" Selected="true" />
                                    <telerik:RibbonBarListItem Text="item 2" />
                                    <telerik:RibbonBarListItem Text="item 3" />
                                    <telerik:RibbonBarListItem Text="item 4" />
                                </Items>
                            </telerik:RibbonBarComboBox>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="NumericTextBox">
                        <Items>
                            <telerik:RibbonBarNumericTextBox Value="20" Width="100" Suffix=" pt"/>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="ColorPicker">
                        <Items>
                            <telerik:RibbonBarColorPicker  Width="100"/>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
                <telerik:RibbonBarTab Text="Gallery Items">
                    <telerik:RibbonBarGroup Text="Gallery">
                        <Items>
                            <telerik:RibbonBarGallery>
                                <telerik:RibbonBarGalleryCategory Title="Category 1">
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                </telerik:RibbonBarGalleryCategory>
                                <telerik:RibbonBarGalleryCategory Title="Category 2">
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                </telerik:RibbonBarGalleryCategory>
                                <telerik:RibbonBarGalleryCategory Title="Category 3">
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/galleryItem.gif" />
                                </telerik:RibbonBarGalleryCategory>
                            </telerik:RibbonBarGallery>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </telerik:RadRibbonBar>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance