Angular sidebar separator styling

[Walter Cook]

Adding items to a sidebar menu via

this.menuItemsDynamic.push(

                    {

                        text: 'Create Ticket   ', url: '/tickets-add', 

                    }

                   )

                   this.menuItemsDynamic.push(

                    {

                      separator: true

                    }

                   )

Is there a way to change the weight and color?

Is there a way to add a header or label?

Thanks

[Sangeetha Priya Murugan]

Hi Walter, 

 

Thank you for contacting Syncfusion support. 

 

Query #1: Is there a way to change the weight and color? 

 

We have checked your reported requirement and we can be able to customize the menu item by using the “e-menu-item” class in your CSS reference. For more details, please refer the below link. 

 

https://ej2.syncfusion.com/angular/documentation/menu/style-and-appearance/ 

 

Query #2: Is there a way to add a header or label? 

 

We have checked your reported query and before we proceed further, please share the below details. 

 

1. Please confirm whether you need to add header/label in Menu or Sidebar item. 

2.Please share the detailed description like screenshot or video demonstration for this requirement. 

 

Could you please share the the above requested details, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Sangeetha M 

[Walter Cook]

I'm looking to change the color of the separator line in the sidebar and/or change its weight.

(See attached)

I was also wondering if there's a way to add a section label right above that line

SomeMenuItem

SomeMenuItem

a small label

separator line

SomeMenuItem

though that one feels unlikely.

thanks

Attachment: Sidebar_ec5699ab.zip

[Aravinthan Seetharaman]

Hi Walter, 

 

We have checked your requirement. And we achieve your requirement by using beforeItemRender event handler of Menu. Please refer the below code snippet and sample. 

 

app.component.html 

 

<ejs-menu [items]='menuItems' orientation='Vertical' cssClass='dock-menu' (beforeItemRender)='beforeItemRender($event)'></ejs-menu 

 

 

app.component.ts 

 

  private beforeItemRender(args: MenuEventArgs): void { 

    if (args.item.separator) { 

      let label: string = '<span>' + 'Custom Lable' + '</span>'; 

      args.element.innerHTML = label; 

    } 

  } 

 

 

app.component.css 

 

/* Separator customization*/ 

.e-menu-wrapper ul .e-menu-item.e-separator { 

  border-bottom-color: aquamarine; 

  border-bottom-width: 5px; 

} 

/* label customization */ 

.e-menu-wrapper ul .e-menu-item.e-separator, 

span { 

  color: antiquewhite; 

} 

 

 

Sample: https://stackblitz.com/edit/angular-wbumcd-xpngjk?file=app.component.css  

 

Could you please check whether the above details are fulfilling your requirement and get back to us if you need assistance on this. 

 

Regards, 

Aravinthan S