We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

generate menu url as routerlink instead of href

is it possible for <ejs-menu [items]='menuItems'></ejs-menu> to generate url as routerlinks instead of rel='nofollow' href. Thanks!

15 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team April 8, 2019 11:02 AM UTC

Hi Robby, 

Thank you for contacting Syncfusion support. 

We have checked your reported query and we suspect that you want to use angular routing while selecting menu items. We have prepared a stackblitz sample that demonstrate this requirement and the same can be found in the below link. 

Could you please check the above sample and get back to us whether we misunderstood your requirement or need further assistance on this?  

Vinoth Kumar S 

CA Casper July 18, 2019 08:16 PM UTC

Just had a look at this and it is a crazy amount of overhead to just do a routerLink which should be the native option when using Angular. Would it not make sense to update the component to rather use routerLink as the default? The solution provided is also very limited and will not give the flexibility needed. Surely this can't be the first time this has been brought up??

VK Vinoth Kumar Sundara Moorthy Syncfusion Team July 19, 2019 05:34 PM UTC

Hi Robby, 
Thank you for the update. 
We have checked your reported suggestion in our end and we can able to provide the router link for menu items using template property with CSS customization in it. Please find the below code example. 
Code Example 
selector: 'my-app', 
template: ` 
<ejs-menu #menu id='menu' [items]='menuItems' (open)="open($event)"> 
    <ng-template #template let-menuItems=""> 
        <a style="display:block" class="e-custom" [routerLink]="menuItems.path"> 
            {{ menuItems.text }} 
    .e-custom { 
        color: #333 !important; 
        text-decoration: none; 
For your convenience, we have prepared the sample based on our suggestion. Please find the link below, 
Could you please check the above details and get back to us, if you need any further assistance on this? 
Vinoth Kumar S 

RE Robby Encinas July 22, 2019 07:46 AM UTC

Dear Team, I've solved this problem already. Thanks!

VK Vinoth Kumar Sundara Moorthy Syncfusion Team July 24, 2019 06:38 AM UTC

Hi Robby, 
We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on Syncfusion components. 
Vinoth Kumar S 

AB Alan B Dee August 8, 2019 03:21 PM UTC

I just want to add the Robby is correct; that is way harder then it should be. MenuItemModel should just have an interface property: routerLink that functions the same way as it does in basic angular. I'd be interested to see how Robby solved this but I for one will be looking for a solution outside this component. 

VK Vinoth Kumar Sundara Moorthy Syncfusion Team August 20, 2019 11:59 AM UTC

Hi Robby, 
Good day to you. 
We have considered your suggestion and created an improvement task for this. We have planned to include this fix in our Essential Studio 2019 Volume 3 SP1 release, which is scheduled to roll out in September 2019. We appreciate your patience until then. 
You can track the status of this improvement using below link from our feedback portal, 
Vinoth Kumar S 

JA James October 17, 2019 12:27 AM UTC

Robby, how did you solve it?

JA James October 17, 2019 12:45 AM UTC

In the proposed workaround below, the 'menuItems.path' should be 'menuItems.url' because the syncfusion structure MenuItemModel does not have the property 'path'. Perhaps the .path property is being added in release that fixes this problem, 2019 Vol3 SP1 due mid Oct 2019

<ejs-menu #menu id='menu' [items]='menuItems' (open)="open($event)"> 
    <ng-template #template let-menuItems=""> 
        <a style="display:block" class="e-custom" [routerLink]="menuItems.path"> 
            {{ menuItems.text }} 

JA James October 17, 2019 01:19 AM UTC

The workaround does not work with icons in the meues.

When using sidebar with menu, there are no icons rendered.

What is the workaround so that I can have sidebar menu with icons with angular routing?

RE Robby Encinas October 17, 2019 05:42 AM UTC

Hi James, this is my workaround before and the icons are rendered properly. Thanks!

 <ejs-menu [items]='menuItems'>
                <ng-template #template let-menuItems="">
                  <div *ngIf="menuItems.text" style="width:100%;display:flex;justify-content:space-between;">
                    <span class="{{menuItems.iconCss}}"></span>
                    <span class="navRes" style="width:100%;">
                      <a class="e-menu-text e-menu-url" *ngIf="menuItems.url" routerLink={{menuItems.url}} >{{menuItems.text}}</a>

JA James October 21, 2019 11:27 AM UTC

The workaround provided by Synfusion in post above (July19) works in the most basic of uses, but does not work for typical cases. 
It does not
The Perfect Workaround
The workaround fixes everything, by overriding the MenuItemModel[] class to a child class and poloymorphism on that. The MenuItemModel is a class provided by Syncfusion defining the id, Text, iconCss and url of the route.

  1. In a new file create a new child interface extending (inherting) from MenuItemMode as below
export interface IMenuItemModelChild extends MenuItemModel {

    path?:string;     //This is for your path
    query?:string;     //This is for your optional query param, add more query properties if you need them
    items?: IMenuItemModelChild[]; //We over write the exiting items property of the parent

2. In your components ts file (the component where you use the menu), create your menu structure using IMenuItemModelChild instead of MenuItemModel

    public menuItems: IMenuItemModelChild[] = [
            text: 'Project',
            path: "all",
            iconCss: 'icon-globe icon',
            items: [
                { text: 'Open', path: 'projects', query: "44"},
                { text: 'New', path: 'projects' },
            text: 'Suppliers',
            iconCss: 'icon-bell-alt icon',
            items: [
                { text: 'New' },
                { text: 'Edit' },

3.In you httml file subscribe to the  'select' event (note you bind to 'menuItems' as normal, which is now a child class (ignore the orientation and cssClass properties they are not part of this workaround)

 [items]='menuItems' orientation='Vertical' cssClass='dock-menu' (select) = "onSelect($event)"  >

4. In your component.ts file define the event handler, cast the 'items' property of the event handler to
MenuItemModelChild, this gives you access to the path and query variables which you then use in the router.

    public onSelect(event:MenuEventArgs)
        const x:MenuItemModelChild = event.item;
        this.router.navigate([x.path, { filter: x.query, foo: 'foo' }], { relativeTo: this.route });
5. You'll need to inject Router and ActivatedRoute in to the constructor as shown below for completeness.

        private router: Router,
        private route:ActivatedRoute
        ) { }

6. And just so there is no misunderstanding, you don't use the workaround as proposed by Syncfusion. The only edits to the HTML
are as per my notes above. AND the existing url field must always be set to empty string, else an absolute route will occur

MV Madhan Venkateshan Syncfusion Team October 22, 2019 06:12 PM UTC

Hi James, 
Thanks for your update. 
We do not have support to allow query or parameters in the routes. The solution provided by robby on October 17 to allow icons in menu seems to be the suitable solution when rendered in template. 
Madhan V 

SP Shannon Pence September 25, 2020 05:35 AM UTC

How do you account for the > icon indicating further links?  Using the example provided on July 19, 2019.

SP Sangeetha Priya Murugan Syncfusion Team September 29, 2020 07:59 AM UTC

Hi Shannon, 
Thank you for your update. 
We have checked your reported requirement “To provide the router link for sub menu items”. For your convenience, we have prepared the sample based on your requirement. Please find the link below. 
Could you please check the above sample and get back to us, if you need any further assistance on this. 
Sangeetha M 

Live Chat Icon For mobile
Up arrow icon