Selected menu link class 'active' is not working
hi there,
i would like to know how the below active menu css works
[ngClass]="calculateMenuItemCssClass("/project")">Lets say i have created menu as like below
Apps
- Projects
- Workflow
- List
- Component
- Generate File
As i put calculateMenuItemCssClass('/project') in main so all under the Projects menu when ever i clicked the hover is highlighted.
However when i click Component->Generate File it does not working.
Does this need to create as the Menu hierarchy modules
like Apps - > Project,Components and etc.
There is hight chance the menu could be changed before it move to production.
Please advise me on this.
Replies (4)
You're welcome! Feel free to reach out whenever you're ready or if you have any more questions in the future.
Hi,
The function is located in the file /angular/demo1/src/app/_metronic/layout/components/header/header-menu/header-menu.component.ts
No problem! If your menu structure is like this:
- Apps
- Projects
- Workflow
- List
- Component
- Generate File
And you want to apply the "active" class to the menu items based on the current URL, you'll need to modify the code slightly to accommodate this nested menu structure.
In your HTML template, you would apply the [ngClass] attribute to each level of the menu structure, passing the appropriate URL for each menu item.
Please refer here for the HTML code: https://gist.github.com/KeenthemesHub/7865c4dd621404d40da123970146d3f5
Could you please try to modify the code as described above, the "active" class should be applied to the correct menu items based on the current URL, even in the case of nested menu items.
Sorry for above. it should be like this
Apps
- Projects
- Workflow
- List
- Component
- Generate File
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
