Skip to main content
All docs
V25.1
  • DxRibbon Class

    A toolbar component that organizes command items into tabs and groups.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public class DxRibbon :
        DxComponentBase,
        INestedSettingsOwner

    Remarks

    The DevExpress Ribbon component for Blazor (<DxRibbon>) implements a tabbed toolbar UI metaphor (organizes command items into tabs and groups). This toolbar style simplifies user access to commands, helps you build compact page layouts, and improves overall user experience.

    Important

    The Ribbon component is currently available as a community technology preview (CTP).

    Navigation Landing Tab

    Run Demo

    Add a Ribbon to a Project

    Follow the steps below to add a Ribbon component to an application:

    1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
    2. Add the following markup to a .razor file:
      <DxRibbon>
          <DxRibbonTab Text="Tab Text">
              <DxRibbonGroup Text="Group Text">
                  <DxRibbonItem Text="Item Text" />
              </DxRibbonGroup>
          </DxRibbonTab>
      </DxRibbon>
      
    3. Extend initial markup to populate the ribbon with tabs, groups, and items. Specify their settings.
    4. Optional. Add an application tab to the ribbon.
    5. Handle item events to respond to user interactions with items.

    API Reference

    Refer to the following list for the component API reference: DxRibbon Members.

    Static Render Mode Specifics

    Blazor Ribbon component does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.

    Tabs

    The DxRibbonTab class implements the functionality of an individual tab displayed in the DxRibbon component. Use the Text property to specify the tab caption.

    Contextual Tabs

    Set a tab’s Contextual property to true to mark the tab as contextual. The DxRibbon component highlights contextual tabs and displays them after standard tabs.

    Contextual tabs appear on demand. For example, you can display a tab when a user selects an image or a table. Use the Visible property to manage tab visibility.

    <DxRibbon>
        <DxRibbonTab Text="Picture Format" Contextual="true" Visible="@PictureFormatVisible">...</DxRibbonTab>
        <DxRibbonTab Text="Table Design" Contextual="true" Visible="@TableDesignVisible">...</DxRibbonTab>
        <DxRibbonTab Text="Table Layout" Contextual="true" Visible="@TableLayoutVisible">...</DxRibbonTab>
        <DxRibbonTab Text="Home">...</DxRibbonTab>
        <DxRibbonTab Text="Insert">...</DxRibbonTab>
        ...
    </DxRibbon>
    
    <img src="/images/picture.png" @onfocus="@pictureHasFocus" @onblur="@pictureLostFocus" width="50px" tabindex="0" />
    <img src="/images/table.png" @onfocus="@tableHasFocus" @onblur="tableLostFocus" width="50px" tabindex="0" />
    
    @code {
        bool PictureFormatVisible { get; set; } = false;
        bool TableDesignVisible { get; set; } = false;
        bool TableLayoutVisible { get; set; } = false;
    
        public void pictureHasFocus(FocusEventArgs args) {
            PictureFormatVisible = true;
        }
        public void pictureLostFocus(FocusEventArgs args) {
            PictureFormatVisible = false;
        }
        public void tableHasFocus() {
            TableDesignVisible = true;
            TableLayoutVisible = true;
        }
        public void tableLostFocus(FocusEventArgs args) {
            TableDesignVisible = false;
            TableLayoutVisible = false;
        }
    }
    

    Ribbon Contextual Tabs

    Application Tab

    The DxRibbon component can contain an application tab that appears first. Commands associated with this tab appear in a dropdown menu. You can override this default behavior and write custom code that runs when a user clicks the tab.

    The DxRibbonApplicationTab class implements the functionality of the ribbon application tab. Use Text, IconCssClass, and IconUrl properties to specify the tab appearance. Handle the Click event to perform custom actions when a user clicks the tab.

    <DxRibbon >
        <DxRibbonApplicationTab Text="File" Click="@(() => IsFileMenuOpen = true)" />
        <DxRibbonTab Text="Home">...</DxRibbonTab>
        <DxRibbonTab Text="Insert">...</DxRibbonTab>
    </DxRibbon>
    
    @code {
        bool IsFileMenuOpen { get; set; } = false;
    }
    

    Populate the application tab’s child content with DxRibbonApplicationTabItem objects to display a drop-down menu when a user clicks the tab.

    <DxRibbon>
        <DxRibbonApplicationTab Text="File">
            <DxRibbonApplicationTabItem Text="New" 
                                        IconCssClass="rb-icon rb-icon-document-blank" 
                                        Click="@(() => ClickItem("New tab item"))" />
            <DxRibbonApplicationTabItem Text="Open" 
                                        IconCssClass="rb-icon rb-icon-folder-open" 
                                        Click="@(() => ClickItem("Open tab item"))" />
            <DxRibbonApplicationTabItem Text="Save as" 
                                        IconCssClass="rb-icon rb-icon-save" 
                                        Click="@(() => ClickItem("Save as tab item"))">
                <DxRibbonApplicationTabItem Text="Text file" 
                                            Click="@(() => ClickItem("Text file tab item"))"/>
                <DxRibbonApplicationTabItem Text="Word document" 
                                            Click="@(() => ClickItem("Word document tab item"))"/>
                <DxRibbonApplicationTabItem Text="Pdf file" 
                                            Click="@(() => ClickItem("Pdf file tab item"))"/>
            </DxRibbonApplicationTabItem>
            <DxRibbonApplicationTabItem Text="Share" 
                                        IconCssClass="rb-icon rb-icon-share" 
                                        Click="@(() => ClickItem("Share tab item"))" />
            <DxRibbonApplicationTabItem Text="Print" 
                                        IconCssClass="rb-icon rb-icon-print" 
                                        Click="@(() => ClickItem("Print tab item"))" />
        </DxRibbonApplicationTab>
        <DxRibbonTab Text="Home">...</DxRibbonTab>
        <DxRibbonTab Text="Insert">...</DxRibbonTab>
    </DxRibbon>
    

    Application Tab Items

    Run Demo

    Groups

    The DxRibbonGroup class implements the functionality of an individual item group displayed within a tab.

    When the ribbon’s width decreases, the component hides group items in a group drop-down menu. Once all items are hidden, Ribbon displays the group as a drop-down button. Use Text and IconCssClass properties to define the button’s text and icon.

    ...
    <DxRibbonGroup Text="Font Decoration">
        <DxRibbonColorPickerItem Text="Font color" @bind-Value="color">
            <IconTemplate>...</IconTemplate>
        </DxRibbonColorPickerItem>
        <DxRibbonItem IconCssClass="rb-icon rb-icon-bold" />
        <DxRibbonItem IconCssClass="rb-icon rb-icon-italic" />
        <DxRibbonItem IconCssClass="rb-icon rb-icon-underline" />
    </DxRibbonGroup>
    ...
    

    Ribbon with Adaptive Groups

    Items

    The DxRibbon component can display the following items:

    Ribbon item types

    Adaptivity

    The DxRibbon component supports adaptivity. Use the following properties to control the Ribbon’s response when the container width changes:

    AdaptivityAutoCollapseItemsToGroups
    Specifies whether the Ribbon collapses its items into groups when component width changes.
    AdaptivityAutoCollapseItemsToIcons
    Specifies whether the Ribbon hides item text and displays only icons when component width changes.
    AdaptivityAutoHideRootItems
    Specifies whether the Ribbon hides items when component width changes.

    Run Demo

    Troubleshooting

    If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

    See Also