Planned
Last Updated: 10 May 2024 07:35 by ADMIN
Scheduled for 2024 Q3 (Aug)

Implementation of one or both of these features:

- Screen boundary detection: The list of child items expands to the opposite direction when necessary to prevent screen boundaries from being crossed.

- ExpandDirection: Gets or sets the direction in which child items will open.

Unplanned
Last Updated: 23 Feb 2024 10:54 by ADMIN
Created by: Parya
Comments: 9
Category: Menu
Type: Feature Request
14

Currently, on mobile devices (where is no hover), to open the child menu you need to click/tap the parent and the only way close it afterwards is if you click away. This is not very convenient for mobile usage. I want to be able to close the child menu on click/tap of the parent as well.

Completed
Last Updated: 13 Dec 2023 08:03 by ADMIN
Release 5.1.0 (31 Jan 2024) (R1 2024)
Expose an OnItemRender event, which is raised for each menu item. The args will allow setting a Class, that will be applied at the topmost element of the item iteself, allowing full customization, as well as PopupClass, which is applied to the topmost element of the item popup.
Completed
Last Updated: 19 Sep 2023 10:31 by ADMIN
Release 4.6.0 (11 Oct 2023) (R3 2023)

While the menu is usable the way it is, it could be better. If you take a look at the example menu in the best practices link that I provided in the original post, you will see what I mean. Some of the differences include the following:

  • For any item in your menu that is a link and not a submenu, the item is read by NVDA saying "collapsed" which is unnecessary and could get frustrating to a screen reader user. This doesn't happen with the best practices menu.
  • Using the keyboard left and right buttons move the focus to the next adjacent menu item, but it doesn't set focus to the top menu item and read it. Instead, it just says "Menu". The best practices will focus on the top menu item when moving left or right.
  • The escape key isn't being used to cancel out of the dropdown on the menu. A user should be able to click ESC and the menu should close, with focus set back to the parent menu item. This presents a navigational issue for those submenu items that have further submenus. In order for a user to navigate to an adjacent menu, they need to traverse to the left all the way down the submenus before it will move on to the next adjacent top item. With the ESC key, they can move back to the parent item, and then navigate right or left from there.
  • Tabbing out of the menu when the focus is on the submenu, messes up the tab order, so the shift tab doesn't navigate back to the menu. If the focus is on one of the top menu items, then tabbing out and back works. However, it should set the focus back to the last top menu item that has focus, not the first item. So if the 3rd item had focus, then tabbing out and then shift-tabbing back should set the focus back to the 3rd item, not the first item. And if you tab out from a submenu item from the 2nd parent item, then shift-tab should bring them back to the 2nd parent item.

Best practices example: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html

Unplanned
Last Updated: 05 Sep 2023 07:32 by Richard
Created by: Richard
Comments: 0
Category: Menu
Type: Feature Request
2
I want to use a method that refreshes the item in the Menu while it is open. 
Unplanned
Last Updated: 05 Sep 2023 07:31 by Richard
Created by: Richard
Comments: 0
Category: Menu
Type: Feature Request
2
I want to use methods to show and hide the menu from my code. Maybe something like MenuReference.Show/HideAsync().
Completed
Last Updated: 21 Aug 2023 12:05 by ADMIN
Release 4.5.0 (08/30/2023) (R3 PI2)
Created by: Eli
Comments: 6
Category: Menu
Type: Feature Request
68
If you are on a 3rd level child menu and move the mouse to a 2nd level parent menu item that is not the direct parent, the menu hides. It should keep the first level open. Is there a way to control the opening and the closing of the submenu items?
Unplanned
Last Updated: 01 Jun 2023 12:41 by Miroslav
Created by: Miroslav
Comments: 0
Category: Menu
Type: Feature Request
3
I would like to use an event that fires when the Menu closes. 
Unplanned
Last Updated: 04 May 2023 12:09 by ADMIN

The current implementation of the component has hardcoded values for the alignment of the popup - e.g.:

    for horizontal orientation: left horizontal align and bottom vertical align
    for vertical orientation: right horizontal align and top vertical align

Ideally, those should be customizable to facilitate various use-cases.

Completed
Last Updated: 21 Mar 2023 13:58 by ADMIN
Release 4.2.0 (26/04/2023)

Hello,

If I disable a Menu item at runtime, it prohibits access to child items via the mouse, but still opens the child group of items if I use the keyboard navigation.

Here is a test page with a workaround included (which is to recreate the Menu).

<TelerikButton OnClick="@DisableItem">Disable Services item</TelerikButton>
<TelerikButton OnClick="@EnableItem">Enable Services item</TelerikButton>

@if (ShowMenu)
{
    <TelerikMenu Data="@MenuItems" />
}

@code {
    List<MenuItem> MenuItems { get; set; }

    bool ShowMenu { get; set; } = true;

    async Task DisableItem()
    {
        MenuItems.Find(x => x.Text == "Services").Disabled = true;

        MenuItems = new List<MenuItem>(MenuItems);

        // workaround start
        ShowMenu = false;
        await Task.Delay(1);
        ShowMenu = true;
        // workaround end
    }

    async Task EnableItem()
    {
        MenuItems.Find(x => x.Text == "Services").Disabled = false;

        MenuItems = new List<MenuItem>(MenuItems);
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
    {
            new MenuItem()
            {
                Text = "Company",
                Items = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Text = "Overview"
                    },
                    new MenuItem()
                    {
                        Text = "Events"
                    }
                }
            },
            new MenuItem()
            {
                Text = "Services",
                Items = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Text = "Consulting"
                    },
                    new MenuItem()
                    {
                        Text = "Education"
                    }
                }
            }
        };

        base.OnInitialized();
    }

    public class MenuItem
    {
        public string Text { get; set; }
        public bool Disabled { get; set; }
        public List<MenuItem> Items { get; set; }
    }
}

Unplanned
Last Updated: 22 Feb 2023 10:00 by Meindert
Created by: Daniel
Comments: 1
Category: Menu
Type: Feature Request
8
To prevent the accidental opening or closing of the Menu items, expose configuration to add a delay when Menu items open or close.
Unplanned
Last Updated: 13 Jan 2023 19:02 by Ron Hary
I'm using the Menu component and I am handling the OnClick event. I noticed that when an exception is thrown in its handler, it does not reach the ErrorBoundary.
Duplicated
Last Updated: 30 Nov 2022 08:32 by ADMIN
Created by: Alberto
Comments: 4
Category: Menu
Type: Feature Request
37
The show event of the child items should be configurable. It must be possible to expand them on click only, not when passing over them with the mouse.
Duplicated
Last Updated: 30 Nov 2022 08:32 by ADMIN
Created by: khashayar
Comments: 1
Category: Menu
Type: Feature Request
29
If you stop hovering a menu it gets closed.  What i want is that when i click on a menu item (the menu must be outside of the @Body, of course, for navigation to not affect it), it should stay open and even if it's hovered or not - like the popup of drop down when you click on the expand arrow it gets open and when dropdown looses focus the popup gets closed.
Completed
Last Updated: 26 Jul 2022 17:14 by ADMIN

Dear,

 

the blazor menu UI adapt it self for hamburguer menu when mobile?

best,

 

Jeff

---

ADMIN EDIT

I have attached to this post a sample implementation that you can use as base. Another option is to add more conditional markup to remove the menu altogether and replace it with another structure for small screens. A third option is to use the Drawer component as it collapses anyway (see here and here).

----

Unplanned
Last Updated: 21 Jul 2022 12:16 by Rick
Created by: Sylvain
Comments: 2
Category: Menu
Type: Feature Request
10

Is there a way to not create menu programmatically but only using "html" elements ? Something like this :

 <TelerikMenu>

    <TelerikMenuItem Text="File">

        <TelerikMenuItem Text="Open" OnClick="@OnFileOpenMenuClick"/>

        <TelerikMenuItem Text="Save" OnClick="@OnFileSaveMenuClick"/>

    </TelerikMenuItem>

 </TelerikMenu>

 


Completed
Last Updated: 18 Feb 2022 20:58 by ADMIN
Release 3.1.0
Created by: Alberto
Comments: 5
Category: Menu
Type: Feature Request
33

At the moment, when you click a menu item it does not hide.

A method can be exposed to hide the expanded items that can be invoked from the OnClick handler.

---

ADMIN EDIT

Here is a potential workaround - when the menu item is clicked, we use a little bit of JS to go over the menu items at the root and make the browser think that the user moved the mouse away from them which is the signal for the menu dropdowns to hide. Do test this carefully before using in production, though.

@inject IJSRuntime _js

@* Move this script together with other scripts in the project, it is here to make the snippet shorter *@
<script suppress-error="BL9992">
    function closeMenu() {
        setTimeout(function () {
            var mouseLeaveEvent = new Event('mouseleave');
            var rootNodes = document.querySelectorAll("li.k-menu-item");
            rootNodes.forEach(function (elem) { elem.dispatchEvent(mouseLeaveEvent); })
        }, 30);
    }
</script>

<TelerikMenu Data="@MenuItems"
                ItemsField="@nameof(MenuItem.SubSectionList)"
                TextField="@nameof(MenuItem.Section)"
                UrlField="@nameof(MenuItem.Page)"
                OnClick="@((MenuItem item) => OnClickHandler(item))">
</TelerikMenu>

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

    async Task OnClickHandler(MenuItem item)
    {
        await _js.InvokeVoidAsync("closeMenu");
    }



    public class MenuItem
    {
        public string Section { get; set; }
        public string Page { get; set; }
        public List<MenuItem> SubSectionList { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
                {

            new MenuItem()
            {
                Section = "fetchdata",
                Page = "fetchdata"

            },
            new MenuItem()
            {
                Section = "counter",
                Page = "counter"
            },

// sample URLs for SPA navigation
new MenuItem()
{
    Section = "Company",
    SubSectionList = new List<MenuItem>()
                        {
        new MenuItem()
        {
            Section = "Overview",
            Page = "fetchdata"
        },
        new MenuItem()
        {
            Section = "Events",
            Page = "fetchdata"
        },
        new MenuItem()
        {
            Section = "Careers",
            Page = "counter"
        }
    }
},
// sample URLs for external navigation
new MenuItem()
{
    Section = "Services",
    SubSectionList = new List<MenuItem>()
                        {
        new MenuItem()
        {
            Section = "Consulting",
            Page = "counter"
        },
        new MenuItem()
        {
            Section = "Education",
            Page = "fetchdata"
        }
    }
},
new MenuItem()
{
    Section = "Contact",
    Page = "counter"
}
};

        base.OnInitialized();
    }
}

---

Duplicated
Last Updated: 03 Sep 2021 16:27 by ADMIN
Created by: Jeremy
Comments: 1
Category: Menu
Type: Feature Request
0

I'd like to be able to build a custom menu that contains other controls and that is similar to the ones on the grid column menu but usable from anywhere.

The closest I can get with Telerik controls is the Menu with custom templates, but ideally I could anchor the menu to a button that has a custom icon or text (vs hovering over a hyperlink)

Unplanned
Last Updated: 15 Jun 2021 14:25 by ADMIN
Created by: Georgia
Comments: 0
Category: Menu
Type: Feature Request
8

The Menu uses the NavigationManager to go to the pages that are assigned to the individual MenuItem objects. Is there a way to pass the "force load" value to these menu items?

 

-------------------- ADMIN EDIT -------------------- 

You can work around the issue if you skip setting Url field of the items that you want to force load and set your own property. Then, handle OnClick of the menu items and check if this property is set and manually call the navigation manager for the URL. You can see the code for this approach below:

public List<MenuItem> MenuItems { get; set; }

protected void OnClickHandler(MenuItem item)
{
    if (item.ForceLoadUrl != null)
    {
        navManager.NavigateTo(item.ForceLoadUrl, true);
    }
}

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

protected override void OnInitialized()
{
    MenuItems = new List<MenuItem>()
    {
        new MenuItem()
        {
            Text = "site.css",
            ForceLoadUrl = "/css/site.css"
        },
        new MenuItem()
        {
            Text = "Counter",
            Url = "/counter"
        },
        new MenuItem()
        {
            Text = "Fetch Data",
            Url = "/fetchdata"
        }
    };

    base.OnInitialized();
}

Completed
Last Updated: 11 Mar 2021 09:09 by ADMIN
Release 2.23.0

Use any demo and rapidly hover between parent menu items:

1 2