Trouble using PanelMenu in Navigation

Radzen.Blazor Components
1

Home
Home1920×1048 21.6 KB

I got some Trouble using PanelMenu in Navigation.
The submenu doesn't pop up when I click.
Here is my NavMenu.razor code. Did I miss any notes?

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">RadzenTest</a>
    </div>
</div>

@* <input type="checkbox" title="Navigation menu" class="navbar-toggler" /> *@

@* <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="weather">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
            </NavLink>
        </div>
    </nav>
</div> *@

<RadzenPanelMenu Click="OnParentClicked"  Multiple=true>
    <RadzenPanelMenuItem Text="General" Icon="home" class="nav-link">
        <RadzenPanelMenuItem Text="Buttons" Path="buttons" Icon="account_circle"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="Menu" Path="menu" Icon="line_weight"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="FileInput" Path="fileinput" Icon="attach_file"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="Dialog" Path="dialog" Icon="perm_media"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="Notification" Path="notification" Icon="announcement"></RadzenPanelMenuItem>
    </RadzenPanelMenuItem>
    <RadzenPanelMenuItem Text="Inputs" Icon="payment" class="nav-link">
        <RadzenPanelMenuItem Text="CheckBox" Path="checkbox" Icon="check_circle"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="TextBox" Path="textbox" Icon="input"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="TextArea" Path="textarea" Icon="description"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="Password" Path="password" Icon="payment"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="Numeric" Path="numeric" Icon="aspect_ratio"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="DatePicker" Path="datepicker" Icon="date_range"></RadzenPanelMenuItem>
    </RadzenPanelMenuItem>
    <RadzenPanelMenuItem Text="Data" Icon="save" class="nav-link">
        <RadzenPanelMenuItem Text="DataGrid" Path="datagrid" Icon="grid_on"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="DataList" Path="datalist" Icon="list"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="DropDown" Path="dropdown" Icon="dns"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="DropDownDataGrid" Path="dropdown-datagrid" Icon="receipt"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="ListBox" Path="listbox" Icon="view_list"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="TemplateForm" Path="templateform" Icon="line_style"></RadzenPanelMenuItem>
    </RadzenPanelMenuItem>
    <RadzenPanelMenuItem Text="Containers" Icon="account_box" class="nav-link">
        <RadzenPanelMenuItem Text="Tabs" Path="tabs" Icon="tab"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="Panel" Path="panel" Icon="content_paste"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="Fieldset" Path="fieldset" Icon="account_balance_wallet"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="Card" Path="card" Icon="line_style"></RadzenPanelMenuItem>
    </RadzenPanelMenuItem>
    <RadzenPanelMenuItem Text="More" class="nav-link">
        <RadzenPanelMenuItem Click="OnChildClicked" Text="Item1"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Click="OnChildClicked" Text="Item2"></RadzenPanelMenuItem>
        <RadzenPanelMenuItem Text="More items">
            <RadzenPanelMenuItem Text="More sub items">
                <RadzenPanelMenuItem Click="OnChildClicked" Text="Item3"></RadzenPanelMenuItem>
                <RadzenPanelMenuItem Click="OnChildClicked" Text="Item4"></RadzenPanelMenuItem>
            </RadzenPanelMenuItem>
        </RadzenPanelMenuItem>
    </RadzenPanelMenuItem>
</RadzenPanelMenu>
@code {
    MenuItemDisplayStyle DisplayStyle = MenuItemDisplayStyle.IconAndText;

    bool isShowArrow = true;
    bool changeOnOver;
    void OnParentClicked(MenuItemEventArgs args) {
        Console.WriteLine($"{args.Text} clicked from parent");
    }
    void OnChildClicked(MenuItemEventArgs args) {
        Console.WriteLine($"{args.Text} from child clicked");
    }
}
2

Most probably the interactivity is not enabled - no Blazor events are raised for any component. You can verify this using a simple button with @onclick event.

3

Thank you very much for your suggestion. Problem solved :blush: