Feature Request: Disable collapse behavior for root menu items (always expanded sidebar groups) #10286

1 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  There is currently no built‑in way in LeptonX to mark a root menu item with children as “non‑collapsible” or “always expanded”. All root items that have children are rendered as collapsible groups by the theme, and there is no documented flag such as disableCollapse / alwaysExpanded / expandedByDefault per menu item.

  To achieve the behavior you want (e.g. a “Quick Links” group that is always expanded and has no toggle arrow), you need to customize the sidebar rendering instead of relying on the default LeptonX sidebar component.

  A practical approach is:

  1. Replace the sidebar component via replaceable components (Angular / MVC / Blazor)

     • LeptonX and LeptonX Lite expose layout parts (navbar, sidebar, etc.) as replaceable components.
     • You can register your own sidebar component and render the menu items yourself, using ABP’s menu data (Angular: NavItemsService, MVC/Blazor: IMenuContributor produces the menu and your component/layout renders it).
     • In your custom sidebar template you can:
       • Render most root items as collapsible (same as LeptonX).
       • Render special groups (like “Quick Links”) without:
         • the collapse/expand arrow, and
         • any collapse logic – simply always show their children.

     Conceptually (Angular example outline, not tied to a specific key name):

  // in your theme customization module
     import { NgModule } from '@angular/core';
     import { ReplaceableComponentsService } from '@abp/ng.core';
     import { eThemeLeptonXComponents } from '@abp/ng.theme.lepton-x';
     import { CustomSidebarComponent } from './custom-sidebar.component';
  
     @NgModule({
       declarations: [CustomSidebarComponent],
       exports: [CustomSidebarComponent],
     })
     export class ThemeCustomizationModule {
       constructor(rc: ReplaceableComponentsService) {
         rc.add({
           key: eThemeLeptonXComponents.Sidebar, // use the actual sidebar key for your version
           component: CustomSidebarComponent,
         });
       }
     }
  

  In CustomSidebarComponent’s template, you render the menu tree manually. For a special “Quick Links” root item you simply don’t add the collapse arrow and collapse behavior, and always show its children:

  <!-- Pseudocode for the idea -->
     <li class="lpx-menu-item quick-links">
       <div class="lpx-menu-title">
         Quick Links
         <!-- no arrow icon here -->
       </div>
       <ul class="lpx-menu-children">
         <!-- these links are always visible -->
         <li *ngFor="let item of quickLinksChildren">
           <a [routerLink]="item.route">{{ item.displayName }}</a>
         </li>
       </ul>
     </li>
  

  Other groups can keep the standard LeptonX pattern (arrow + collapsible list).

  2. Alternative: fully custom sidebar (like the AdminLTE example)
     If you don’t need to keep the LeptonX sidebar behavior at all, you can do what the AdminLTE sample does: completely replace the layout and render your own sidebar HTML and CSS while still using ABP’s application infrastructure. That gives total freedom over which groups are collapsible vs. always expanded, at the cost of more custom UI work.

  3. Requesting this as a first‑class LeptonX feature
     Since this is a theme‑level capability (per‑item “non‑collapsible” flag), the right way to request it as a built‑in, opt‑in feature is to open an issue in the ABP Framework GitHub repo or, for ABP Commercial customers, open a feature request via the support portal. Describe it as:

     • New optional per‑menu‑item configuration, e.g. AlwaysExpanded / DisableCollapse for LeptonX sidebar rendering.
     • Behavior:
       • When enabled on a root item with children:
         • Children are always visible.
         • No collapse/expand arrow is shown.
         • Other root items keep current behavior.

     This will put it on the product team’s radar similarly to the previous LeptonX accessibility feature request that was added to the backlog.

  ---

  Sources

  • LeptonX / LeptonX Lite theming and replaceable components (pattern for customizing Angular layout parts):
    https://abp.io/docs/latest/themes/lepton-x/angular
    https://abp.io/docs/latest/themes/lepton-x-lite/angular

  • ABP Framework GitHub (for opening theme/feature issues):
    https://github.com/abpframework/abp

  ---

  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.

  Save Cancel