Blazor | ComponentOne
Controls / Menu / Item Template
In This Topic
    Item Template
    In This Topic

    You can customize the Menu control by using special templates to render items and create your own view. These templates can be set by using the ItemTemplate property and can be used to specify custom content in the Menu.

    The following image shows the custom view of Menu created using ItemTemplates. 

    Item template in Menu

    To create a custom view using ItemTemplates, use the following code.

    Razor
    Copy Code
    @using C1.Blazor.Menu
    @using C1.Blazor.Input
    
    
    <C1Menu ItemsSource="@_dataSource" Class="default-menu"
            ChildItemsPaths="Subdirectories" DisplayMemberPaths="Name">
        <ItemTemplate>
            @if (context is C1MenuItem { DataItem: Hierarchical obj } item)
            {
                if (item.IsMaster)
                {
                    <span>@obj.Name</span>
                }
                else
                {
                    <span>
                        <b>@obj.Name</b>
                        <br>
                        <small><i>@obj.SubDescription</i></small>
                    </span>
                }
            }
        </ItemTemplate>
    </C1Menu>
    
    @code {
        readonly IList<Hierarchical> _dataSource = new List<Hierarchical>()
    {
            new Hierarchical ()
            {
                Name = "File",
                Subdirectories = new List<Hierarchical>
            {
                    new Hierarchical {
                        Name = "New",
                        SubDescription = "Create a new file"
                    },
                    new Hierarchical {
                        Name = "Open",
                        SubDescription = "Open an existing file"
                    },
                    new Hierarchical {
                        Name = "Save",
                        SubDescription = "Save the file"
                    },
                    new Hierarchical {
                        Name = "Exit",
                        SubDescription = "Exit the application"
                    }
                }
            }
        };
      
        public class Hierarchical
        {
            public string Name { get; set; }
            public List<Hierarchical> Subdirectories { get; set; }
            public string SubDescription { get; set; }
        }
    }