Is it possible to use my own image in a menu item?

[Nick]

I have some images in a project folder and would like to use them in place of the menu item.

[YuvanShankar Arunagiri]

Hi Nick,

We have checked your reported query and prepared the sample based on your requirement. please refer the below Demo link and code snippet. We can achieve your requirement by using the template feature or IconCss property of the menu item.

Demo link (for template approach): https://blazor.syncfusion.com/demos/menu-bar/templates?theme=fluent

[For IconCss approach]:

@using Syncfusion.Blazor.Navigations

 

<SfMenu TValue="MenuItem">

    <MenuItems>

        <MenuItem Text="File" IconCss="e-download-img"></MenuItem>

        <MenuItem Text="Edit" IconCss="e-download-img"></MenuItem>

        <MenuItem Text="Help"></MenuItem>

    </MenuItems>

</SfMenu>

 

<style>

    .e-download-img {

        background-image: url('./Images/download.png');

        background-repeat: no-repeat;

        width: 40px !important;

    }

</style>

Please get back to us, if you need any further assistance on this.  

Regards, 

YuvanShankar A

Attachment: BlazorTesting_f19805f0.zip

[Nick]

I am using it as a docked menu in a sidebar as shown here but I can't use it the way in your example

Attachment: SidebarTest_3e839813.zip

[YuvanShankar Arunagiri]

Hi Nick,

We have checked your reported query and prepared the sample based on your requirement. please refer the below code snippet and attached sample. We can achieve your requirement by using the template feature of the menu.

[MainLayout.razor]:

<SfMenu CssClass="dock-menu" TValue="MenuItem" Orientation="@VerOrientation" Items="MainMenuItems">

                            <MenuTemplates TValue="MenuItem">

                                <Template>

                                    @{

                                        var MenuItems = context;

                                        <div style="width: 100%;display: flex;justify-content: space-between;">

                                        @{

                                            if (MenuItems.Url != null)

                                            {

                                                <a rel='nofollow' href="@MenuItems.Url">

                                                    <img class="e-img" src="@MenuItems.IconCss" />

                                                </a>

                                            }

                                        }

                                        </div>

                                    }

                                </Template>

                            </MenuTemplates>

                        </SfMenu>

Please get back to us, if you need any further assistance on this.

  

Regards, 

YuvanShankar A

Attachment: SidebarTest_bacd796c.zip

[Nick]

How would I go about this if I want to use the inbuilt icons alongside my folder pictures as shown in the attached.

Also, the menu item only redirects if I click on the icon only. Is there a way to make the redirect work on the whole menu item instead of just the icon?

Attachment: SidebarTest_bacd796c_9e8e6b58.zip

[YuvanShankar Arunagiri]

Hi Nick,

We have checked your reported query and prepared the sample based on your requirement. please refer the below code snippet and attached sample.

Query-1: Using string contains (“/”) method, we can differentiate the Image or icon in IconCss property. Based on that, we render the image and icon in menu item.

Query-2: For redirect the clicking on whole menu, we can use the navigation manager to navigate the URL on ItemSelected event of the menu.

[MainLayout.razor]:

<SfMenu CssClass="dock-menu" TValue="MenuItem" Orientation="@VerOrientation" Items="MainMenuItems">

                            <MenuEvents TValue="MenuItem" ItemSelected="Selected"></MenuEvents>

                            <MenuTemplates TValue="MenuItem">

                                <Template>

                                    @{

                                        var MenuItems = context;

                                        if (MenuItems.IconCss.Contains('/'))

                                        {

                                             <img class="e-custom-image" src="@MenuItems.IconCss" />

                                        }

                                        else

                                        {

                                             <span class="e-custom-icon @MenuItems.IconCss"></span>

                                        }

                                    }

                                </Template>

                            </MenuTemplates>

                        </SfMenu>

……………………………………………………..

public void Selected(MenuEventArgs<MenuItem> args) 

    { 

        NavigationManager.NavigateTo(args.Item.Url, true); 

    }

Please get back to us, if you need any further assistance on this.

  

Regards, 

YuvanShankar A

Attachment: SidebarTest_13113f.zip