Items in Blazor Ribbon component

28 Jan 202524 minutes to read

Button item

You can render the built-in Ribbon button item by setting the Type property as RibbonItemType.Button. You can customize the button item using the RibbonButtonSettings tag directive, which provides options such as IconCss, Content, IsToggle, and more.

Events

The following events are available in the Button item.

Name Args Description
Created EventCallback The Created event triggers when the Ribbon button is initialized, allowing you to perform immediate actions.
OnClick MouseEventArgs The OnClick event triggers when the Ribbon button is clicked, enabling custom click actions.

Below example demonstrates how to configure a Button item including it’s events

@using Syncfusion.Blazor.Ribbon

<div style="width:30%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup HeaderText="Clipboard">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.Button>
                                        <RibbonButtonSettings Content="Cut"
                                                              IconCss="e-icons e-cut"
                                                              OnClick="ClickHandler" Created="Created">
                                        </RibbonButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code {
    private void Created() { /* your actions here */ }

    private void ClickHandler(MouseEventArgs args) { /* your actions here */ }
}

Ribbon Button Item

Checkbox item

You can render the built-in Ribbon checkbox item by setting the Type property as RibbonItemType.Checkbox. This item is used to toggle between selected and unselected states. You can customize the checkbox using the RibbonCheckboxSettings tag directive with options such as Label and Checked.

Events

The following events are available in the Checkbox item.

Name Args Description
Created EventCallback The Created event triggers when the Ribbon checkbox is initialized, allowing you to perform immediate actions.
ValueChange ChangeEventArgs The ValueChange event triggers when the checkbox value changes, enabling actions based on the new value.

Below example demonstrates how to configure a Checkbox item including it’s events

@using Syncfusion.Blazor.Ribbon

<div style="width:30%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup HeaderText="Show">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.CheckBox>
                                        <RibbonCheckBoxSettings Label="Ruler"
                                                                Checked="true" 
                                                                Created="Created" 
                                                                ValueChange="ValueChange">
                                        </RibbonCheckBoxSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.CheckBox>
                                        <RibbonCheckBoxSettings Label="Gridlines"></RibbonCheckBoxSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.CheckBox>
                                        <RibbonCheckBoxSettings Label="Navigation Pane"></RibbonCheckBoxSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code {
    private void Created() { /* your actions here */ }

    private void ValueChange(ChangeEventArgs args) { /* your actions here */ }
}

Ribbon Checkbox Item

You can render the built-in Ribbon dropdown button item by setting the Type property as RibbonItemType.DropDown. This item displays a button with a dropdown menu for additional options. The RibbonDropDownSettings tag directive allows you to configure properties such as Content, Items and more.

Events

The following events are available in the DropDownButton item.

Name Args Description
Created EventCallback The Created event triggers when the dropdown button is initialized, allowing you to perform immediate setup actions.
PopupOpening DropDownPopupOpenEventArgs The PopupOpening event triggers before the dropdown popup opens, enabling pre-opening configurations.
PopupClosing DropDownPopupCloseEventArgs The PopupClosing event triggers before the popup closes, allowing pre-closing actions.
PopupOpened DropDownPopupOpenedEventArgs The PopupOpened event triggers after the popup opens, enabling post-opening actions.
PopupClosed DropDownPopupClosedEventArgs The PopupClosed event triggers after the popup closes, enabling post-closing actions.
ItemRendering DropDownItemRenderEventArgs The ItemRendering event triggers during item rendering, allowing customization of dropdown items.
ItemSelecting DropDownItemSelectEventArgs The ItemSelecting event triggers before an item is selected, enabling selection conditions.

Below example demonstrates how to configure a DropDownButton item including it’s events

@using Syncfusion.Blazor.Ribbon
@using Syncfusion.Blazor.SplitButtons

<div style="width:30%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup HeaderText="Header">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.DropDown>
                                        <RibbonDropDownSettings Content="Header" IconCss="e-icons e-header" Items="@headerItems" 
                                                                Created="Created" 
                                                                PopupOpening="PopupOpening" 
                                                                PopupClosing="PopupClosing" 
                                                                PopupOpened="PopupOpened" 
                                                                PopupClosed="PopupClosed" 
                                                                ItemRendering="ItemRendering" 
                                                                ItemSelecting="ItemSelecting">
                                        </RibbonDropDownSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code {
    private void Created() { /* your actions here */ }

    private void PopupOpening(DropDownPopupOpenEventArgs args) { /* your actions here */ }

    private void PopupClosing(DropDownPopupCloseEventArgs args) { /* your actions here */ }

    private void PopupOpened(DropDownPopupOpenedEventArgs args) { /* your actions here */ }

    private void PopupClosed(DropDownPopupClosedEventArgs args) { /* your actions here */ }

    private void ItemRendering(DropDownItemRenderEventArgs args) { /* your actions here */ }

    private void ItemSelecting(DropDownItemSelectEventArgs args) { /* your actions here */ }

    List<DropDownMenuItem> headerItems = new List<DropDownMenuItem>()
    {
        new DropDownMenuItem{ Text = "Insert Header" },
        new DropDownMenuItem{ Text = "Edit Header" },
        new DropDownMenuItem{ Text = "Remove Header" }
    };

}

Ribbon DropDown Item

SplitButton item

You can render the built-in Ribbon split button item by setting the Type property as RibbonItemType.SplitButton. This item combines a primary button with a dropdown for secondary actions. The RibbonSplitButtonSettings tag directive lets you configure options like Content, Items and more.

Events

The following events are available in the SplitButton item.

Name Args Description
Created EventCallback The Created event triggers when the split button is initialized, allowing you to perform any necessary initialization or setup.
Clicked SplitButtonClickedEventArgs The Clicked event triggers when the split button is clicked, enabling click-specific actions.
PopupOpening SplitButtonPopupOpenEventArgs The PopupOpening event triggers before the split button popup opens, setting conditions for the popup.
PopupClosing SplitButtonPopupCloseEventArgs The PopupClosing event triggers before the popup closes, allowing pre-closure actions.
PopupOpened SplitButtonPopupOpenedEventArgs The PopupOpened event triggers after the popup opens, facilitating post-opening actions.
PopupClosed SplitButtonPopupClosedEventArgs The PopupClosed event triggers after the popup closes, enabling post-closure actions.
ItemRendering SplitButtonItemRenderEventArgs The ItemRendering event triggers during item rendering, facilitating item customization.
ItemSelected SplitButtonItemSelectedEventArgs The ItemSelected event triggers when an item is selected, allowing selection-specific actions.

Below example demonstrates how to configure a SplitButton item including it’s events

@using Syncfusion.Blazor.Ribbon
@using Syncfusion.Blazor.SplitButtons

<div style="width:30%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup HeaderText="Header">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.SplitButton>
                                        <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems" 
                                                                    Created="Created" 
                                                                    Clicked="Clicked" 
                                                                    PopupOpening="PopupOpening" 
                                                                    PopupClosing="PopupClosing" 
                                                                    PopupOpened="PopupOpened" 
                                                                    PopupClosed="PopupClosed" 
                                                                    ItemRendering="ItemRendering" 
                                                                    ItemSelecting="ItemSelecting">
                                        </RibbonSplitButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code {
    private void Created() { /* your actions here */ }

    private void Clicked(SplitButtonClickedEventArgs args) { /* your actions here */ }

    private void PopupOpening(SplitButtonPopupOpenEventArgs args) { /* your actions here */ }

    private void PopupClosing(SplitButtonPopupCloseEventArgs args) { /* your actions here */ }

    private void PopupOpened(SplitButtonPopupOpenedEventArgs args) { /* your actions here */ }

    private void PopupClosed(SplitButtonPopupClosedEventArgs args) { /* your actions here */ }

    private void ItemRendering(SplitButtonItemRenderEventArgs args) { /* your actions here */ }

    private void ItemSelecting(SplitButtonItemSelectedEventArgs args) { /* your actions here */ }

    List<DropDownMenuItem> formatItems = new List<DropDownMenuItem>()
    {
        new DropDownMenuItem{ Text = "Keep Source Format" },
        new DropDownMenuItem{ Text = "Merge Format" },
        new DropDownMenuItem{ Text = "Keep Text Only" }
    };

}

Ribbon SplitButton Item

Combobox item

You can render the built-in Ribbon combobox item by setting the Type property as RibbonItemType.Combobox. This item provides a dropdown with optional search and filtering capabilities. The RibbonComboboxSettings tag directive allows you to configure properties like DataSource, AllowFiltering, Index, Placeholder and lot more.

Events

The following events are available in the Combobox item.

Name Args Description
PopupOpening ComboBoxPopupOpenEventArgs The PopupOpening event triggers before the combobox popup opens, allowing setup actions.
PopupClosing ComboBoxPopupCloseEventArgs The PopupClosing event triggers before the popup closes, allowing cleanup actions.
PopupOpened ComboBoxPopupOpenedEventArgs The PopupOpened event triggers after the popup opens, enabling post-open actions.
PopupClosed ComboBoxPopupClosedEventArgs The PopupClosed event triggers after the popup closes, enabling post-close actions.
Filtering ComboBoxFilterEventArgs The Filtering event triggers during item filtering, allowing custom filter logic.
Selecting ComboBoxSelectEventArgs The Selecting event triggers before an item is selected, enabling selection validation.
ValueChange ComboBoxChangeEventArgs The ValueChange event triggers when the combobox value changes, enabling actions based on the new value.

Below example demonstrates how to configure a Combobox item including it’s events

@using Syncfusion.Blazor.Ribbon
@using Syncfusion.Blazor.SplitButtons
@using Syncfusion.Blazor.DropDowns

<div style="width:50%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup Orientation=Orientation.Row HeaderText="Font">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.ComboBox>
                                        <RibbonComboBoxSettings @bind-Value="@fontFamValue" ShowClearButton="true" AllowFiltering=true DataSource="@fontFamilyItems" FieldSettings="@fieldSetings"
                                        PopupOpening="PopupOpening" 
                                        PopupClosing="PopupClosing" 
                                        PopupOpened="PopupOpened" 
                                        PopupClosed="PopupClosed" 
                                        Filtering="Filtering" 
                                        Selecting="Selecting" 
                                        ValueChange="ValueChange">
                                        </RibbonComboBoxSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.ComboBox>
                                        <RibbonComboBoxSettings Index="3" AllowFiltering=true DataSource="@fontSizeItems" FieldSettings="@fieldSetings"></RibbonComboBoxSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code {

    public string fontFamValue { get; set; } = "Cambria";

    private class ComboBoxItem
    {
        public string Text { get; set; }
        public string Value { get; set; }
    }

    FieldSettingsModel fieldSetings = new FieldSettingsModel
    {
        Text = "Text",
        Value = "Value"
    };

    List<ComboBoxItem> fontFamilyItems = new List<ComboBoxItem>
    {
        new ComboBoxItem { Text = "Algerian", Value = "Algerian" },
        new ComboBoxItem { Text = "Arial", Value = "Arial" },
        new ComboBoxItem { Text = "Calibri", Value = "Calibri" },
        new ComboBoxItem { Text = "Cambria", Value = "Cambria" },
        new ComboBoxItem { Text = "Cambria Math", Value = "Cambria Math" },
    };

    List<ComboBoxItem> fontSizeItems = new List<ComboBoxItem>
    {
        new ComboBoxItem { Text = "8", Value = "8" },
        new ComboBoxItem { Text = "9", Value = "9" },
        new ComboBoxItem { Text = "10", Value = "10" },
        new ComboBoxItem { Text = "11", Value = "11" },
        new ComboBoxItem { Text = "12", Value = "12" },
    };

    private void PopupOpening(ComboBoxPopupOpenEventArgs args) { /* your actions here */ }

    private void PopupClosing(ComboBoxPopupCloseEventArgs args) { /* your actions here */ }

    private void PopupOpened(ComboBoxPopupOpenedEventArgs args) { /* your actions here */ }

    private void PopupClosed(ComboBoxPopupClosedEventArgs args) { /* your actions here */ }

    private void Filtering(ComboBoxFilterEventArgs args) { /* your actions here */ }

    private void Selecting(ComboBoxSelectEventArgs args) { /* your actions here */ }

    private void ValueChange(ComboBoxChangeEventArgs args) { /* your actions here */ }

}

Ribbon Combobox Item

Colorpicker item

You can render the built-in Ribbon color picker item by setting the Type property as RibbonItemType.ColorPicker. This item provides a color selection interface, which can be customized using the RibbonColorPickerSettings tag directive with properties like Value, Mode and more.

Events

The following events are available in the Colorpicker item.

Name Args Description
Created EventCallback The Created event triggers when the color picker is initialized, enabling setup actions.
Opening ColorPickerOpenEventArgs The Opening event triggers before the color picker opens, allowing initial configurations.
Closing ColorPickerCloseEventArgs The Closing event triggers before the color picker closes, facilitating pre-closure tasks.
Opened ColorPickerOpenedEventArgs The Opened event triggers after the color picker opens, enabling post-opening actions.
TileRendering TileRenderEventArgs The TileRendering event triggers during the rendering of each palette tile, supporting tile customization.
ValueChange ColorPickerEventArgs The ValueChange event triggers when the color value changes, facilitating color updates.
Selected ColorPickerSelectedEventArgs The Selected event triggers when a color is selected, allowing selected color handling.

Below example demonstrates how to configure a Colorpicker item including it’s events

@using Syncfusion.Blazor.Ribbon
@using Syncfusion.Blazor.SplitButtons

<div style="width:30%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup HeaderText="Font">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.ColorPicker AllowedSizes="RibbonItemSize.Small">
                                        <RibbonColorPickerSettings Value="#123456"
                                                                   Created="Created" 
                                                                   Opening="Opening" 
                                                                   Closing="Closing" 
                                                                   Opened="Opened" 
                                                                   TileRendering="TileRendering" 
                                                                   Selected="Selected" 
                                                                   ValueChange="ValueChange">
                                        </RibbonColorPickerSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code {
    private void Created() { /* your actions here */ }

    private void Opening(ColorPickerOpenEventArgs args) { /* your actions here */ }

    private void Closing(ColorPickerCloseEventArgs args) { /* your actions here */ }

    private void Opened(ColorPickerOpenedEventArgs args) { /* your actions here */ }

    private void ValueChange(ColorPickerEventArgs args) { /* your actions here */ }

    private void TileRendering(TileRenderEventArgs args) { /* your actions here */ }

    private void Selected(ColorPickerSelectedEventArgs args) { /* your actions here */ }

}

Ribbon Colorpicker Item

GroupButton item

You can render the built-in Ribbon group button item by setting the Type property as RibbonItemType.GroupButton. This item groups multiple buttons for single or multiple selection. Use the RibbonGroupButtonSettings tag directive to configure options like Items, Selection, and more. Items property accepts a collection of GroupButtonItem through which you can customize each group button item with options such as Content, IconCss, Selected and more.

Events

The following event is available in the GroupButton item.

Name Args Description
ItemClick GroupButtonClickEventArgs The ItemClick event is triggered when an item in the Ribbon group button is clicked, enabling click-specific actions.

Below example demonstrates how to configure a GroupButton item with both selection types including it’s event.

@using Syncfusion.Blazor.Ribbon
@using Syncfusion.Blazor.SplitButtons

<div style="width:30%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup HeaderText="Font">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.GroupButton ID="formatGroupBtn">
                                        <RibbonGroupButtonSettings HeaderText="Format Styles"
                                                                   Selection=GroupButtonSelection.Multiple
                                                                   Items="@formatGroupItems" ItemClick="HandleSelection">
                                        </RibbonGroupButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                    <RibbonGroup HeaderText="Alignment">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.GroupButton ID="alignmentGroup">
                                        <RibbonGroupButtonSettings Selection=GroupButtonSelection.Single
                                                                   Items="@alignGroupItems" ItemClick="HandleSelection">
                                        </RibbonGroupButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code {
    
    List<GroupButtonItem> formatGroupItems = new List<GroupButtonItem>
    {
        new GroupButtonItem
        {
            IconCss = "e-icons e-bold",
            Selected = true,
            Content = "Bold"
        },
        new GroupButtonItem
        {
            IconCss = "e-icons e-italic",
            Content = "Italic",
        },
        new GroupButtonItem
        {
            IconCss = "e-icons e-underline",
            Content = "Underline"
        },
        new GroupButtonItem
        {
            IconCss = "e-icons e-strikethrough",
            Content = "Strikethrough"
        },
        new GroupButtonItem
        {
            IconCss = "e-icons e-change-case",
            Content = "Change Case"
        },
    };

    List<GroupButtonItem> alignGroupItems = new List<GroupButtonItem>
    {
        new GroupButtonItem
        {
            IconCss = "e-icons e-align-left",
            Selected = true,
            Content = "Align Left"
        },
        new GroupButtonItem
        {
            IconCss = "e-icons e-align-center",
            Content = "Align Center"
        },
        new GroupButtonItem
        {
            IconCss = "e-icons e-align-right",
            Content = "Align Right"
        },
                new GroupButtonItem
        {
            IconCss = "e-icons e-justify",
            Content = "Justify"
        }
    };
    
    private void HandleSelection(GroupButtonClickEventArgs args) { /* your actions here */ }

}

Ribbon GroupButton Item

Custom item

The Ribbon supports rendering non-built-in items or your own HTML content by setting the Type property as RibbonItemType.Template. And then, you can use the ItemTemplate tag directive to define a custom RenderFragment for fully customizable content. RibbonItemContext is being passed as context to the template through which you can customize further based on the current state of the Ribbon item.

@using Syncfusion.Blazor.Ribbon

<div style="width:50%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup Orientation=Orientation.Row HeaderText="Inputs">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type="RibbonItemType.Template">
                                        <ItemTemplate>
                                            <input type="text" placeholder="Search..." style="width: 150px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                                        </ItemTemplate>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type="RibbonItemType.Template">
                                        <ItemTemplate>
                                            <input type="date" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                                        </ItemTemplate>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                    <RibbonGroup Orientation=Orientation.Row HeaderText="Feedbacks">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type="RibbonItemType.Template">
                                        <ItemTemplate>
                                            <div style="display: flex; gap: 5px;">
                                                <span style="color: gold; font-size: 20px;"></span>
                                                <span style="color: gold; font-size: 20px;"></span>
                                                <span style="color: gold; font-size: 20px;"></span>
                                                <span style="color: #ccc; font-size: 20px;"></span>
                                                <span style="color: #ccc; font-size: 20px;"></span>
                                            </div>
                                        </ItemTemplate>
                                    </RibbonItem>
                                    <RibbonItem Type="RibbonItemType.Template">
                                        <ItemTemplate>
                                            <div style="position: relative; display: inline-block;">
                                                <button style="padding: 10px; border: none; background: #007bff; color: white; border-radius: 4px;">Inbox</button>
                                                <span style="position: absolute; top: -2px; right: -7px;
                                                            background: red; color: white; font-size: 11px; padding: 0 5px; border-radius: 50%;">5
                                                </span>
                                            </div>
                                        </ItemTemplate>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

Ribbon Custom Item

Items display mode

The DisplayOptions property determines how Ribbon items are displayed based on the Ribbon’s layout and overflow state. Available options include:

Value Description
Auto The items are displayed in all layouts based on the ribbon’s overflow state(Default)
Classic The items are displayed only in the classic layout group.
Simplified The items are displayed only in the simplified layout group.
Overflow The items are displayed only in the overflow popup.

Below example demonstrates the usages of DisplayOptions property to control the visibility of Ribbon items based on the layout and overflow state.

@using Syncfusion.Blazor.Ribbon;
@using Syncfusion.Blazor.SplitButtons;

<div style="width:30%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup HeaderText="Clipboard">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.SplitButton DisplayOptions="@((DisplayMode)DisplayMode.Classic | DisplayMode.Simplified)">
                                        <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems"></RibbonSplitButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.Button DisplayOptions="DisplayMode.Classic">
                                        <RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut"></RibbonButtonSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.Button DisplayOptions="DisplayMode.Classic">
                                        <RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy"></RibbonButtonSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.Button DisplayOptions="DisplayMode.Simplified">
                                        <RibbonButtonSettings Content="Format Painter" IconCss="e-icons e-format-painter"></RibbonButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                    <RibbonGroup Orientation=Orientation.Row HeaderText="Font" PopupHeaderText="Font Options" EnableGroupOverflow="true">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.Button DisplayOptions="DisplayMode.Classic">
                                        <RibbonButtonSettings Content="Decrease Indent" IconCss="e-icons e-decrease-indent"></RibbonButtonSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.Button DisplayOptions="DisplayMode.Overflow">
                                        <RibbonButtonSettings Content="Increase Indent" IconCss="e-icons e-increase-indent"></RibbonButtonSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.Button DisplayOptions="DisplayMode.Overflow">
                                        <RibbonButtonSettings Content="Paragraph" IconCss="e-icons e-paragraph"></RibbonButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code {

    List<DropDownMenuItem> formatItems = new List<DropDownMenuItem>()
        {
        new DropDownMenuItem{ Text = "Keep Source Format" },
        new DropDownMenuItem{ Text = "Merge Format" },
        new DropDownMenuItem{ Text = "Keep Text Only" }
        };
}

Display Options Classic

Display Options Simplified and Overflow

Enable/Disable items

You can use the Disabled property to disable particular Ribbon item. It prevents the user interaction when set to true. By default, the value is false.

@using Syncfusion.Blazor.Ribbon;
@using Syncfusion.Blazor.SplitButtons;

<div style="width: 30%">
    <SfRibbon>
        <RibbonTabs>
            <RibbonTab HeaderText="Home">
                <RibbonGroups>
                    <RibbonGroup HeaderText="Clipboard">
                        <RibbonCollections>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.SplitButton Disabled=true>
                                        <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems"></RibbonSplitButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                            <RibbonCollection>
                                <RibbonItems>
                                    <RibbonItem Type=RibbonItemType.Button>
                                        <RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut"></RibbonButtonSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.Button>
                                        <RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy"></RibbonButtonSettings>
                                    </RibbonItem>
                                    <RibbonItem Type=RibbonItemType.Button>
                                        <RibbonButtonSettings Content="Format Painter" IconCss="e-icons e-format-painter"></RibbonButtonSettings>
                                    </RibbonItem>
                                </RibbonItems>
                            </RibbonCollection>
                        </RibbonCollections>
                    </RibbonGroup>
                </RibbonGroups>
            </RibbonTab>
        </RibbonTabs>
    </SfRibbon>
</div>

@code{
    List<DropDownMenuItem> formatItems = new List<DropDownMenuItem>()
    {
        new DropDownMenuItem{ Text = "Keep Source Format" },
        new DropDownMenuItem{ Text = "Merge Format" },
        new DropDownMenuItem{ Text = "Keep Text Only" }
    };
}

Ribbon Item Disabled