DxMenuItem.Template Property

Specifies the template used to display the menu item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<IMenuItemInfo> Template { get; set; }

Property Value

Type	Description
RenderFragment<IMenuItemInfo>	The template content.

Remarks

This property overrides the DxMenu.ItemTemplate property’s value.

The following example demonstrates how to use templates to create the Search and User Profile menu items:

Razor

<DxMenu Orientation="Orientation.Horizontal"
@* ... *@
        SubMenuCssClass="menu-dropdown"
        SizeMode="@Params.SizeMode">
    <TitleTemplate>
        <div class="icon-logo" role="img" aria-label="@context"></div>
    </TitleTemplate>

    <Items>
        <DxMenuItem Text="Home" IconCssClass="menu-icon-home menu-icon">
            <Items>
                <DxMenuItem Text="News">
                    <Items>
                        <DxMenuItem Text="Explore our newest features" />
                        <DxMenuItem Text="Website news" />
                    </Items>
                </DxMenuItem>
                <DxMenuItem Text="Our Mission" />
                <DxMenuItem Text="Our Customers" />
            </Items>
        </DxMenuItem>
        <DxMenuItem Text="Components" IconCssClass="menu-icon-products menu-icon">
            <Items>
                <DxMenuItem Text="Blazor" />
                <DxMenuItem Text="ASP.NET MVC" />
                <DxMenuItem Text="ASP.NET Web Forms" />
                <DxMenuItem Text="ASP.NET Core" />
                <DxMenuItem Text="Bootstrap Web Forms" />
            </Items>
        </DxMenuItem>
        <DxMenuItem Text="Support" IconCssClass="menu-icon-support menu-icon">
            <Items>
                <DxMenuItem Text="Getting Started" />
                <DxMenuItem Text="Documentation" />
                <DxMenuItem Text="Support Center" />
                <DxMenuItem Text="Code Examples" />
                <DxMenuItem Text="Blogs" />
            </Items>
        </DxMenuItem>
        <DxMenuItem CssClass="search-menu-item" Position="ItemPosition.End">
            <Template>
                <SearchItem />
            </Template>
        </DxMenuItem>
        <DxMenuItem CssClass="notoggle" Position="ItemPosition.End">
            <TextTemplate>
                <div class="menu-icon-user-profile menu-icon" />
            </TextTemplate>
            <SubMenuTemplate>
                <div class="w-100 user-profile">
                    <div class="flex-column align-items-center justify-content-center">
                        <div class="logo-container d-flex align-items-center justify-content-center">
                            <div class="menu-icon-user-profile menu-icon menu-icon-large" />
                        </div>
                        <div class="user-name-container bm-3 mb-2">
                            <div class="tm-8 text-center">User Name</div>
                            <div class="text-center">John Heart</div>
                        </div>
                        <div class="d-flex justify-content-center log-off-btn">
                            <DxButton Text="Log Off" RenderStyle="@ButtonRenderStyle.Secondary"></DxButton>
                        </div>
                    </div>
                </div>
            </SubMenuTemplate>
        </DxMenuItem>
    </Items>
</DxMenu>

CSS

.dxbl-menu-item .search {
    min-width: 123px
}

.dxbl-menu-item-tmpl > .search {
    position: relative;
}

.user-profile .logo-container {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-profile .log-off-btn {
    padding-top: 0.815rem;
    padding-bottom: 0.815rem;
    border-top: 1px solid #e5e5e5;
}

.menu-icon-user-profile {
    opacity: 0.75;
}

.user-profile .menu-icon-user-profile {
    opacity: 0.25;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-name-container .tm-8 {
    opacity: 0.8;
}

SearchItem.razor

<div class="search @CssClass">
    <input type="text" class="form-control form-control-sm search-input" placeholder="Search..." aria-label="Search">
    <span class="search-button d-flex ps-2 pe-2 me-1">
        <span class="search-icon"></span>
    </span>
</div>

@code {
    [Parameter]
    public string CssClass { get; set; }
}

Run Demo: Menu - Templates