How can highlighted selected item in nav menu component

Radzen.Blazor Components
1

Dears,
How can highlighted main item and child item selected as below example
12

2

How can highlighted main item and child item after selected, to clarify to the front user what has been selected??

3

Hi mjjalala,

you want to highlight the main item when it´s dropped down and the child item when it´s hovered?
Both you have to do in css

Example: main item color variable

.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link {
    color: var(--rz-menu-top-item-selected-color);
}

child event on hover changing background color:

.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: var(--rz-hover-menue-lighter);
}

You have to search for the classes inside your css and overwrite them.

4

@fabius916 To clarify, the classes .rz-navigation-item-wrapper-active and rz-navigation-item-wrapper-active are applied when the dropdown is open and removed once the dropdown is closed. This alone does not suffice for the desired functionality.

I'll explain further:
when a child item is selected and there is actual navigation to the page, I want to highlight the parent item in a different color as highlightParent. This is to let the client know that they have visited a page within the selected section.

5

To clarify the requirements further, in order to apply the highlight to the parent element, it is necessary to:

If the child item, such as "Manage Payments", has been visited, the class active is added to href tag class="rz-navigation-item-link active"
What also needs to be added is to identify the active element for the ParentItem "Project" by setting it to active as well.
This will enable us to add a highlight to the parent element too. when dropdown close

"rz-navigation-item parent-active"

<li class="rz-navigation-item parent-active">  <!-- here must set  class to show this item has chiled item active--> **parent-active** It was added by me for clarification.

    <div class="rz-navigation-item-wrapper" onclick="Radzen.toggleMenuItem(this)">
        <div class="rz-navigation-item-link">
            <i class="rzi rz-navigation-item-icon">arrow_circle_down</i>
            <span class="rz-navigation-item-text">Projects</span>
            <i class="rzi rz-navigation-item-icon-children">keyboard_arrow_down</i>
        </div>
    </div>
    <ul class="rz-navigation-menu" style="display: none">
        <li class="rz-navigation-item">
            <div class="rz-navigation-item-wrapper" onclick="Radzen.toggleMenuItem(this)">
                <a href="/Project/ManageProjects" class="rz-navigation-item-link">
                    <i class="rzi rz-navigation-item-icon"><!--!-->rocket_launch</i>
                    <span class="rz-navigation-item-text">Manage Projects</span>
                </a>
            </div>
        </li>

        <li class="rz-navigation-item">
            <div class="rz-navigation-item-wrapper" onclick="Radzen.toggleMenuItem(this)">
                <a href="/Project/ManagePayments" class="rz-navigation-item-link active">
                    <i class="rzi rz-navigation-item-icon">accessibility</i>
                    <span class="rz-navigation-item-text">Manage Payments</span>
                </a>
            </div>
        </li>
    </ul>
</li>