Rendering the Blazor Dropdown Menu Component Using Render Fragment

The Blazor Dropdown Menu component can be rendered using the render fragment approach, which allows for a flexible and dynamic way to define the content of the Dropdown Menu. This article provides a step-by-step guide on how to implement a Dropdown Button with menu items using the Syncfusion Blazor components.

Implementation

To create a Dropdown Button with DropDownMenuItems and its child DropDownMenuItem components, you need to pass them as a ChildContent attribute. Below is an example of how to achieve this:

Code Example

@using Syncfusion.Blazor.SplitButtons

@code {
    private RenderFragment? DropdownFragment => builder =>
    {
        builder.OpenComponent<SfDropDownButton>(0);
        builder.AddAttribute(1, "Content", "Export");
        builder.AddAttribute(2, "CssClass", "e-inherit");

        builder.AddAttribute(3, "ChildContent", (RenderFragment)(menuBuilder =>
        {
            menuBuilder.OpenComponent<DropDownMenuItems>(4);

            menuBuilder.AddAttribute(5, "ChildContent", (RenderFragment)(itemsBuilder =>
            {
                itemsBuilder.OpenComponent<DropDownMenuItem>(6);
                itemsBuilder.AddAttribute(7, "Text", "Excel");
                itemsBuilder.AddAttribute(8, "IconClass", "e-icons e-export-excel");
                itemsBuilder.CloseComponent();

                itemsBuilder.OpenComponent<DropDownMenuItem>(9);
                itemsBuilder.AddAttribute(10, "Text", "CSV");
                itemsBuilder.AddAttribute(11, "IconClass", "e-icons e-export-csv");
                itemsBuilder.CloseComponent();

                itemsBuilder.OpenComponent<DropDownMenuItem>(12);
                itemsBuilder.AddAttribute(13, "Text", "PDF");
                itemsBuilder.AddAttribute(14, "IconClass", "e-icons e-export-pdf");
                itemsBuilder.CloseComponent();
            }));

            menuBuilder.CloseComponent(); // Closing DropDownMenuItems
        }));

        builder.CloseComponent();  // SfDropDownButton
    };
}

<div>
    <h3>Dropdown Button RenderFragment</h3>
    @DropdownFragment
</div>

Sample link: https://blazorplayground.syncfusion.com/BZVSNKifhJrBUecr

Additional References

• Syncfusion Blazor Dropdown Menu Documentation
• GitHub Reference