RibbonBar - Items

  • Items
  • DropDown Items
  • Input Items
  • Gallery Items
Item ImageLargeItem ImageMediumItem Image
Buttons
Item ImageLargeItem ImageMediumItem Image
ToggleButtons
Item ImageItem ImageItem ImageItem Image
ButtonStrip
Item ImageLargeItem ImageMediumItem Image
ToggleList
Item ImageLarge 
  • Item ImageText
  • Item ImageText
  • Item ImageText
  • Item ImageText
Item ImageMedium 
  • Item ImageText
  • Item ImageText
  • Item ImageText
  • Item ImageText
Item Image 
  • Item ImageText
  • Item ImageText
  • Item ImageText
  • Item ImageText
SplitButtons
DropDown
ComboBox
NumericTextBox
Category 1
Category 2
Category 3
Gallery
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.
  • DefaultCS.aspx
<%@ Page Language="C#" AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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 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

Help Us Improve

Was this example helpful?