Telerik Forums
UI for Blazor Forum
1 answer
12 views

As of right now, the TelerikMenu generates a menu where each menu item is a span with an onclick handler that navigates to the page. It looks like this:

<li data-id="..." tabindex="0" class="k-item k-menu-item k-first" role="menuitem" aria-live="polite">
   <span class="k-link k-menu-link ">
      <span class="k-menu-link-text">
         Page Title
      </span>
   </span>
</li>

However, because they are only spans, when right clicking on a menu item, there is no option to open the link in a new tab. In addition, middle clicking the menu item doesn't work either. Can these be changed to anchor tags so menu items can be opened in a new tab? I know there is an ItemContext that can be added to the TelerikMenu, but I would like to keep all the styling of the default TelerikMenu.

Dimo
Telerik team
 answered on 30 Jun 2025
1 answer
28 views

Hello Everyone,

I'm working on a Blazor Server project, and I've replaced the default navigation menu with a TelerikMenu component. It produces this:

When I click the Counter, Weather, etc, I get to the correct page. Here's how my project is layed out:

You can see that the Home.razor page is in the same location as the Weather and Counter page. I'm also able to get to the pages under the DisplayData folder. Here's the code:


<div>
<img src="picture.png" style="height: 300px; margin-right: 10px;">
</div>

<TelerikMenu Data="@MenuData"
            Orientation=@MenuOrientation.Vertical></TelerikMenu>



@code{
    public List<MenuItem> MenuData { get; set; }

    public class MenuItem
    {
        public string Text { get; set; }
        public string Url { get; set; }
        public ISvgIcon Icon { get; set; }
        public List<MenuItem> Items { get; set; }
    }

    protected override void OnInitialized()
    {
        GenerateMenuData();
    }

    public void GenerateMenuData()
    {
        MenuData = new List<MenuItem>()
        {
            new MenuItem()
            {
                Text = "Home",
                Url = "Home",
                Icon = SvgIcon.Home
            },
            new MenuItem()
            {
                Text = "Counter",
                Url = "Counter",
                Icon = SvgIcon.Calculator
            },
            new MenuItem()
            {
                Text = "Weather",
                Url = "Weather",
                Icon = SvgIcon.Globe
            },            
            new MenuItem()
            {
                Text = "Display Data",
                Url = "",
                Icon = SvgIcon.Data,
                Items = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Text = "Delme Table",
                        Url = "/DelMeTable",
                        Icon = SvgIcon.Data // SvgIcon.User
                    },
                    new MenuItem()
                    {
                        Text = "Delme Telerik",
                        Url = "/DelmeTelerikTable",
                        Icon = SvgIcon.Data
                    },
                    new MenuItem()
                    {
                        Text = "Delme Telerik SQL",
                        Url = "/DelmeTelerikTableSQL",
                        Icon = SvgIcon.Data
                    }
                }
            }
        };//end of MenuData
        
    }//end of GenerateMenuData()

//
}

When I try to get back to the Home page, I get a "Not Found" error. Also of note, when the application launches to the Home page, here is the URL (from the debugger): localhost:7044.

My question is, how do I set the URL for the home page to get back to it?

 

Thanks,

Mike

Justin
Telerik team
 answered on 30 May 2025
1 answer
66 views
Hi!

I wanted to ask if it's possible to create a menu similar to the one you have on your main website (https://www.telerik.com), using Telerik UI for Blazor components?

I'm specifically referring to the menu that appears on hover — where a dropdown with multiple columns and grouped content is shown.

I've already built a working version of this using AnimationContainer and some custom hover logic, but I'm wondering if there's a simpler or more "official" way to achieve the same effect using Telerik components out of the box?

Image is attached.

Thanks, appreciate your help!
Bohdan
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 24 Mar 2025
2 answers
110 views

Hi

I'm using the TelerikMenu component with multiple nested levels of menu items. When moving the cursor from inside a nested level, to a parent level that is not in the currently selected path, the menu disappears. 

View this example on REPL: https://blazorrepl.telerik.com/mIvFOglY481u2hRG05

When moving the cursor from "Item A1 - 1" to "Item A2", the menu disappears.

 

Because I have a large menu with multiple levels, it would improve user experience to keep the menu visible as long as the cursor hovers it. Is there any way to make this happen?

 

Best regards

Bram

Bram
Top achievements
Rank 1
Iron
Iron
 answered on 17 Feb 2025
0 answers
248 views

hi
I want to create a session after the user clicks on the button and display this user's information such as UserName or UserID in a section of the MainLayout

 In the MainLayout page, the currentUser_Id parameter value received from the session is displayed correctly in the paragraph, but this value is not passed to the paragraph inside the section.

In fact, I want to show the value of User _id which is created in the login page and in the session in a part of the page app .razor or mainLayout .razor as user information.

please help me

 

LoginPage.razor:

@page "/"
@using BlazorSessionApp.Layout
@layout LoginLayout
@inject NavigationManager NavigationManager
@inject ProtectedSessionStorage ProtectedSessionStore

<button class="btn btn-primary" @onclick="Submit">Enter</button>

@code
{
	private async Task Submit()
	{
		await ProtectedSessionStore.SetAsync("User_Id", 500);

		NavigationManager.NavigateTo("/Home", true);
	}
}

 

 

App.razor :


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<base href="/" />
	<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
	<link rel="stylesheet" href="app.css" />
	<link rel="stylesheet" href="BlazorSessionApp.styles.css" />
	<link rel="icon" type="image/png" href="favicon.png" />
	<HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
	<SectionOutlet SectionName="mysection" /> 

	<Routes @rendermode="InteractiveServer" />
	<script src="_framework/blazor.web.js"></script>

</body>
</html>

 

 

MainLayou.razor :


@inherits LayoutComponentBase
@inject ProtectedSessionStorage ProtectedSessionStore



<p>OutOf Section:@currentUser_Id</p>

<SectionContent SectionName="mysection">
	<p>into My Section:@currentUser_Id</p>
</SectionContent>




<div class="page">

	<div class="sidebar">
		<NavMenu />
	</div>

	<main>
		<div class="top-row px-4">
			<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
		</div>

		<article class="content px-4">
			@Body
		</article>
	</main>
</div>

@code {
	public int currentUser_Id;
	public bool isConnected;

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			isConnected = true;
			await LoadStateAsync();
			StateHasChanged();
		}
	}
	private async Task LoadStateAsync()
	{
		var result = await ProtectedSessionStore.GetAsync<int>("User_Id");
		currentUser_Id = result.Success ? result.Value : 0;
	}
	private async Task IncrementUser_Id()
	{
		currentUser_Id++;
		await ProtectedSessionStore.SetAsync("User_Id", currentUser_Id);
	}
}


Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 27 Oct 2024
2 answers
46 views
I would like to use the TelerikMenu on a mobile device, but there is no hover function to automatically open the menu. I therefore use ShowOn=“@MenuShowEvent.Click”. This also works, but now CloseOnClick=“true” no longer works. If I use the property, the menu no longer opens at all. But I need the function to close the menu automatically after selecting a menu item. How can I achieve this or is it a bug?

Hendrik
Top achievements
Rank 2
Bronze
Iron
Iron
 answered on 15 Oct 2024
1 answer
53 views

How would I add an input to the template of a menu?  View the following REPL, it does not accept keyboard input, but it DOES accept input if holding down shift and entering capital letters.  I assume the menu is capturing keystrokes somewhere.

https://blazorrepl.telerik.com/QeEtnaFW52QfOcqb30

 

Dimo
Telerik team
 answered on 01 Oct 2024
1 answer
54 views

Hello Telerik,

When I first generator the Grid the menu appears as expected.

 

When I AutoFit All Columns the NavMenu is mis-alligned.

 

Thank you

 



 

 

Dimo
Telerik team
 answered on 04 Sep 2024
1 answer
134 views

I am still struggeling with CSS. 

I want to set the Backgroundcolor and the Link/Text-Color of a specific Menu-Component. I know who to style the Menu generally for the whole Application but I need it just for one Page. The Menu-Component has no explicit Style Attribut to set in inline just for the specific object.

This is the way I style the Link-Color but it sets the color for all my Menus...    

.k-menu-link {
        color: red;
}

Any help ?

 

Hristian Stefanov
Telerik team
 answered on 29 Aug 2024
1 answer
91 views

Hi everyone!

I hace this Rowfilter



This is the Telerik Code 

 <GridColumn FilterMenuType="@FilterMenuType.Menu" Field="@nameof(HechoDirectoClienteViewModel.FechaVencimiento)" Title="Fecha vencimiento" TextAlign="ColumnTextAlign.Right" Resizable="true" Sortable="true" Width="170px" HeaderClass="center-wrap">
     <Template>
         @((context as HechoDirectoClienteViewModel)?.FechaVencimiento?.ToString("dd/MM/yyyy"))
     </Template>
 </GridColumn>
It is possible changue the DateFormat "y/M/yyyy" to this "dd/MM/yyyy?
Tsvetomir
Telerik team
 answered on 12 Jul 2024
Narrow your results
Selected tags
Tags
+104 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?