RibbonBar

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadRibbonBar - Telerik's ASP.NET RibbonBar

Paragraph
Item ImageItem ImageItem ImageItem Image
Item ImageItem Image
Item ImageItem Image
Styles
  • imageNormal
  • imageNo Spacing
  • imageHeading 1
  • imageHeading 2
  • imageTitle
  • imageSubtitle
  • imageSubtle Emphasis
  • imageEmphasis
  • imageIntense Emphasis
  • imageStrong
  • imageQuote
  • imageIntense Quote
  • imageSubtle Reference
  • imageIntense Reference
  • imageBook Title
  • imageList Paragraph

tlrk.it/161g8F4 To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/161g8F4

About RadRibbonBar for ASP.NET AJAX

RadRibbonBar, one of the newest additions to the suite of Telerik UI for ASP.NET AJAX, brings the ability to create rich toolboxes, which typically cannot be seen in web applications. We are trying to follow the development guidelines of Microsoft Ribbon specification and to give it the look and feel you can find in many modern applications today such as those found in Microsoft Office.

RadRibbonBar and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular RibbonBar demo, you can use the following path to find it in the sample website application:
ribbonbar/examples/overview

Key Features

  • Unique Navigation.
  • Templates.
  • Keyboard Support.
  • Quick Access Toolbar.

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="Info.ascx" TagPrefix="qsf" TagName="Info" %>

<!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>
    <title>ASP.NET Ribbon control demo | Telerik RibbonBar Examples</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

     <div class="qsf-demo-canvas">
          <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" Width="854px" Style="max-width: 854px;"
               Skin="Office2007" EnableMinimizing="true">
               <telerik:RibbonBarTab Text="Home">
                    <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                         <Items>
                              <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageUrl="icons/home/Paste.png">
                                   <Items>
                                        <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="icons/home/Paste.png">
                                        </telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="icons/home/Paste.png">
                                        </telerik:RibbonBarMenuItem>
                                   </Items>
                              </telerik:RibbonBarMenu>
                              <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="icons/home/Cut.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="icons/home/Copy.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="icons/home/Format_Painter.png">
                              </telerik:RibbonBarButton>
                         </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Font">
                         <Items>
                        <telerik:RibbonBarControlGroup Orientation="Vertical">
                            <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                <telerik:RibbonBarDropDown Width="97">
                                    <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="40">
                                    <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="icons/home/font/Bold.png">
                                      </telerik:RibbonBarToggleButton>
                                      <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="icons/home/font/Italic.png">
                                      </telerik:RibbonBarToggleButton>
                                      <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="icons/home/font/Underline.png">
                                      </telerik:RibbonBarToggleButton>
                                      <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="icons/home/font/Strike.png">
                                      </telerik:RibbonBarToggleButton>
                                      <telerik:RibbonBarToggleList>
                                           <ToggleButtons>
                                                <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="icons/home/font/Superscript.png">
                                                </telerik:RibbonBarToggleButton>
                                                <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="icons/home/font/Subscript.png">
                                                </telerik:RibbonBarToggleButton>
                                           </ToggleButtons>
                                      </telerik:RibbonBarToggleList>
                            </telerik:RibbonBarControlGroup>
                            <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                      <telerik:RibbonBarMenu Size="Small" Text="Change Case" ImageUrl="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="icons/home/font/Grow_Font.png">
                                      </telerik:RibbonBarButton>
                                      <telerik:RibbonBarButton Size="Small" Text="Shring Font" ImageUrl="icons/home/font/Shrink_Font.png">
                                      </telerik:RibbonBarButton>
                                      <telerik:RibbonBarButton Size="Small" Text="Clear Formatting" ImageUrl="icons/home/font/Clear_Formatting.png">
                                      </telerik:RibbonBarButton>
                                <telerik:RibbonBarColorPicker ImageUrl="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="icons/home/paragraph/AlignLeft.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Align Center" ImageUrl="icons/home/paragraph/AlignCenter.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Align Right" ImageUrl="icons/home/paragraph/AlignRight.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Justify" ImageUrl="icons/home/paragraph/Justify.png">
                                        </telerik:RibbonBarButton>
                                   </Buttons>
                              </telerik:RibbonBarButtonStrip>
                              <telerik:RibbonBarButtonStrip>
                                   <Buttons>
                                        <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageUrl="icons/home/paragraph/UL.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageUrl="icons/home/paragraph/OL.png">
                                        </telerik:RibbonBarButton>
                                   </Buttons>
                              </telerik:RibbonBarButtonStrip>
                              <telerik:RibbonBarButtonStrip>
                                   <Buttons>
                                        <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageUrl="icons/home/paragraph/DecrIndent.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Size="Small" Text="Increase Indent" ImageUrl="icons/home/paragraph/IncrIndent.png">
                                        </telerik:RibbonBarButton>
                                   </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="icons/home/styles/Normal.png" Text="Normal" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/NoSpacing.png" Text="No Spacing" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/Heading1.png" Text="Heading 1" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/Heading2.png" Text="Heading 2" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/Title.png" Text="Title" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/Subtitle.png" Text="Subtitle" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/SubEmphasis.png" Text="Subtle Emphasis" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/Emphasis.png" Text="Emphasis" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/IntEmphasis.png" Text="Intense Emphasis" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/Strong.png" Text="Strong" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/Quote.png" Text="Quote" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/IntQuote.png" Text="Intense Quote" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/SubReference.png" Text="Subtle Reference" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/IntReference.png" Text="Intense Reference" />
                                <telerik:RibbonBarGalleryItem ImageUrl="icons/home/styles/BookTitle.png" Text="Book Title" />
                                <telerik:RibbonBarGalleryItem ImageUrl="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="icons/home/Find.png">
                                   <Buttons>
                                        <telerik:RibbonBarButton Text="Find..." ImageUrl="icons/home/Find.png"></telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Go to..." ImageUrl="icons/home/Go.png"></telerik:RibbonBarButton>
                                   </Buttons>
                              </telerik:RibbonBarSplitButton>
                              <telerik:RibbonBarButton Size="Medium" Text="Replace" ImageUrl="icons/home/Replace.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarMenu Size="Medium" Text="Select" ImageUrl="icons/home/Select.png">
                                   <Items>
                                        <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="icons/home/Select_All.png">
                                        </telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="icons/home/Select.png">
                                        </telerik:RibbonBarMenuItem>
                                   </Items>
                              </telerik:RibbonBarMenu>
                         </Items>
                    </telerik:RibbonBarGroup>
               </telerik:RibbonBarTab>
               <telerik:RibbonBarTab Text="Insert">
                    <telerik:RibbonBarGroup Text="Illustrations">
                         <Items>
                              <telerik:RibbonBarButton Size="Large" Text="Picture" ImageUrl="icons/insert/Picture.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="icons/insert/Clipart.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarMenu Size="Large" Text="Shapes" ImageUrl="icons/insert/Shapes.png">
                              </telerik:RibbonBarMenu>
                              <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="icons/insert/SmartArt.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="icons/insert/Chart.png">
                              </telerik:RibbonBarButton>
                         </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Links">
                         <Items>
                              <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="icons/insert/Link.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="icons/insert/Bookmark.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="icons/insert/Cross_reference.png">
                              </telerik:RibbonBarButton>
                         </Items>
                    </telerik:RibbonBarGroup>
               </telerik:RibbonBarTab>
               <telerik:RibbonBarTab Text="View">
                    <telerik:RibbonBarGroup Text="Zoom">
                         <Items>
                              <telerik:RibbonBarToggleList>
                                   <ToggleButtons>
                                        <telerik:RibbonBarToggleButton Size="Large" Text="Zoom" ImageUrl="icons/view/Zoom.png">
                                        </telerik:RibbonBarToggleButton>
                                        <telerik:RibbonBarToggleButton Size="Large" Text="100%" ImageUrl="icons/view/100.png">
                                        </telerik:RibbonBarToggleButton>
                                   </ToggleButtons>
                              </telerik:RibbonBarToggleList>
                              <telerik:RibbonBarToggleList>
                                   <ToggleButtons>
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" ImageUrl="icons/view/One_Page.png">
                                        </telerik:RibbonBarToggleButton>
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" ImageUrl="icons/view/Two_Pages.png">
                                        </telerik:RibbonBarToggleButton>
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" ImageUrl="icons/view/Page_Width.png">
                                        </telerik:RibbonBarToggleButton>
                                   </ToggleButtons>
                              </telerik:RibbonBarToggleList>
                         </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Macros">
                         <Items>
                              <telerik:RibbonBarSplitButton Size="Large" Text="Macros" ImageUrl="icons/view/Macros.png">
                                   <Buttons>
                                        <telerik:RibbonBarButton Text="View Macros" ImageUrl="icons/view/Macros.png"></telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Record Macro..." ImageUrl="icons/view/Macros_Record.png">
                                        </telerik:RibbonBarButton>
                                   </Buttons>
                              </telerik:RibbonBarSplitButton>
                         </Items>
                    </telerik:RibbonBarGroup>
               </telerik:RibbonBarTab>
          </telerik:RadRibbonBar>
     </div>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/RibbonBar.png" AlternateText="tlrk.it/161g8F4" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/161g8F4">tlrk.it/161g8F4</a>
    </div>

    </form>
</body>
</html>