Open Closed

Angular UI - Breadcrumb reset after navigation #7371


User avatar
1
gogu.stere@3sstudio.com created
  • ABP Framework version: v8.0.5
  • UI Type: Angular
  • Database System: EF Core
  • Exception message and full stack trace: -
  • Steps to reproduce the issue: After I navigate in that manner, the top bar (including the breadcrumb items) resets.

To give some more context on why I need this, I have a menu item called Masterdata. Within this page you can select from a table to view a details page on a specific user. In the overview page breadcrumb display correct MasterData | Overview. Also i have management page that can be accessed through navigation, i don't want to display management in sidebar. On this page, the breadcrumb is reset and is displaying only HOME. It should be displaying masterdata | overview | management

Please let me know if I'm missing something. masterdata-routing.module.ts

{ path: 'overview', component: CustomersComponent, canActivate: [permissionGuard], data: { requiredPolicy: 'QQ.Customers' } }, { path: 'overview/management', component: CustomersManagementComponent, canActivate: [permissionGuard], data: { requiredPolicy: 'QQ.Customers.Create || QQ.Customers.Edit || QQ.Customers' } },

After navigation should be Masterdata | Overview | Management


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

    Hello,

    Please Check this https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu#how-to-patch-or-remove-a-navigation-element

    Thanks

  • User Avatar
    0
    gogu.stere@3sstudio.com created

    Hi,

    Thanks for the response. I don't wanna display it in menu. I just wanna navigate and display the breadcrumbs correct.

    Thanks

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    Whenever the route does not match then it automatically redirects to home. I have one example please check yours accordingly

    {
            path: '/book-store',
            name: '::Menu:BookStore',
            iconClass: 'fas fa-book',
            order: 101,
            layout: eLayoutType.application,
          },
         {
            path: '/books1',
            name: '::Menu:Books1',
            parentName: '::Menu:BookStore',
            layout: eLayoutType.application
          },
          {
            path: '/books2',
            name: '::Menu:Books2',
            parentName: '::Menu:Books1',
            layout: eLayoutType.application
          },
    

    it will result in this

    please let me know if anything needed.

    Thanks

  • User Avatar
    1
    gogu.stere@3sstudio.com created

    Hi,

    Your method is working, but i don't want that behaviour. For my use, books2 should not been display in sidebar. In books1 i have a button that navigate to management page using the method i presented.

    Final result should be MASTERDATA | OVERVIEW | MANAGEMENT. Overview contains a navigate button.

    Thanks.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You can set the page breadcrumbs https://docs.abp.io/en/abp/latest/UI/Angular/Page-Component#page-parts

  • User Avatar
    1
    gogu.stere@3sstudio.com created

    Hi! I followed the steps from the link to configure the breadcrumbs, but it didn't produce the needed result. Instead, it added a new navigation and I want to update the existing one. Any ideas?

    Thanks!

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    After my check, there is no simple way to do it.

    You need to replace the breadcrumb-component https://docs.abp.io/en/commercial/latest/themes/lepton-x/angular-customization#breadcrumb-component

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11