Menu Item Font Color

[Yo]

My Kendo menu items are loaded from a JSON file so it's dynamically created using the [items] property. How do I change the font color for menu items? 

I know there's a cssClass property on MenuItemComponent but that doesn't work for me.

[Yo]

I kind of gave up after a couple of hours struggling with this.

There's no way to change a submenu's style like font color or background color when using the [items] property to construct the menu.

Can anyone help?

[Svet]

Hi Yo,

Indeed, we can use the cssClass property of the MenuItem component. 

Check the following sample plunker demonstrating this approach:
https://plnkr.co/edit/9yh7pYG0Jp3rmo4sNqBW?p=preview

The important part is the following marked in red in app/items.ts:

export const items: any[] = [{
    text: 'Item1',
    items: [{ text: 'Item1.1', cssClass: 'blue' }, { text: 'Item1.2', items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }] }]
}, {
    text: 'Item2',
    items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
}, {
    text: 'Item3'
}];

and the definition of the ".blue" class in app.component.ts:

@Component({
    selector: 'my-app',
    template: `
        <kendo-menu (open)="onOpen()" [items]="items">
        </kendo-menu>
    `,styles: [`
      .blue{
        background-color: blue;
      }
    `], encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public items: any[] = items;

}

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Puri]

Hello,

We are using Breadcrumb control whose items are dynamically populated depending on the node selected in kendo treeview on the left panel. when the breadcrumb is rendered, all the items in the breadcrumb are in pink color and i'm not able to change the font color. Any help here is greatly appreciated

 

Thanks

[Georgi]

Hello Puri,

If I understand you correctly, you are currently using the Kendo UI for Angular BreadCrumb and are looking for an approach to change the font color of the component's items. Please, correct me if I misinterpreted the requirement.

One possible approach that would allow you to achieve the desired modification would be for the developer to utilize the .k-breadcrumb-link CSS selector and adjust the color property:

.k-breadcrumb-link{
    color: green;
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

https://stackblitz.com/edit/angular-5mdkwt

It is important to mention that the encapsulation meta data should be set to ViewEncapsulation.None.

I hope this helps.

Regards,
Georgi
Progress Telerik