Implement the Syncfusion Blazor Ribbon component. Use this skill when creating ribbon interfaces, implementing ribbon tabs/groups/items, adding file menus, handling ribbon events, or customizing ribbon styling in Syncfusion Blazor projects. Supports all ribbon item types (Button, Checkbox, DropDown, SplitButton, ComboBox, ColorPicker, GroupButton, Template), file menu operations, gallery items, contextual tabs, backstage view, keyboard navigation with KeyTips, events, theming, and accessibility features.
Build professional Office-style ribbon interfaces with the Syncfusion Blazor Ribbon component. This skill provides comprehensive guidance on implementing, configuring, and customizing the Ribbon for Blazor applications.
The Ribbon is a Microsoft Office-style UI component that organizes commands and tools into tabs, groups, and collections. It provides an intuitive interface for application functionality with support for multiple item types, file menus, and extensive customization options.
SfRibbon (Main Container)
├── RibbonFileMenuSettings (Optional File Menu)
└── RibbonTabs
└── RibbonTab (Home, Insert, Design...)
└── RibbonGroups
└── RibbonGroup (Clipboard, Font...)
└── RibbonCollections
└── RibbonCollection (Row/Column Layout)
└── RibbonItems
└── RibbonItem (Button, Dropdown, etc.)
📄 Read: references/getting-started.md
📄 Read: references/ribbon-structure.md
📄 Read: references/ribbon-items-basic.md
📄 Read: references/file-menu.md
📄 Read: references/events.md
📄 Read: references/gallery.md
📄 Read: references/contextual-tabs.md
📄 Read: references/backstage.md
📄 Read: references/keytips.md
📄 Read: references/customization.md
📄 Read: references/accessibility.md
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Ribbon
@using Syncfusion.Blazor.SplitButtons
<div style="width: 100%">
<SfRibbon>
<RibbonTabs>
<RibbonTab HeaderText="Home">
<RibbonGroups>
<RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row">
<RibbonCollections>
<RibbonCollection>
<RibbonItems>
<RibbonItem Type="RibbonItemType.SplitButton">
<RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@pasteOptions">
</RibbonSplitButtonSettings>
</RibbonItem>
</RibbonItems>
</RibbonCollection>
<RibbonCollection>
<RibbonItems>
<RibbonItem Type="RibbonItemType.Button">
<RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut" OnClick="@OnCut">
</RibbonButtonSettings>
</RibbonItem>
<RibbonItem Type="RibbonItemType.Button">
<RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy" OnClick="@OnCopy">
</RibbonButtonSettings>
</RibbonItem>
</RibbonItems>
</RibbonCollection>
</RibbonCollections>
</RibbonGroup>
</RibbonGroups>
</RibbonTab>
</RibbonTabs>
</SfRibbon>
</div>
@code {
private List<DropDownMenuItem> pasteOptions = new List<DropDownMenuItem>()
{
new DropDownMenuItem{ Text = "Keep Source Format" },
new DropDownMenuItem{ Text = "Merge Format" },
new DropDownMenuItem{ Text = "Keep Text Only" }
};
private void OnCut(MouseEventArgs args) { /* Handle cut action */ }
private void OnCopy(MouseEventArgs args) { /* Handle copy action */ }
}
Organize related functionality into separate tabs with different commands:
<SfRibbon>
<RibbonTabs>
<RibbonTab HeaderText="Home"><!-- Home commands --></RibbonTab>
<RibbonTab HeaderText="Insert"><!-- Insert commands --></RibbonTab>
<RibbonTab HeaderText="Design"><!-- Design commands --></RibbonTab>
</RibbonTabs>
</SfRibbon>
Group related items for better organization and UI layout:
<RibbonTab HeaderText="Home">
<RibbonGroups>
<RibbonGroup HeaderText="Clipboard"><!-- Copy/Paste items --></RibbonGroup>
<RibbonGroup HeaderText="Font"><!-- Font items --></RibbonGroup>
<RibbonGroup HeaderText="Paragraph"><!-- Alignment items --></RibbonGroup>
</RibbonGroups>
</RibbonTab>
Include file operations menu:
<SfRibbon>
<RibbonFileMenuSettings Visible="true" MenuItems="@fileMenuItems">
</RibbonFileMenuSettings>
<RibbonTabs><!-- tabs here --></RibbonTabs>
</SfRibbon>
Bind dropdown to data source:
<RibbonItem Type="RibbonItemType.ComboBox">
<RibbonComboBoxSettings DataSource="@fontFamilies"
FieldSettings="@fieldSettings"
AllowFiltering="true">
</RibbonComboBoxSettings>
</RibbonItem>
Create buttons with selected/unselected state:
<RibbonItem Type="RibbonItemType.GroupButton">
<RibbonGroupButtonSettings Selection="GroupButtonSelection.Single" Items="@alignmentOptions">
</RibbonGroupButtonSettings>
</RibbonItem>
RibbonTab objectsRow or Column layoutButton, Checkbox, DropDown, SplitButton, ComboBox, ColorPicker, GroupButton, TemplateAuto, Classic, Simplified, OverflowSmall, Medium, LargeBuild a word processor ribbon with file operations, formatting, and style controls.
Create a spreadsheet ribbon with formulas, data analysis, and cell formatting.
Implement a design application ribbon with drawing tools, colors, and object manipulation.
Design a CMS ribbon with publishing options, content organization, and workflow controls.
Create admin tools ribbon with user management, settings, and system controls.
Build email ribbon with message actions (Reply, Forward, Delete, Archive).
Implement image/video editor ribbon with editing tools, effects, and export options.
Available themes:
Themes are applied via CSS imports in index.html or App.razor.
Ribbon not appearing:
_Imports.razorProgram.csItems not visible:
Visible property on tabs and itemsDisplayOptions configurationDisabled property not set to trueStyling issues:
index.htmlCssClass property syntaxEvents not firing:
@Created event for initialization)For more information, visit the official Syncfusion Blazor Ribbon documentation.