Prime Community Forum

Hi,

I would like to make my root menu clickable :

example :

• Home => clickable (actually not by default in freya template)

• Dashboard => clickable

• Other => not clickable
  • Sub menu 1
  • Sub menu 2

Is there any way to achieve that, i used 'as-is' the menu system in the freya template

Thanks !

Kind Regards.

Hi,

I'll check and get back to you

Hi,

In app.menu.component, you'll see menu items as array and you can basically add it what you desire including callback to make root menu item actionable.

In app.menuitem.component, you'll see those menu items looped through to create menu elements. Inside the div with the class "layout-menuitem-root-text" there is an anchor element only visible if the menu item has a router link or child items. You can change it as you wish to display the anchor and make root menu item clickable. Or, you can use the callback I've mentioned above.

Thanks, indeed, i have to update the div root

<div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text" [routerLink]="item.routerLink">{{ item.label }}</div>

still have to customize the look and feel (cursor hand, active state, etc..)

Hi,

CSS of the menu is written for the default case which is the passive root item. You need to customize CSS too after making it clickable.