Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple Submenu Menu Items Highlighted

See original GitHub issue

Describe the bug

I have a Menu with a Submenu. When I click on one of the Menu Item’s in the Submenu, it is highlighted as expected. But when I click on another one, both of them are now Highlighted and not just the last of clicked.

MenuItemsStayHighlighted

Steps to reproduce (please include code)

        <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Horizontal" DefaultSelectedKeys=@(new[]{"1"}) Accordion=true>
            <MenuItem Key="1" RouterLink="/">Home</MenuItem>
            <SubMenu Title="Admin" Key="2">
                <MenuItem Title="Resources" RouterLink="/resources" />
                <MenuItem Title="Activity Types" RouterLink="/activitytypes" />
            </SubMenu>
        </Menu>

Exceptions (if any)

When another menu item (inside a submenu) is clicked, it is the only one highlighted.

Issue Analytics

State:
Created 2 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

anddrzejbcommented, Oct 7, 2021

Thanks, I will look at it as soon as I can. I am busy at the moment so it might take me some time…

0reactions

Gareth064commented, Oct 16, 2021

Ok so leaving one RouteLink as ‘#’ and changing the other to ‘/’ it now works as expected (in the demo repo) Once I am back to work on Monday, I will update the project there with the RouterMatch code to see if it resolves the issue too.

Top Results From Across the Web

Highlight issue: Two menu items highlighted at the same time

When you say two menu items get highlighted at the same time, you mean “Contact” and “Home”? If yes, you'll need to make...

Keep parent menu item highlighted after hovering over ...

I would like to achieve that once the submenu is moused over, the corresponding (parent) menu item is highlighted as well. This never...

Multilevel Menu Design Best Practices

Always highlight the link on the main menu that corresponds to the page the user is on. If the current page is in...

Highlight Main Menu while hovering over sub-menu items

http://www.basicwp.com/ menu - highlighted - sub-menus -hover/ Simple CSS code to keep Main Menu item highlighted in navigation bar while hovering ...

Highlight parent menu items when viewing sub-pages

Highlighting menu items is an important way of indicating where they are on the structure of the site. It also reinforces the main...