This is a migrated thread and some comments may be shown as answers.

Is there a way to add html elements in the menu text?

2 Answers 68 Views
Menu
This is a migrated thread and some comments may be shown as answers.
SL
Top achievements
Rank 1
Veteran
SL asked on 31 Mar 2020, 05:21 PM

I was hoping to put some icons in the Text section of the menu component.  

 

On regular nav link I can do this.

    <NavLink class="dropdown-item" href="settings/accountcategories">
                <span class="oi oi-command" aria-hidden="true"></span> Account Categories
            </NavLink>

 

Thanks.

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 31 Mar 2020, 06:48 PM

Hi,

You can, through templates: https://docs.telerik.com/blazor-ui/components/menu/templates. By default, theitems have only text that is a string, so it can't render anything but text (it is not a MarkupString).

We also offer a collection of icons you can use: https://docs.telerik.com/blazor-ui/common-features/font-icons

If you would expect built-in functionality, how would you imagine it to be exposed? Perhaps the same Icon/IconClass/IconUrl parameters on the menu item that render internally the TelerikIcon at the beginning of the text?

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Accepted
SL
Top achievements
Rank 1
Veteran
answered on 31 Mar 2020, 07:44 PM

Hi Marin,

 

Thanks for pointing out the template.  I was able to use the Open Iconic classes by adding an IconHtmlClass on each of the MenuItem:

 

<TelerikMenu Data="@MenuItems">
    <ItemTemplate Context="item">
        @{
                <NavLink href="@item.Url"
                         target="@(IsInternalPage(item.Url) ? "" : "_blank")"
                         class="k-nav k-link k-menu-link"
                         ActiveClass="k-state-active"
                         Match="@(item.Url == "/" ? NavLinkMatch.All : NavLinkMatch.Prefix)">
                    <span class="@item.IconHtmlClass" style="padding-right:.5em;font-weight:bold" aria-hidden="true"></span>@item.Text
                </NavLink>
        }
    </ItemTemplate>
</TelerikMenu>

 

 

Tags
Menu
Asked by
SL
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
SL
Top achievements
Rank 1
Veteran
Share this question
or