Blazorise Ribbon component

NuGet

Install the Blazorise.Ribbon package in your Blazor application.

dotnet add package Blazorise.Ribbon

Imports

Add the Ribbon namespace to your _Imports.razor file. The extension uses your existing Blazorise setup.

@using Blazorise.Ribbon

Basics

When your application has many commands, arrange them into tabs for different tasks and use RibbonGroup to keep related actions together. Start with Home and Insert, give each tab a unique Name, and bind SelectedTab to follow the user's selection.

Clipboard

Paragraph

Select a tab and activate a command.

<Ribbon @bind-SelectedTab="@selectedTab" Border="Border.Is1.Rounded" Label="Document commands">
    <QuickAccessToolbar>
        <RibbonButton Text="Save" Icon="IconName.Save" Size="RibbonItemSize.Small" Clicked="@OnSaveHandler" />
    </QuickAccessToolbar>
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard">
                <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" Clicked="@OnPasteHandler" />
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" Clicked="@OnCutHandler" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" Clicked="@OnCopyHandler" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Paragraph">
                <RibbonButton Text="Align left" Icon="IconName.AlignLeft" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                    <RibbonButton Text="Align right" Icon="IconName.AlignRight" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
        <RibbonTab Name="insert" Text="Insert">
            <RibbonGroup Text="Illustrations">
                <RibbonButton Text="Picture" Icon="IconName.Image" Size="RibbonItemSize.Large" Clicked="@OnPictureHandler" />
                <RibbonColumn>
                    <RibbonButton Text="Chart" Icon="IconName.ChartBar" />
                    <RibbonButton Text="Screenshot" Icon="IconName.Camera" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Tables">
                <RibbonButton Text="Table" Icon="IconName.Table" Size="RibbonItemSize.Large" />
            </RibbonGroup>
            <RibbonGroup Text="Links">
                <RibbonColumn>
                    <RibbonButton Text="Link" Icon="IconName.Link" />
                    <RibbonButton Text="Bookmark" Icon="IconName.Bookmark" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
    </RibbonTabs>
</Ribbon>

<Paragraph Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary">
    @status
</Paragraph>

@code {
    private string selectedTab = "home";

    private string status = "Select a tab and activate a command.";

    private void OnSaveHandler()
    {
        status = "Save selected.";
    }

    private void OnPasteHandler()
    {
        status = "Paste selected.";
    }

    private void OnCutHandler()
    {
        status = "Cut selected.";
    }

    private void OnCopyHandler()
    {
        status = "Copy selected.";
    }

    private void OnPictureHandler()
    {
        status = "Insert picture selected.";
    }
}

Commands

When adding commands or menus to a ribbon, choose their Size to give important actions more space and keep supporting commands compact. Try Large for Paste and Small for Cut. Use RibbonSplitButton when an action needs a menu of alternatives, or RibbonDropdown for a menu on its own.

Paste menu open

Table menu open

Clipboard

Insert

Editing

Use Paste for its default action or open its menu for alternatives.

<Div Flex="Flex.Row.Wrap.AlignItems.Center" Gap="Gap.Is3" Margin="Margin.Is3.FromBottom">
    <Switch TValue="bool" @bind-Value="@pasteMenuVisible">Paste menu open</Switch>
    <Switch TValue="bool" @bind-Value="@tableMenuVisible">Table menu open</Switch>
</Div>

<Ribbon SelectedTab="home" ShowCollapseButton="false" Border="Border.Is1.Rounded">
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard">
                <RibbonSplitButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" @bind-Visible="@pasteMenuVisible" Clicked="@OnPasteHandler">
                    <RibbonDropdownItem Text="Keep source formatting" Clicked="@OnPasteFormattingHandler" />
                    <RibbonDropdownItem Text="Keep text only" Clicked="@OnPasteTextHandler" />
                    <RibbonDropdownDivider />
                    <RibbonDropdownItem Text="Paste special" Clicked="@OnPasteSpecialHandler" />
                </RibbonSplitButton>
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" Size="RibbonItemSize.Small" Clicked="@OnCutHandler" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" Size="RibbonItemSize.Medium" Clicked="@OnCopyHandler" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Insert">
                <RibbonDropdown Text="Table" Icon="IconName.Table" Size="RibbonItemSize.Large" @bind-Visible="@tableMenuVisible">
                    <RibbonDropdownItem Text="Insert table" Icon="IconName.Table" Clicked="@OnTableHandler" />
                    <RibbonDropdownItem Text="Draw table" Clicked="@OnDrawTableHandler" />
                </RibbonDropdown>
            </RibbonGroup>
            <RibbonGroup Text="Editing">
                <RibbonColumn>
                    <RibbonSplitButton Text="Find" Icon="IconName.Search" Size="RibbonItemSize.Medium" Clicked="@OnFindHandler">
                        <RibbonDropdownItem Text="Advanced find" Clicked="@OnAdvancedFindHandler" />
                        <RibbonDropdownItem Text="Go to" Clicked="@OnGoToHandler" />
                    </RibbonSplitButton>
                    <RibbonButton Text="Replace" Icon="IconName.Edit" Disabled />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
    </RibbonTabs>
</Ribbon>

<Paragraph Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary">
    @status
</Paragraph>

@code {
    private bool pasteMenuVisible;

    private bool tableMenuVisible;

    private string status = "Use Paste for its default action or open its menu for alternatives.";

    private void OnPasteHandler()
    {
        status = "Default paste action selected.";
    }

    private void OnPasteFormattingHandler()
    {
        status = "Paste with source formatting selected.";
    }

    private void OnPasteTextHandler()
    {
        status = "Paste as plain text selected.";
    }

    private void OnPasteSpecialHandler()
    {
        status = "Paste special selected.";
    }

    private void OnCutHandler()
    {
        status = "Cut selected.";
    }

    private void OnCopyHandler()
    {
        status = "Copy selected.";
    }

    private void OnTableHandler()
    {
        status = "Insert table selected.";
    }

    private void OnDrawTableHandler()
    {
        status = "Draw table selected.";
    }

    private void OnFindHandler()
    {
        status = "Default find action selected.";
    }

    private void OnAdvancedFindHandler()
    {
        status = "Advanced find selected.";
    }

    private void OnGoToHandler()
    {
        status = "Go to selected.";
    }
}

When your application needs to open or close a menu, bind Visible on either command, as the switches do here. Through a component reference, you can also call Show(), Hide(), or Focus() to focus the menu toggle.

Rows and columns

Keep supporting commands beside a large action by stacking them in RibbonColumn, as Clipboard does here. To arrange commands into horizontal rows, set the group's Layout to RibbonGroupLayout.Rows and wrap each row in RibbonRow. Groups use Columns by default.

Clipboard

Paragraph

Editing

<Ribbon SelectedTab="home" ShowCollapseButton="false" Border="Border.Is1.Rounded">
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard" Layout="RibbonGroupLayout.Columns">
                <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" />
                    <RibbonButton Text="Format Painter" Icon="IconName.PaintBrush" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Paragraph" Layout="RibbonGroupLayout.Rows">
                <RibbonRow>
                    <RibbonButton Text="Align left" Icon="IconName.AlignLeft" />
                    <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                    <RibbonButton Text="Align right" Icon="IconName.AlignRight" />
                </RibbonRow>
                <RibbonRow>
                    <RibbonButton Text="Bullets" Icon="IconName.ListUl" />
                    <RibbonButton Text="Numbering" Icon="IconName.ListOl" />
                    <RibbonButton Text="Indent" Icon="IconName.ArrowRight" />
                </RibbonRow>
            </RibbonGroup>
            <RibbonGroup Text="Editing">
                <RibbonColumn>
                    <RibbonButton Text="Find" Icon="IconName.Search" />
                    <RibbonButton Text="Replace" Icon="IconName.Sync" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
    </RibbonTabs>
</Ribbon>

Formatting

For formatting options such as Bold or text color, bind the controls so the ribbon remembers the user's choices. Use Layout="RibbonGroupLayout.Rows" to place font selectors and formatting controls in separate RibbonRow components. Add a gallery when users would benefit from seeing a style preview before selecting it.

Font

Styles

Font: Calibri, 16 pt. Style: normal. Color: #212121.

Formatting controls can share the same ribbon rows as ordinary Blazorise inputs.

<Ribbon SelectedTab="home" ShowCollapseButton="false" Border="Border.Is1.Rounded">
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Font" Layout="RibbonGroupLayout.Rows">
                <RibbonRow>
                    <Select TValue="string" @bind-Value="@fontFamily" Size="Size.Small" Width="Width.Rem( 9 )" aria-label="Font family">
                        <SelectItem Value="@("Arial")">Arial</SelectItem>
                        <SelectItem Value="@("Calibri")">Calibri</SelectItem>
                        <SelectItem Value="@("Georgia")">Georgia</SelectItem>
                    </Select>
                    <Select TValue="int" @bind-Value="@fontSize" Size="Size.Small" Width="Width.Rem( 5 )" aria-label="Font size">
                        <SelectItem Value="12">12</SelectItem>
                        <SelectItem Value="16">16</SelectItem>
                        <SelectItem Value="24">24</SelectItem>
                    </Select>
                </RibbonRow>
                <RibbonRow>
                    <RibbonToggleButton Text="Bold" Icon="IconName.Bold" Size="RibbonItemSize.Small" @bind-Checked="@bold" />
                    <RibbonToggleButton Text="Italic" Icon="IconName.Italic" Size="RibbonItemSize.Small" @bind-Checked="@italic" />
                    <RibbonToggleButton Text="Underline" Icon="IconName.Underline" Size="RibbonItemSize.Small" @bind-Checked="@underline" />
                    <RibbonColorPicker @bind-Value="@textColor" Size="RibbonItemSize.Small" Text="Text color" Icon="IconName.Palette" />
                </RibbonRow>
            </RibbonGroup>
            <RibbonGroup Text="Styles">
                <RibbonGallery Text="Document styles" @bind-SelectedValue="@selectedStyle">
                    <RibbonGalleryItem Value="normal" Text="Normal">
                        <Span>AaBbCc</Span>
                    </RibbonGalleryItem>
                    <RibbonGalleryItem Value="heading" Text="Heading">
                        <Span TextSize="TextSize.Large" TextWeight="TextWeight.Bold">AaBbCc</Span>
                    </RibbonGalleryItem>
                    <RibbonGalleryItem Value="title" Text="Title">
                        <Span TextSize="TextSize.ExtraLarge" TextColor="TextColor.Primary">AaBbCc</Span>
                    </RibbonGalleryItem>
                </RibbonGallery>
            </RibbonGroup>
        </RibbonTab>
    </RibbonTabs>
</Ribbon>

<Paragraph Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary">
    Font: @fontFamily, @fontSize pt. Style: @selectedStyle. Color: @textColor.
</Paragraph>
<Paragraph TextWeight="@(bold ? TextWeight.Bold : TextWeight.Normal)" Italic="@italic" TextDecoration="@(underline ? TextDecoration.Underline : TextDecoration.None)">
    Formatting controls can share the same ribbon rows as ordinary Blazorise inputs.
</Paragraph>

@code {
    private string fontFamily = "Calibri";

    private int fontSize = 16;

    private bool bold;

    private bool italic;

    private bool underline;

    private string textColor = "#212121";

    private string selectedStyle = "normal";
}

For a color command, bind Value to keep its swatch or icon indicator in sync with the document. Use Text to name the command and ChildContent when it needs a custom preview. Color commands follow the same sizes as other ribbon commands.

Colors

To give users useful color choices without defining them yourself, use the default Extended palette or choose Simple or Standard through PalettePreset. Try switching presets below, then open Font color to compare them. More Colors opens the full picker for a custom shade; No Color clears the binding.

Clipboard

Font

Brand

Choose a preset, use Automatic for the document's default, or open More Colors for a custom shade.

<Ribbon SelectedTab="home" ShowCollapseButton="false" Border="Border.Is1.Rounded">
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard">
                <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Font" Layout="RibbonGroupLayout.Rows">
                <RibbonRow>
                    <Select TValue="RibbonColorPalette" @bind-Value="@palettePreset" Size="Size.Small" Width="Width.Rem( 8 )" aria-label="Color palette">
                        <SelectItem Value="RibbonColorPalette.Simple">Simple</SelectItem>
                        <SelectItem Value="RibbonColorPalette.Standard">Standard</SelectItem>
                        <SelectItem Value="RibbonColorPalette.Extended">Extended</SelectItem>
                    </Select>
                    <RibbonColorPicker Text="Font color" Icon="IconName.Palette" Size="RibbonItemSize.Small" @bind-Value="@fontColor" PalettePreset="@palettePreset" ShowAutomatic AutomaticClicked="@OnAutomaticColorHandler" />
                </RibbonRow>
                <RibbonRow>
                    <RibbonToggleButton Text="Bold" Icon="IconName.Bold" Size="RibbonItemSize.Small" @bind-Checked="@bold" />
                    <RibbonToggleButton Text="Italic" Icon="IconName.Italic" Size="RibbonItemSize.Small" @bind-Checked="@italic" />
                    <RibbonButton Text="Clear formatting" Icon="IconName.RemoveFormat" />
                </RibbonRow>
            </RibbonGroup>
            <RibbonGroup Text="Brand">
                <RibbonColorPicker Text="Brand color" Size="RibbonItemSize.Large" @bind-Value="@brandColor" Palette="@brandColors" PaletteText="Brand Colors" PaletteColumns="5" ShowNoColor="false" />
            </RibbonGroup>
        </RibbonTab>
    </RibbonTabs>
</Ribbon>

<Paragraph Margin="Margin.Is3.FromTop" TextColor="@(string.IsNullOrEmpty( fontColor ) ? TextColor.Body : new TextColor( fontColor ))" TextWeight="@(bold ? TextWeight.Bold : TextWeight.Normal)" Italic="@italic">
    Choose a preset, use Automatic for the document's default, or open More Colors for a custom shade.
</Paragraph>

@code {
    private readonly string[] brandColors =
    [
        "#4472C4", "#ED7D31", "#70AD47", "#A5A5A5", "#7030A0",
    ];

    private RibbonColorPalette palettePreset = RibbonColorPalette.Extended;

    private string fontColor = "#212121";

    private string brandColor = "#4472C4";

    private bool bold;

    private bool italic;

    private void OnAutomaticColorHandler() => fontColor = "#212121";
}

When a command needs specific colors, supply Palette, as Brand color does here. Those colors replace the preset; StandardPalette can add a second section. Use PaletteColumns to arrange the grid and PaletteText to label it. When a command should always have a color, hide No Color with ShowNoColor="false", as Brand color does here. Handle AutomaticClicked when the document has its own default color, or set HideAfterPaletteSelect="false" to keep the menu open while trying colors.

Layout

A full ribbon works well for grouped editing tools, but users may want more room for their document. Let them switch DisplayMode or collapse the commands to keep the workspace clear. Enable table tools to reveal commands for the selected table.

Show table tools

Collapse ribbon

Clipboard

Paragraph

Editing

Color

Selected tab: home. Switch layouts or enable the contextual tab.

<Div Flex="Flex.Row.Wrap.AlignItems.Center" Gap="Gap.Is3" Margin="Margin.Is3.FromBottom">
    <Select TValue="RibbonDisplayMode" @bind-Value="@displayMode" Width="Width.Rem( 12 )" aria-label="Ribbon layout">
        <SelectItem Value="RibbonDisplayMode.Classic">Classic</SelectItem>
        <SelectItem Value="RibbonDisplayMode.Simplified">Simplified</SelectItem>
    </Select>
    <Switch TValue="bool" @bind-Value="@showTableTools">Show table tools</Switch>
    <Switch TValue="bool" @bind-Value="@collapsed">Collapse ribbon</Switch>
</Div>

<Ribbon @bind-SelectedTab="@selectedTab" @bind-Collapsed="@collapsed" DisplayMode="@displayMode" ActiveContextualGroups="@ActiveContextualGroups" Border="Border.Is1.Rounded">
    <TabStripToolbar>
        <RibbonDropdown Text="Share" Icon="IconName.ShareAlt" Size="RibbonItemSize.Medium">
            <RibbonDropdownItem Text="Share document" Clicked="@OnShareHandler" />
            <RibbonDropdownItem Text="Copy link" Clicked="@OnCopyLinkHandler" />
        </RibbonDropdown>
    </TabStripToolbar>
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard">
                <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" Clicked="@OnPasteHandler" />
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" Clicked="@OnCutHandler" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" Clicked="@OnCopyHandler" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Paragraph">
                <RibbonButton Text="Align left" Icon="IconName.AlignLeft" Size="RibbonItemSize.Large" Clicked="@OnAlignLeftHandler" />
                <RibbonColumn>
                    <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                    <RibbonButton Text="Align right" Icon="IconName.AlignRight" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Editing">
                <RibbonColumn>
                    <RibbonButton Text="Find" Icon="IconName.Search" />
                    <RibbonButton Text="Replace" Icon="IconName.Sync" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Color">
                <RibbonColorPicker Text="Highlight" Icon="IconName.Highlighter" Size="RibbonItemSize.Large" @bind-Value="@highlightColor" />
            </RibbonGroup>
        </RibbonTab>
        <RibbonContextualTabs Name="table">
            <RibbonTab Name="table" Text="Table Layout">
                <RibbonGroup Text="Rows and Columns">
                    <RibbonColumn>
                        <RibbonButton Text="Insert row" Icon="IconName.Plus" Clicked="@OnInsertRowHandler" />
                        <RibbonButton Text="Insert column" Icon="IconName.Add" />
                        <RibbonButton Text="Delete table" Icon="IconName.Delete" Clicked="@OnDeleteTableHandler" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Merge">
                    <RibbonButton Text="Merge cells" Icon="IconName.Table" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Split cells" Icon="IconName.BorderAll" Size="RibbonItemSize.Large" />
                </RibbonGroup>
                <RibbonGroup Text="Alignment">
                    <RibbonColumn>
                        <RibbonButton Text="Align top" Icon="IconName.ArrowUp" />
                        <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                        <RibbonButton Text="Align bottom" Icon="IconName.ArrowDown" />
                    </RibbonColumn>
                </RibbonGroup>
            </RibbonTab>
        </RibbonContextualTabs>
    </RibbonTabs>
</Ribbon>

<Paragraph Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary">
    Selected tab: @selectedTab. @status
</Paragraph>

@code {
    private RibbonDisplayMode displayMode;

    private string selectedTab = "home";

    private string highlightColor = "#ffff00";

    private bool showTableTools;

    private bool collapsed;

    private string status = "Switch layouts or enable the contextual tab.";

    private void OnShareHandler()
    {
        status = "Share document selected.";
    }

    private void OnCopyLinkHandler()
    {
        status = "Copy link selected.";
    }

    private void OnPasteHandler()
    {
        status = "Paste selected.";
    }

    private void OnCutHandler()
    {
        status = "Cut selected.";
    }

    private void OnCopyHandler()
    {
        status = "Copy selected.";
    }

    private void OnAlignLeftHandler()
    {
        status = "Align left selected.";
    }

    private void OnInsertRowHandler()
    {
        status = "Insert row selected.";
    }

    private void OnDeleteTableHandler()
    {
        showTableTools = false;
    }

    private IReadOnlyList<string> ActiveContextualGroups => showTableTools ? ["table"] : [];
}

Toolbars

When commands such as Save or Share should stay within reach across every tab, place them outside RibbonTabs. Use QuickAccessToolbar for the toolbar above the tabs and TabStripToolbar for commands beside the tab headings. Switch tabs or collapse the ribbon to see both strips stay available.

Clipboard

Editing

Try the toolbar commands, then switch tabs or collapse the ribbon.

<Ribbon @bind-SelectedTab="@selectedTab" Border="Border.Is1.Rounded">
    <QuickAccessToolbar>
        <RibbonButton Text="Save" Icon="IconName.Save" Size="RibbonItemSize.Small" Clicked="@OnSaveHandler" />
        <RibbonButton Text="Undo" Icon="IconName.Undo" Size="RibbonItemSize.Small" Clicked="@OnUndoHandler" />
        <RibbonButton Text="Redo" Icon="IconName.Redo" Size="RibbonItemSize.Small" Clicked="@OnRedoHandler" />
    </QuickAccessToolbar>
    <TabStripToolbar>
        <RibbonButton Text="Comments" Icon="IconName.Comment" Clicked="@OnCommentsHandler" />
        <RibbonDropdown Text="Share" Icon="IconName.ShareAlt" Size="RibbonItemSize.Medium">
            <RibbonDropdownItem Text="Share document" Clicked="@OnShareHandler" />
            <RibbonDropdownItem Text="Copy link" Clicked="@OnCopyLinkHandler" />
        </RibbonDropdown>
    </TabStripToolbar>
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard">
                <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" />
                    <RibbonButton Text="Format Painter" Icon="IconName.PaintBrush" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Editing">
                <RibbonColumn>
                    <RibbonButton Text="Find" Icon="IconName.Search" />
                    <RibbonButton Text="Replace" Icon="IconName.Sync" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
        <RibbonTab Name="insert" Text="Insert">
            <RibbonGroup Text="Illustrations">
                <RibbonButton Text="Picture" Icon="IconName.Image" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Chart" Icon="IconName.ChartBar" />
                    <RibbonButton Text="Screenshot" Icon="IconName.Camera" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Links">
                <RibbonButton Text="Link" Icon="IconName.Link" Size="RibbonItemSize.Large" />
                <RibbonButton Text="Bookmark" Icon="IconName.Bookmark" />
            </RibbonGroup>
        </RibbonTab>
    </RibbonTabs>
</Ribbon>

<Paragraph Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary">
    @status
</Paragraph>

@code {
    private string selectedTab = "home";

    private string status = "Try the toolbar commands, then switch tabs or collapse the ribbon.";

    private void OnSaveHandler()
    {
        status = "Save selected.";
    }

    private void OnUndoHandler()
    {
        status = "Undo selected.";
    }

    private void OnRedoHandler()
    {
        status = "Redo selected.";
    }

    private void OnCommentsHandler()
    {
        status = "Comments selected.";
    }

    private void OnShareHandler()
    {
        status = "Share document selected.";
    }

    private void OnCopyLinkHandler()
    {
        status = "Copy link selected.";
    }
}

Contextual tabs

When selecting an object should reveal several tabs, place them in a named RibbonContextualTabs group. Bind ActiveContextualGroups to your editor's selection and enable SelectOnShow to open its first tab automatically. The switches use declarative state; Clear contexts demonstrates imperative updates to the same binding.

Table selected

Picture selected

Clipboard

Paragraph

<Div Flex="Flex.Row.Wrap.AlignItems.Center" Gap="Gap.Is3" Margin="Margin.Is3.FromBottom">
    <Switch TValue="bool" Value="@activeContextualGroups.Contains( "table" )" ValueChanged="@OnTableSelectionChangedHandler">Table selected</Switch>
    <Switch TValue="bool" Value="@activeContextualGroups.Contains( "picture" )" ValueChanged="@OnPictureSelectionChangedHandler">Picture selected</Switch>
    <Select TValue="Color" @bind-Value="@contextualColor" Width="Width.Rem( 9 )" aria-label="Table tools color">
        <SelectItem Value="Color.Primary">Primary</SelectItem>
        <SelectItem Value="Color.Success">Success</SelectItem>
        <SelectItem Value="Color.Danger">Danger</SelectItem>
    </Select>
    <Button Ghost Color="Color.Secondary" Clicked="@OnClearContextsHandler">Clear contexts</Button>
</Div>

<Ribbon @ref="@ribbonRef" @bind-SelectedTab="@selectedTab" @bind-ActiveContextualGroups="@activeContextualGroups" Border="Border.Is1.Rounded" ShowCollapseButton="false">
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard">
                <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" />
                    <RibbonButton Text="Format Painter" Icon="IconName.PaintBrush" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Paragraph">
                <RibbonButton Text="Align left" Icon="IconName.AlignLeft" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                    <RibbonButton Text="Align right" Icon="IconName.AlignRight" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
        <RibbonContextualTabs Name="table" Color="@contextualColor" SelectOnShow>
            <RibbonTab Name="table-design" Text="Table Design">
                <RibbonGroup Text="Table Style Options">
                    <RibbonColumn>
                        <RibbonToggleButton Text="Header Row" Icon="IconName.Table" @bind-Checked="@showHeaderRow" />
                        <RibbonToggleButton Text="Banded Rows" Icon="IconName.ListUl" @bind-Checked="@bandedRows" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Borders">
                    <RibbonDropdown Text="Borders" Icon="IconName.BorderAll" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="All borders" />
                        <RibbonDropdownItem Text="Outside borders" />
                        <RibbonDropdownItem Text="No borders" />
                    </RibbonDropdown>
                    <RibbonButton Text="Shading" Icon="IconName.PaintBrush" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Draw borders" Icon="IconName.Edit" />
                </RibbonGroup>
            </RibbonTab>
            <RibbonTab Name="table-layout" Text="Table Layout">
                <RibbonGroup Text="Rows and Columns">
                    <RibbonColumn>
                        <RibbonButton Text="Insert Above" Icon="IconName.ArrowUp" />
                        <RibbonButton Text="Insert Below" Icon="IconName.ArrowDown" />
                        <RibbonButton Text="Delete row" Icon="IconName.Delete" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Merge">
                    <RibbonButton Text="Merge Cells" Icon="IconName.Table" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Split Cells" Icon="IconName.BorderAll" Size="RibbonItemSize.Large" />
                </RibbonGroup>
                <RibbonGroup Text="Alignment">
                    <RibbonColumn>
                        <RibbonButton Text="Align top" Icon="IconName.ArrowUp" />
                        <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                        <RibbonButton Text="Align bottom" Icon="IconName.ArrowDown" />
                    </RibbonColumn>
                </RibbonGroup>
            </RibbonTab>
        </RibbonContextualTabs>
        <RibbonContextualTabs Name="picture" Color="Color.Success" SelectOnShow>
            <RibbonTab Name="picture-format" Text="Picture Format">
                <RibbonGroup Text="Picture">
                    <RibbonButton Text="Crop" Icon="IconName.Crop" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Rotate" Icon="IconName.Sync" Size="RibbonItemSize.Large" />
                </RibbonGroup>
                <RibbonGroup Text="Adjust">
                    <RibbonColumn>
                        <RibbonButton Text="Change picture" Icon="IconName.Image" />
                        <RibbonButton Text="Reset picture" Icon="IconName.Sync" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Arrange">
                    <RibbonColumn>
                        <RibbonButton Text="Bring forward" Icon="IconName.ArrowUp" />
                        <RibbonButton Text="Send backward" Icon="IconName.ArrowDown" />
                    </RibbonColumn>
                </RibbonGroup>
            </RibbonTab>
        </RibbonContextualTabs>
    </RibbonTabs>
</Ribbon>

@code {
    private Blazorise.Ribbon.Ribbon ribbonRef;

    private string selectedTab = "home";

    private IReadOnlyList<string> activeContextualGroups = ["table"];

    private Color contextualColor = Color.Primary;

    private bool showHeaderRow = true;

    private bool bandedRows;

    private void OnTableSelectionChangedHandler( bool selected ) => SetContextActive( "table", selected );

    private void OnPictureSelectionChangedHandler( bool selected ) => SetContextActive( "picture", selected );

    private Task OnClearContextsHandler() => ribbonRef.SetActiveContextualGroups();

    private void SetContextActive( string name, bool active )
    {
        var groups = activeContextualGroups.Where( group => group != name );

        activeContextualGroups = active
            ? groups.Append( name ).ToArray()
            : groups.ToArray();
    }
}

File menu

When file commands only need a compact menu, add RibbonApplicationMenu inside ApplicationTab. Group actions such as New, Open, and Print there, and nest menu items when a command needs more choices, as Save As does in this example.

Clipboard

Paragraph

Editing

Project notes

Quarterly planning document

Review the team's progress, collect feedback, and outline the priorities for the next release.

Next steps

Confirm the timeline and share the updated plan with the team.

Open File, then Save As to explore nested menus.

<Ribbon SelectedTab="home" ShowCollapseButton="false" Border="Border.Is1.Rounded">
    <ApplicationTab>
        <RibbonApplicationMenu Text="File">
            <RibbonApplicationMenuItem Text="New" Icon="IconName.File" Clicked="@OnNewHandler" />
            <RibbonApplicationMenuItem Text="Open" Icon="IconName.FolderOpen" Clicked="@OnOpenHandler" />
            <RibbonApplicationMenuItem Text="Save As" Icon="IconName.Save">
                <RibbonApplicationMenuItem Text="Word document" Clicked="@OnSaveWordHandler" />
                <RibbonApplicationMenuItem Text="PDF" Clicked="@OnSavePdfHandler" />
                <RibbonApplicationMenuDivider />
                <RibbonApplicationMenuItem Text="Other formats">
                    <RibbonApplicationMenuItem Text="Plain text" Clicked="@OnSaveTextHandler" />
                </RibbonApplicationMenuItem>
            </RibbonApplicationMenuItem>
            <RibbonApplicationMenuDivider />
            <RibbonApplicationMenuItem Text="Print" Icon="IconName.Print" Clicked="@OnPrintHandler" />
        </RibbonApplicationMenu>
    </ApplicationTab>
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard">
                <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" Clicked="@OnCopyHandler" />
                    <RibbonButton Text="Format Painter" Icon="IconName.PaintBrush" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Paragraph">
                <RibbonButton Text="Align left" Icon="IconName.AlignLeft" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                    <RibbonButton Text="Align right" Icon="IconName.AlignRight" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Editing">
                <RibbonColumn>
                    <RibbonButton Text="Find" Icon="IconName.Search" />
                    <RibbonButton Text="Replace" Icon="IconName.Sync" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
    </RibbonTabs>
</Ribbon>

<Div Background="Background.Light" Padding="Padding.Is3" Margin="Margin.Is2.FromTop">
    <Div Background="Background.White" Border="Border.Is1" Padding="Padding.Is4" Height="Height.Rem().Min( 16 )">
        <Heading Size="HeadingSize.Is4">Project notes</Heading>
        <Paragraph TextColor="TextColor.Secondary">Quarterly planning document</Paragraph>
        <Paragraph>
            Review the team's progress, collect feedback, and outline the priorities for the next release.
        </Paragraph>
        <Heading Size="HeadingSize.Is5">Next steps</Heading>
        <Paragraph>Confirm the timeline and share the updated plan with the team.</Paragraph>
    </Div>
</Div>

<Paragraph Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary">
    @status
</Paragraph>

@code {
    private string status = "Open File, then Save As to explore nested menus.";

    private void OnNewHandler()
    {
        status = "New document selected.";
    }

    private void OnOpenHandler()
    {
        status = "Open document selected.";
    }

    private void OnSaveWordHandler()
    {
        status = "Save as Word document selected.";
    }

    private void OnSavePdfHandler()
    {
        status = "Save as PDF selected.";
    }

    private void OnSaveTextHandler()
    {
        status = "Save as plain text selected.";
    }

    private void OnPrintHandler()
    {
        status = "Print selected.";
    }

    private void OnCopyHandler()
    {
        status = "Copy selected.";
    }
}

Backstage

Use RibbonWorkspace to connect the application button and backstage automatically. Backstage overlays the document while preserving its content. Bind BackstageVisible on the workspace when the application needs to control visibility.

Clipboard

Paragraph

Editing

Quarterly report

Open File to view document information or choose a save format.

The document workspace is visible.

<RibbonWorkspace Border="Border.Is1.Rounded" Height="Height.Rem( 24 )">
    <Ribbon SelectedTab="home" ShowCollapseButton="false">
        <ApplicationTab>
            <RibbonApplicationButton Text="File" />
        </ApplicationTab>
        <RibbonTabs>
            <RibbonTab Name="home" Text="Home">
                <RibbonGroup Text="Clipboard">
                    <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" />
                    <RibbonColumn>
                        <RibbonButton Text="Cut" Icon="IconName.Cut" />
                        <RibbonButton Text="Copy" Icon="IconName.Copy" Clicked="@OnCopyHandler" />
                        <RibbonButton Text="Format Painter" Icon="IconName.PaintBrush" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Paragraph">
                    <RibbonButton Text="Align left" Icon="IconName.AlignLeft" Size="RibbonItemSize.Large" />
                    <RibbonColumn>
                        <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                        <RibbonButton Text="Align right" Icon="IconName.AlignRight" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Editing">
                    <RibbonColumn>
                        <RibbonButton Text="Find" Icon="IconName.Search" />
                        <RibbonButton Text="Replace" Icon="IconName.Sync" />
                    </RibbonColumn>
                </RibbonGroup>
            </RibbonTab>
        </RibbonTabs>
    </Ribbon>
    <Div Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is4">Quarterly report</Heading>
        <Paragraph>Open File to view document information or choose a save format.</Paragraph>
        <MemoInput @bind-Value="@documentText" Rows="3" aria-label="Document text" />
    </Div>
    <RibbonBackstage @ref="@backstageRef" @bind-SelectedItem="@selectedItem">
        <RibbonBackstageItem Name="info" Text="Info" Icon="IconName.InfoCircle">
            <Heading Size="HeadingSize.Is4">Document information</Heading>
            <Paragraph>Quarterly report</Paragraph>
            <Paragraph TextColor="TextColor.Secondary">Author: Alex Morgan. Status: Ready for review.</Paragraph>
        </RibbonBackstageItem>
        <RibbonBackstageItem Name="save-as" Text="Save As" Icon="IconName.Save">
            <Heading Size="HeadingSize.Is4">Save a copy</Heading>
            <Div Flex="Flex.Row.Wrap" Gap="Gap.Is2">
                <Button Color="Color.Primary" Clicked="@OnSaveWordHandler">Word document</Button>
                <Button Color="Color.Secondary" Clicked="@OnSavePdfHandler">PDF</Button>
            </Div>
        </RibbonBackstageItem>
        <RibbonBackstageItem Name="save" Text="Save" Icon="IconName.Save" Clicked="@OnSaveHandler" />
    </RibbonBackstage>
</RibbonWorkspace>

<Paragraph Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary">
    @status
</Paragraph>

@code {
    private RibbonBackstage backstageRef;

    private string selectedItem = "info";

    private string documentText = "Edit this document, then open and close File. Your content stays in place.";

    private string status = "The document workspace is visible.";

    private void OnCopyHandler()
    {
        status = "Copy selected.";
    }

    private async Task OnSaveHandler()
    {
        status = "Save command selected.";

        await backstageRef.Hide();
    }

    private async Task OnSaveWordHandler()
    {
        status = "Save as Word document selected.";

        await backstageRef.Hide();
    }

    private async Task OnSavePdfHandler()
    {
        status = "Save as PDF selected.";

        await backstageRef.Hide();
    }
}

Standalone backstage

Without a workspace, bind the application button's Expanded and backstage's Visible to the same Boolean. Place backstage in a positioned container, or set Fullscreen to cover the viewport. Optionally connect the button and backstage using aria-controls and ElementId.

Clipboard

Document title

Change the title, then open and close File. The editor remains mounted beneath backstage.

<Div Position="Position.Relative" Height="Height.Rem( 24 )" Border="Border.Is1.Rounded">
    <Ribbon SelectedTab="home" ShowCollapseButton="false">
        <ApplicationTab>
            <RibbonApplicationButton Text="File" @bind-Expanded="@backstageVisible" aria-controls="standalone-ribbon-backstage" />
        </ApplicationTab>
        <RibbonTabs>
            <RibbonTab Name="home" Text="Home">
                <RibbonGroup Text="Clipboard">
                    <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" />
                </RibbonGroup>
            </RibbonTab>
        </RibbonTabs>
    </Ribbon>

    <Div Padding="Padding.Is4">
        <Field>
            <FieldLabel>Document title</FieldLabel>
            <TextInput @bind-Value="@documentTitle" />
        </Field>
        <Paragraph>Change the title, then open and close File. The editor remains mounted beneath backstage.</Paragraph>
    </Div>

    <RibbonBackstage ElementId="standalone-ribbon-backstage" @bind-Visible="@backstageVisible">
        <RibbonBackstageItem Name="info" Text="Info" Icon="IconName.InfoCircle">
            <Heading Size="HeadingSize.Is4">Document information</Heading>
            <Paragraph>@documentTitle</Paragraph>
        </RibbonBackstageItem>
    </RibbonBackstage>
</Div>

@code {
    private bool backstageVisible;

    private string documentTitle = "Quarterly report";
}

Animation

To help users follow a change of tab, enable Animated and let the command panel slide in from the direction of the new selection. Try moving between Home, Insert, and View in either direction; adjust AnimationDuration to change the pace.

Clipboard

Paragraph

Editing

Switch tabs in either direction.

<Ribbon @bind-SelectedTab="@selectedTab" Animated AnimationDuration="200" Border="Border.Is1.Rounded">
    <RibbonTabs>
        <RibbonTab Name="home" Text="Home">
            <RibbonGroup Text="Clipboard">
                <RibbonButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large" Clicked="@OnPasteHandler" />
                <RibbonColumn>
                    <RibbonButton Text="Cut" Icon="IconName.Cut" />
                    <RibbonButton Text="Copy" Icon="IconName.Copy" />
                    <RibbonButton Text="Format Painter" Icon="IconName.PaintBrush" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Paragraph">
                <RibbonButton Text="Align left" Icon="IconName.AlignLeft" Size="RibbonItemSize.Large" />
                <RibbonColumn>
                    <RibbonButton Text="Center" Icon="IconName.AlignCenter" />
                    <RibbonButton Text="Align right" Icon="IconName.AlignRight" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Editing">
                <RibbonColumn>
                    <RibbonButton Text="Find" Icon="IconName.Search" />
                    <RibbonButton Text="Replace" Icon="IconName.Sync" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
        <RibbonTab Name="insert" Text="Insert">
            <RibbonGroup Text="Illustrations">
                <RibbonButton Text="Picture" Icon="IconName.Image" Size="RibbonItemSize.Large" Clicked="@OnPictureHandler" />
                <RibbonColumn>
                    <RibbonButton Text="Chart" Icon="IconName.ChartBar" />
                    <RibbonButton Text="Screenshot" Icon="IconName.Camera" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Tables">
                <RibbonButton Text="Table" Icon="IconName.Table" Size="RibbonItemSize.Large" />
            </RibbonGroup>
            <RibbonGroup Text="Links">
                <RibbonColumn>
                    <RibbonButton Text="Link" Icon="IconName.Link" />
                    <RibbonButton Text="Bookmark" Icon="IconName.Bookmark" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
        <RibbonTab Name="view" Text="View">
            <RibbonGroup Text="Views">
                <RibbonButton Text="Print layout" Icon="IconName.Print" Size="RibbonItemSize.Large" />
                <RibbonButton Text="Web layout" Icon="IconName.Globe" Size="RibbonItemSize.Large" />
            </RibbonGroup>
            <RibbonGroup Text="Zoom">
                <RibbonButton Text="Zoom in" Icon="IconName.SearchPlus" Size="RibbonItemSize.Large" Clicked="@OnZoomHandler" />
                <RibbonColumn>
                    <RibbonButton Text="Zoom out" Icon="IconName.SearchMinus" />
                    <RibbonButton Text="100%" Icon="IconName.Search" />
                </RibbonColumn>
            </RibbonGroup>
            <RibbonGroup Text="Window">
                <RibbonColumn>
                    <RibbonButton Text="New window" Icon="IconName.Copy" />
                    <RibbonButton Text="Reset view" Icon="IconName.Sync" />
                </RibbonColumn>
            </RibbonGroup>
        </RibbonTab>
    </RibbonTabs>
</Ribbon>

<Paragraph Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary">
    Switch tabs in either direction. @status
</Paragraph>

@code {
    private string selectedTab = "home";

    private string status;

    private void OnPasteHandler()
    {
        status = "Paste selected.";
    }

    private void OnPictureHandler()
    {
        status = "Picture selected.";
    }

    private void OnZoomHandler()
    {
        status = "Zoom in selected.";
    }
}

Rendering

If your tabs contain expensive content, choose a RenderMode that avoids creating every panel up front. Use LazyLoad when visited panels should keep their state, or LazyReload when only the active panel should exist. The ribbon creates all panels by default; backstage uses lazy loading.

Word ribbon

For a document editor, bring the previous patterns together around a document workspace. This example keeps editing tools on Home and gives insertion, layout, review, and viewing tasks their own tabs. Explore the File menu and control states to see the complete UI; command buttons leave the sample document unchanged.

AutoSave

Quarterly report

Clipboard

Font

Paragraph

Styles

Editing

Voice

Quarterly report

Prepared by Alex Morgan · June 2026

Executive overview

This quarter, the team expanded the product range and improved the customer onboarding experience. The next phase focuses on strengthening partnerships and preparing for the autumn launch.

Next steps

Finalize the release plan, review customer feedback, and schedule the next project milestone.

Page 1 of 1 English · 100%

<Div Border="Border.Is1.Rounded" Background="Background.Light">
    <Ribbon @bind-SelectedTab="@selectedTab" DisplayMode="@displayMode" Background="Background.White" Label="Word document commands">
        <QuickAccessToolbar>
            <Icon Name="IconName.FileAlt" TextColor="TextColor.Primary" />
            <Switch TValue="bool" @bind-Value="@autoSave" Size="Size.Small">AutoSave</Switch>
            <RibbonButton Text="Save" Icon="IconName.Save" Size="RibbonItemSize.Small" />
            <RibbonButton Text="Undo" Icon="IconName.Undo" Size="RibbonItemSize.Small" />
            <RibbonButton Text="Redo" Icon="IconName.Redo" Size="RibbonItemSize.Small" />
            <Span Margin="Margin.Is3.FromStart" TextWeight="TextWeight.Bold">Quarterly report</Span>
        </QuickAccessToolbar>
        <ApplicationTab>
            <RibbonApplicationMenu Text="File">
                <RibbonApplicationMenuItem Text="New" Icon="IconName.File" />
                <RibbonApplicationMenuItem Text="Open" Icon="IconName.FolderOpen" />
                <RibbonApplicationMenuDivider />
                <RibbonApplicationMenuItem Text="Save" Icon="IconName.Save" />
                <RibbonApplicationMenuItem Text="Save As" Icon="IconName.Save">
                    <RibbonApplicationMenuItem Text="Word document (.docx)" />
                    <RibbonApplicationMenuItem Text="PDF (.pdf)" />
                    <RibbonApplicationMenuItem Text="Other formats">
                        <RibbonApplicationMenuItem Text="Plain text (.txt)" />
                        <RibbonApplicationMenuItem Text="OpenDocument (.odt)" />
                    </RibbonApplicationMenuItem>
                </RibbonApplicationMenuItem>
                <RibbonApplicationMenuDivider />
                <RibbonApplicationMenuItem Text="Print" Icon="IconName.Print" />
            </RibbonApplicationMenu>
        </ApplicationTab>
        <TabStripToolbar>
            <RibbonButton Text="Comments" Icon="IconName.Comment" Size="RibbonItemSize.Small" />
            <RibbonDropdown Text="Share" Icon="IconName.ShareAlt" Size="RibbonItemSize.Medium">
                <RibbonDropdownItem Text="Share document" />
                <RibbonDropdownItem Text="Copy link" />
            </RibbonDropdown>
        </TabStripToolbar>
        <RibbonTabs>
            <RibbonTab Name="home" Text="Home">
                <RibbonGroup Text="Clipboard">
                    <RibbonSplitButton Text="Paste" Icon="IconName.Paste" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="Keep source formatting" />
                        <RibbonDropdownItem Text="Merge formatting" />
                        <RibbonDropdownItem Text="Keep text only" />
                        <RibbonDropdownDivider />
                        <RibbonDropdownItem Text="Paste special…" />
                    </RibbonSplitButton>
                    <RibbonColumn>
                        <RibbonButton Text="Cut" Icon="IconName.Cut" />
                        <RibbonButton Text="Copy" Icon="IconName.Copy" />
                        <RibbonButton Text="Format Painter" Icon="IconName.PaintBrush" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Font" Layout="RibbonGroupLayout.Rows">
                    <RibbonRow>
                        <Select TValue="string" @bind-Value="@fontFamily" Size="Size.Small" Width="Width.Rem( 8 )" aria-label="Font family">
                            <SelectItem Value="@("Calibri")">Calibri</SelectItem>
                            <SelectItem Value="@("Arial")">Arial</SelectItem>
                            <SelectItem Value="@("Georgia")">Georgia</SelectItem>
                        </Select>
                        <Select TValue="int" @bind-Value="@fontSize" Size="Size.Small" Width="Width.Rem( 4 )" aria-label="Font size">
                            <SelectItem Value="11">11</SelectItem>
                            <SelectItem Value="12">12</SelectItem>
                            <SelectItem Value="16">16</SelectItem>
                            <SelectItem Value="24">24</SelectItem>
                        </Select>
                        <RibbonButton Text="Increase font size" Icon="IconName.Plus" Size="RibbonItemSize.Small" />
                        <RibbonButton Text="Decrease font size" Icon="IconName.Minus" Size="RibbonItemSize.Small" />
                    </RibbonRow>
                    <RibbonRow>
                        <RibbonToggleButton Text="Bold" Icon="IconName.Bold" Size="RibbonItemSize.Small" @bind-Checked="@bold" />
                        <RibbonToggleButton Text="Italic" Icon="IconName.Italic" Size="RibbonItemSize.Small" @bind-Checked="@italic" />
                        <RibbonToggleButton Text="Underline" Icon="IconName.Underline" Size="RibbonItemSize.Small" @bind-Checked="@underline" />
                        <RibbonToggleButton Text="Strikethrough" Icon="IconName.Strikethrough" Size="RibbonItemSize.Small" @bind-Checked="@strikethrough" />
                        <RibbonButton Text="Clear formatting" Icon="IconName.RemoveFormat" Size="RibbonItemSize.Small" />
                        <RibbonColorPicker @bind-Value="@highlightColor" Size="RibbonItemSize.Small" Text="Text highlight color" Icon="IconName.Highlighter" PalettePreset="RibbonColorPalette.Standard" PaletteText="Highlight colors" />
                        <RibbonColorPicker @bind-Value="@fontColor" Size="RibbonItemSize.Small" Text="Font color" Icon="IconName.Palette" ShowAutomatic AutomaticClicked="@OnAutomaticFontColorHandler" />
                    </RibbonRow>
                </RibbonGroup>
                <RibbonGroup Text="Paragraph" Layout="RibbonGroupLayout.Rows">
                    <RibbonRow>
                        <RibbonDropdown Text="Bullets" Icon="IconName.ListUl" Size="RibbonItemSize.Small">
                            <RibbonDropdownItem Text="Filled circle" />
                            <RibbonDropdownItem Text="Hollow circle" />
                            <RibbonDropdownItem Text="Square" />
                            <RibbonDropdownDivider />
                            <RibbonDropdownItem Text="Define new bullet…" />
                        </RibbonDropdown>
                        <RibbonDropdown Text="Numbering" Icon="IconName.ListOl" Size="RibbonItemSize.Small">
                            <RibbonDropdownItem Text="1, 2, 3" />
                            <RibbonDropdownItem Text="a, b, c" />
                            <RibbonDropdownItem Text="I, II, III" />
                        </RibbonDropdown>
                        <RibbonButton Text="Decrease indent" Icon="IconName.ArrowLeft" Size="RibbonItemSize.Small" />
                        <RibbonButton Text="Increase indent" Icon="IconName.Indent" Size="RibbonItemSize.Small" />
                        <RibbonToggleButton Text="Formatting marks" Size="RibbonItemSize.Small" @bind-Checked="@showFormattingMarks">¶</RibbonToggleButton>
                    </RibbonRow>
                    <RibbonRow>
                        <RibbonButton Text="Align left" Icon="IconName.AlignLeft" Size="RibbonItemSize.Small" />
                        <RibbonButton Text="Center" Icon="IconName.AlignCenter" Size="RibbonItemSize.Small" />
                        <RibbonButton Text="Align right" Icon="IconName.AlignRight" Size="RibbonItemSize.Small" />
                        <RibbonButton Text="Justify" Icon="IconName.AlignJustify" Size="RibbonItemSize.Small" />
                        <RibbonDropdown Text="Line spacing" Icon="IconName.TextHeight" Size="RibbonItemSize.Small">
                            <RibbonDropdownItem Text="1.0" />
                            <RibbonDropdownItem Text="1.5" />
                            <RibbonDropdownItem Text="2.0" />
                        </RibbonDropdown>
                    </RibbonRow>
                </RibbonGroup>
                <RibbonGroup Text="Styles">
                    <RibbonGallery Text="Document styles" @bind-SelectedValue="@selectedStyle">
                        <RibbonGalleryItem Value="normal" Text="Normal">
                            <Span>AaBbCc</Span>
                        </RibbonGalleryItem>
                        <RibbonGalleryItem Value="heading" Text="Heading 1">
                            <Span TextSize="TextSize.Large" TextColor="TextColor.Primary">AaBbCc</Span>
                        </RibbonGalleryItem>
                        <RibbonGalleryItem Value="title" Text="Title">
                            <Span TextSize="TextSize.ExtraLarge">AaBbCc</Span>
                        </RibbonGalleryItem>
                    </RibbonGallery>
                </RibbonGroup>
                <RibbonGroup Text="Editing">
                    <RibbonColumn>
                        <RibbonSplitButton Text="Find" Icon="IconName.Search">
                            <RibbonDropdownItem Text="Find" />
                            <RibbonDropdownItem Text="Advanced find…" />
                            <RibbonDropdownItem Text="Go to…" />
                        </RibbonSplitButton>
                        <RibbonButton Text="Replace" Icon="IconName.Sync" />
                        <RibbonDropdown Text="Select" Icon="IconName.Mouse">
                            <RibbonDropdownItem Text="Select all" />
                            <RibbonDropdownItem Text="Select objects" />
                        </RibbonDropdown>
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Voice">
                    <RibbonSplitButton Text="Dictate" Icon="IconName.Microphone" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="English" />
                        <RibbonDropdownItem Text="French" />
                        <RibbonDropdownItem Text="German" />
                    </RibbonSplitButton>
                </RibbonGroup>
            </RibbonTab>

            <RibbonTab Name="insert" Text="Insert">
                <RibbonGroup Text="Pages">
                    <RibbonDropdown Text="Cover Page" Icon="IconName.FileAlt" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="Blank cover" />
                        <RibbonDropdownItem Text="Business report" />
                    </RibbonDropdown>
                    <RibbonColumn>
                        <RibbonButton Text="Blank Page" Icon="IconName.File" />
                        <RibbonButton Text="Page Break" Icon="IconName.Copy" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Tables">
                    <RibbonDropdown Text="Table" Icon="IconName.Table" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="Insert table…" />
                        <RibbonDropdownItem Text="Draw table" />
                        <RibbonDropdownDivider />
                        <RibbonDropdownItem Text="Convert text to table…" />
                    </RibbonDropdown>
                </RibbonGroup>
                <RibbonGroup Text="Illustrations">
                    <RibbonDropdown Text="Pictures" Icon="IconName.Image" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="This device…" />
                        <RibbonDropdownItem Text="Stock images…" />
                        <RibbonDropdownItem Text="Online pictures…" />
                    </RibbonDropdown>
                    <RibbonColumn>
                        <RibbonDropdown Text="Shapes" Icon="IconName.Shapes">
                            <RibbonDropdownItem Text="Rectangle" />
                            <RibbonDropdownItem Text="Circle" />
                            <RibbonDropdownItem Text="Arrow" />
                        </RibbonDropdown>
                        <RibbonButton Text="Chart" Icon="IconName.ChartBar" />
                        <RibbonButton Text="Screenshot" Icon="IconName.Camera" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Links">
                    <RibbonButton Text="Link" Icon="IconName.Link" Size="RibbonItemSize.Large" />
                    <RibbonColumn>
                        <RibbonButton Text="Bookmark" Icon="IconName.Bookmark" />
                        <RibbonButton Text="Cross-reference" Icon="IconName.FileAlt" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Header and Footer">
                    <RibbonColumn>
                        <RibbonDropdown Text="Header" Icon="IconName.FileAlt">
                            <RibbonDropdownItem Text="Blank" />
                            <RibbonDropdownItem Text="Three columns" />
                        </RibbonDropdown>
                        <RibbonDropdown Text="Footer" Icon="IconName.FileAlt">
                            <RibbonDropdownItem Text="Blank" />
                            <RibbonDropdownItem Text="Page number" />
                        </RibbonDropdown>
                        <RibbonButton Text="Page Number" Icon="IconName.ListOl" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Comments">
                    <RibbonButton Text="Comment" Icon="IconName.Comment" Size="RibbonItemSize.Large" />
                </RibbonGroup>
            </RibbonTab>
            <RibbonTab Name="layout" Text="Layout">
                <RibbonGroup Text="Page Setup">
                    <RibbonDropdown Text="Margins" Icon="IconName.FileAlt" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="Normal" />
                        <RibbonDropdownItem Text="Narrow" />
                        <RibbonDropdownItem Text="Wide" />
                        <RibbonDropdownDivider />
                        <RibbonDropdownItem Text="Custom margins…" />
                    </RibbonDropdown>
                    <RibbonDropdown Text="Orientation" Icon="IconName.Sync" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="Portrait" />
                        <RibbonDropdownItem Text="Landscape" />
                    </RibbonDropdown>
                    <RibbonDropdown Text="Size" Icon="IconName.File" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="A4" />
                        <RibbonDropdownItem Text="Letter" />
                        <RibbonDropdownItem Text="Legal" />
                    </RibbonDropdown>
                    <RibbonColumn>
                        <RibbonDropdown Text="Columns" Icon="IconName.Table">
                            <RibbonDropdownItem Text="One" />
                            <RibbonDropdownItem Text="Two" />
                            <RibbonDropdownItem Text="Three" />
                        </RibbonDropdown>
                        <RibbonButton Text="Breaks" Icon="IconName.Copy" />
                        <RibbonButton Text="Line Numbers" Icon="IconName.ListOl" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Paragraph">
                    <RibbonColumn>
                        <RibbonButton Text="Indent Left" Icon="IconName.Indent" />
                        <RibbonButton Text="Indent Right" Icon="IconName.AlignRight" />
                        <RibbonButton Text="Spacing" Icon="IconName.TextHeight" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Arrange">
                    <RibbonButton Text="Position" Icon="IconName.Image" Size="RibbonItemSize.Large" />
                    <RibbonDropdown Text="Wrap Text" Icon="IconName.AlignLeft" Size="RibbonItemSize.Large">
                        <RibbonDropdownItem Text="In line with text" />
                        <RibbonDropdownItem Text="Square" />
                        <RibbonDropdownItem Text="Behind text" />
                    </RibbonDropdown>
                    <RibbonColumn>
                        <RibbonButton Text="Bring Forward" Icon="IconName.LayerGroup" />
                        <RibbonButton Text="Send Backward" Icon="IconName.Backward" />
                    </RibbonColumn>
                </RibbonGroup>
            </RibbonTab>
            <RibbonTab Name="review" Text="Review">
                <RibbonGroup Text="Proofing">
                    <RibbonButton Text="Editor" Icon="IconName.SpellCheck" Size="RibbonItemSize.Large" />
                    <RibbonColumn>
                        <RibbonButton Text="Thesaurus" Icon="IconName.Book" />
                        <RibbonButton Text="Word Count" Icon="IconName.ListOl" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Language">
                    <RibbonButton Text="Translate" Icon="IconName.Language" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Language" Icon="IconName.Globe" Size="RibbonItemSize.Large" />
                </RibbonGroup>
                <RibbonGroup Text="Comments">
                    <RibbonButton Text="New Comment" Icon="IconName.Comment" Size="RibbonItemSize.Large" />
                    <RibbonColumn>
                        <RibbonButton Text="Delete" Icon="IconName.Delete" />
                        <RibbonButton Text="Previous" Icon="IconName.ArrowLeft" />
                        <RibbonButton Text="Next" Icon="IconName.ArrowRight" />
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Tracking">
                    <RibbonToggleButton Text="Track Changes" Icon="IconName.Edit" Size="RibbonItemSize.Large" @bind-Checked="@trackChanges" />
                </RibbonGroup>
                <RibbonGroup Text="Protect">
                    <RibbonButton Text="Restrict Editing" Icon="IconName.Lock" Size="RibbonItemSize.Large" />
                </RibbonGroup>
            </RibbonTab>
            <RibbonTab Name="view" Text="View">
                <RibbonGroup Text="Views">
                    <RibbonButton Text="Read Mode" Icon="IconName.BookReader" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Print Layout" Icon="IconName.FileAlt" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Web Layout" Icon="IconName.Globe" Size="RibbonItemSize.Large" />
                </RibbonGroup>
                <RibbonGroup Text="Show">
                    <RibbonColumn>
                        <Check TValue="bool" @bind-Value="@showRuler" Size="Size.Small">Ruler</Check>
                        <Check TValue="bool" @bind-Value="@showGridlines" Size="Size.Small">Gridlines</Check>
                        <Check TValue="bool" @bind-Value="@showNavigation" Size="Size.Small">Navigation Pane</Check>
                    </RibbonColumn>
                </RibbonGroup>
                <RibbonGroup Text="Zoom">
                    <RibbonButton Text="Zoom In" Icon="IconName.SearchPlus" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="Zoom Out" Icon="IconName.SearchMinus" Size="RibbonItemSize.Large" />
                    <RibbonButton Text="100%" Icon="IconName.Search" Size="RibbonItemSize.Large" />
                </RibbonGroup>
                <RibbonGroup Text="Ribbon">
                    <Select TValue="RibbonDisplayMode" @bind-Value="@displayMode" Size="Size.Small" aria-label="Ribbon layout">
                        <SelectItem Value="RibbonDisplayMode.Classic">Classic</SelectItem>
                        <SelectItem Value="RibbonDisplayMode.Simplified">Simplified</SelectItem>
                    </Select>
                </RibbonGroup>
            </RibbonTab>
        </RibbonTabs>
    </Ribbon>
    <Div Padding="Padding.Is4">
        <Div Background="Background.White" Border="Border.Is1.Rounded" Padding="Padding.Is4" Height="Height.Rem().Min( 18 )">
            <Heading Size="HeadingSize.Is3">Quarterly report</Heading>
            <Paragraph TextColor="TextColor.Secondary">Prepared by Alex Morgan · June 2026</Paragraph>
            <Heading Size="HeadingSize.Is5">Executive overview</Heading>
            <Paragraph>
                This quarter, the team expanded the product range and improved the customer onboarding experience.
                The next phase focuses on strengthening partnerships and preparing for the autumn launch.
            </Paragraph>
            <Heading Size="HeadingSize.Is5">Next steps</Heading>
            <Paragraph>Finalize the release plan, review customer feedback, and schedule the next project milestone.</Paragraph>
        </Div>
        <Div Flex="Flex.Row.Wrap.JustifyContent.Between" Gap="Gap.Is2" Margin="Margin.Is2.FromTop" TextColor="TextColor.Secondary" TextSize="TextSize.Small">
            <Span>Page 1 of 1</Span>
            <Span>English · 100%</Span>
        </Div>
    </Div>
</Div>

@code {
    private string selectedTab = "home";

    private bool autoSave = true;

    private string fontFamily = "Calibri";

    private int fontSize = 11;

    private bool bold;

    private bool italic;

    private bool underline;

    private bool strikethrough;

    private bool showFormattingMarks;

    private string highlightColor = "#ffff00";

    private string fontColor = "#212121";

    private string selectedStyle = "normal";

    private bool trackChanges;

    private bool showRuler = true;

    private bool showGridlines;

    private bool showNavigation;

    private RibbonDisplayMode displayMode;

    private void OnAutomaticFontColorHandler() => fontColor = "#000000";
}

Blazorise Ribbon component

Installation

NuGet

Imports

Examples

Basics

Commands

Rows and columns

Formatting

Colors

Layout

Toolbars

Contextual tabs

File menu

Project notes

Next steps

Backstage

Quarterly report

Standalone backstage

Animation

Rendering

Word ribbon

Quarterly report

Executive overview

Next steps

API

On this page