SharePoint menu items and ribbon controls are implemented as objects known as custom actions. Custom actions are defined as elements in Extensible Markup Language (XML) files. In SharePoint 2013, it now easy to add and implement ribbon controls with Visual Studio 2012/2013
For understanding, custom actions with Ribbon follow you able to:

  • Create custom action menu items.
  • Create custom action ribbon controls.
  • Access SharePoint objects from custom actions.

Menu items are custom actions incorporated into the built-in SharePoint user interface. As examples, the Site Actions menu is built from a number of built-in, context-sensitive actions that appear as menu item links. And the Site Settings page includes links that are defined by built-in actions. You can build your own custom actions by creating XML definitions in element files in Visual Studio projects, and you can specify where they appear, such as on the Site Settings menu or on a specific administrative page.

Like menus, the ribbon is context-sensitive and shows appropriate actions to users when users need them. For example, when a user browses to a document library, the ribbon controls for adding new folders and documents are shown. SharePoint includes many ribbon controls, and groups them together into related actions. For example, the New Document, the New Folder, and the Upload Document ribbon controls are grouped together on the ribbon

To create a ribbon item, you can use following step on Visual Studio

  1. Right-click Lab09, click Add and then click New Item.
  2. Click Empty Element.
  3. In the Name textbox, type YOURRIBBON and click Add.
  4. After the wizard, just open Elements.xml and check the XML file. Below XML allow you create button with an icon, when user click on it a javascript code will run

Hope this code wil help you understand how to work with Custom Action, CommandUIDefinitions

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
 <CustomAction Id="NewUIRibbonControl"
 RegistrationType="List" RegistrationId="101"
 Location="CommandUI.Ribbon">
 <CommandUIExtension>
 <CommandUIDefinitions>
 <CommandUIDefinition Location="Ribbon.Documents.New.Controls._children">
 <Button
 Id="NewUIRibbonControl.YOURRIBBON"
 Alt="Help"
 Sequence="1981"
 Command="showpage"
 Image32by32="/_layouts/..../linktoyourimage.png"
 LabelText="Help Videos"
 TemplateAlias="o1"/>
 </CommandUIDefinition>
 </CommandUIDefinitions>
 <CommandUIHandlers>
 <CommandUIHandler Command="showpage" CommandAction="javascript:window.open('http://google.com');" />
 </CommandUIHandlers>
 </CommandUIExtension>
 </CustomAction>
 </Elements>

Cheers
Hoang Nhut NGUYEN