starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

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

New Issue
Open
opened 2026-01-29 18:00:11 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 18:00:11 +00:00
Owner
Copy Link

Originally created by @franklupo on GitHub (Nov 26, 2025).

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

Originally created by @franklupo on GitHub (Nov 26, 2025). **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: ```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; } ``` ```razor <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. <img width="158" height="460" alt="Image" src="https://github.com/user-attachments/assets/29274a04-5308-4e63-900f-559073a14eec" /> **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
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1913
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?