WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Feature Request: Add AppBar/NavigationRail style option to RadzenPanelMenu #2368

@franklupo

Description

@franklupo

Is your feature request related to a problem? Please describe.
RadzenPanelMenu is great for traditional navigation but doesn't support the modern AppBar/NavigationRail pattern that's becoming standard in many UI frameworks.

Describe the solution you'd like
Add a built-in AppBar style option to RadzenPanelMenu that arranges items vertically with icons above text, similar to modern navigation rails.

Proof of concept
I've successfully created an AppBar using RadzenPanelMenu with minimal CSS:

.rz-appbar .rz-navigation-item-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.rz-appbar .rz-navigation-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<RadzenPanelMenu class="rz-appbar">
    <RadzenPanelMenuItem Text="Resources" Icon="folder" Path="/resources" />
    <RadzenPanelMenuItem Text="Console" Icon="description" Path="/console" />
    <RadzenPanelMenuItem Text="Logs" Path="/logs" Icon="article">
        <Template>
            <span class="rz-navigation-item-text">Logs</span>
            <RadzenBadge Text="12"
                         BadgeStyle="BadgeStyle.Danger"
                         IsPill="true"
                         Style="position: absolute; top: 8px; right: 8px;" />
        </Template>
    </RadzenPanelMenuItem>
    <RadzenPanelMenuItem Text="Traces" Icon="timeline" Path="/traces" />
    <RadzenPanelMenuItem Text="Metrics" Icon="bar_chart" Path="/metrics" />
</RadzenPanelMenu>

This works perfectly with badges using Templates and creates a clean, modern navigation rail.

Image

Describe alternatives you've considered
Currently using custom CSS, but having this as a built-in option (maybe Style="AppBar" or Orientation="Vertical") would be much cleaner and more maintainable.

Additional context
This pattern is very common in modern applications and would be a valuable addition to Radzen's component library. The CSS required is minimal and could easily be integrated as a variant. The solution also maintains full compatibility with existing features like Templates for badges and custom content.

Best regards

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions