Hello ABP Team 👋
I hope you're doing well. I'm reaching out to request your guidance on how to implement a sidebar navigation pattern similar to Fluent UI / modern SaaS layouts, as shown in the attached image.
🧩 Context In many SaaS and admin platforms, a collapsible vertical menu is standard. We're currently building a modular backoffice using ABP Framework + LeptonX + Blazor Server, and while the default sidebar works well, customizing it to support modern UX patterns requires deep overrides and manual logic.
We’ve manually implemented the behavior below, but we’d like to know the correct or recommended way to achieve this using ABP’s native abstractions and components.
📐 Required Features Collapsible Sidebar When expanded: shows icons and labels. When collapsed: shows only icons. Toggled by a button. Floating Submenus (Collapsed Mode) When the menu is collapsed, clicking a parent item should open a floating submenu (popover-style). Inline Submenus (Expanded Mode) When expanded, the same submenu items should appear nested under the parent. Search Support A text box to filter menu items (by DisplayName). Integration with ABP Menu System Fully compatible with MainMenu, MenuItemViewModel, and ABP’s permission-based menu rendering. 📸 Visual Reference The behavior is illustrated in the attached image (Fluent-style menu with floating panels).
🙏 Request Could you please guide us on how to achieve this layout using ABP Framework and LeptonX in a supported way?
If there is a recommended extension point, component to override, or theme configuration to enable this structure, we would highly appreciate your help.
Thanks in advance for your support and great work!
Best regards,
3 Answer(s)
-
0
To implement a modern, Fluent-style collapsible sidebar navigation in ABP Framework with LeptonX and Blazor Server, you should leverage the extensibility points provided by LeptonX and ABP’s menu system. Here’s the recommended approach:
Use LeptonX’s Layout Customization LeptonX for Blazor supports layout customization, including sidebar (side menu) and top menu layouts. The sidebar is fully compatible with ABP’s MainMenu and permission-based rendering.
Sidebar Collapsing and Icon/Label Display LeptonX’s sidebar layout natively supports collapsing. When collapsed, only icons are shown; when expanded, both icons and labels are visible. The toggle button is included in the default layout.
Floating and Inline Submenus
- Inline submenus (expanded mode) are supported out-of-the-box: child menu items appear nested under their parent.
- Floating submenus (popover-style in collapsed mode) are not provided as a built-in feature in LeptonX as of the latest release. Achieving this requires customizing or replacing the sidebar component.
- Search Support LeptonX does not provide a built-in menu search box. To add this, you can:
- Create a custom sidebar component by inheriting or replacing the default LeptonX sidebar.
- Use ABP’s menu provider to access the menu structure and implement filtering logic based on DisplayName.
Integration with ABP Menu System All menu rendering in LeptonX is based on ABP’s MainMenu and MenuItemViewModel, so your customizations will remain compatible with permission-based menu logic.
Extension Points and Component Replacement LeptonX is designed for extensibility. You can replace the sidebar component using ABP’s component replacement system. This allows you to implement advanced behaviors (like floating submenus and search) while retaining ABP’s menu integration.
Example: Replace the Sidebar Component
- Create a new Razor component (e.g., MyCustomSidebar.razor) implementing your desired UX.
- Register your component as a replacement for the default sidebar in your module’s ConfigureServices method.
Example (pseudo-code):
Configure<AbpReplaceableComponentsOptions>(options => { options.Components["LeptonX.Sidebar"] = typeof(MyCustomSidebar); });- In your custom component, use dependency injection to access IMenuManager or IMenuProvider and render menu items according to your requirements.
References:
- LeptonX Blazor UI Customization: Layouts: https://abp.io/docs/latest/ui-themes/lepton-x/blazor
Summary
- Use LeptonX’s sidebar layout for basic collapsing/expanding.
- For floating submenus and search, implement a custom sidebar component and register it via ABP’s component replacement.
- Always use ABP’s menu abstractions for permission-aware rendering.
This approach ensures your sidebar remains fully integrated with ABP’s menu and permission system, while allowing you to deliver a modern, SaaS-style navigation experience.
Sources:
- https://abp.io/docs/latest/ui-themes/lepton-x/blazor
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
-
0
Thanks for the detailed explanation! I appreciate the guidance and understand that LeptonX supports basic collapsing and component replacement.
However, after reviewing the docs and experimenting with custom implementations, I’d like to highlight a gap:
🧭 Missing Guidance While the docs explain how to replace components in general (e.g., with AbpReplaceableComponentsOptions), there is no official step-by-step guide for replacing the sidebar while maintaining:
Compatibility with MainMenu, MenuItemViewModel and ABP’s permission system. Full behavior for inline + floating submenus depending on collapse state. Recommended patterns to build recursive menu trees with submenus, tooltips, or overlays tied to MenuItemViewModel. 🙏 What I need A reference implementation or working sample (even pseudo-code) that shows:
How to completely override the sidebar while preserving ABP integration. How to use MenuItemViewModel to render submenus conditionally (inline vs floating). Best practices when using LeptonX + Blazor for this type of dynamic UX. I’ve already built a working custom version, but it took significant effort due to the lack of official examples or reusable templates. Having proper guidance would help the community and improve productivity for others trying to build modern admin panels with ABP.
Thanks again — looking forward to your input!
-
0
[lucasmoreno] said: Thanks for the detailed explanation! I appreciate the guidance and understand that LeptonX supports basic collapsing and component replacement.
However, after reviewing the docs and experimenting with custom implementations, I’d like to highlight a gap:
🧭 Missing Guidance While the docs explain how to replace components in general (e.g., with AbpReplaceableComponentsOptions), there is no official step-by-step guide for replacing the sidebar while maintaining:
Compatibility with MainMenu, MenuItemViewModel and ABP’s permission system. Full behavior for inline + floating submenus depending on collapse state. Recommended patterns to build recursive menu trees with submenus, tooltips, or overlays tied to MenuItemViewModel. 🙏 What I need A reference implementation or working sample (even pseudo-code) that shows:
How to completely override the sidebar while preserving ABP integration. How to use MenuItemViewModel to render submenus conditionally (inline vs floating). Best practices when using LeptonX + Blazor for this type of dynamic UX. I’ve already built a working custom version, but it took significant effort due to the lack of official examples or reusable templates. Having proper guidance would help the community and improve productivity for others trying to build modern admin panels with ABP.
Thanks again — looking forward to your input!
Hi, we have internal issues to improve our LeptonX Theme documentation to cover customization in a wider aspect, and I understand that you want to have a working sample or pseudo-code for customizing components, but unfortunately, we don't have any existing sample for customization purposes (I'll create an issue for this).
Currently, the best solution for you is downloading the source code, and then examining the Sidebar components (Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/Components/ApplicationLayout/SideMenu/MainHeader) and modifying them to your needs.
If you run into issues during customization or have any specific questions, feel free to reach out! I’ll be happy to help.
Regards.
