Open Closed

[Angular + lepton-x] How to change the side-nav-menu layout to top-nav-menu layout? #5558


User avatar
0
bma.ebss.dev@sjrb.ca created

Hi,

I am trying to build an Angular UI with lepton-x which has top-nav layout (like https://x.leptontheme.com/top-menu/). But after I created the project, The default layout is the side-nav-menu layout.

What should I do to change the side-nav-menu layout to top-nav-menu layout in the angular UI?

this is the default layout:

and I want the top-nav layout like this:

  • ABP Framework version: v7.3.1
  • "@abp/ng.theme.lepton-x": "~2.3.0",
    
  • UI Type: Angular
  • Database System: EF Core

1 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Member

    Hi, Please make following changes

    1. In angular.json file change side-menu to top-menu
    2. In app.module.ts file change SideMenuLayoutModule to TopMenuLayoutModule
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.3.0-rc.1. Updated on June 18, 2025, 12:26