0 
<lightning-vertical-navigation selected-item={selectedItem} onselect={handleselecteditem} class="navigation">
              <lightning-vertical-navigation-section label="Teacher">
              <lightning-vertical-navigation-item-icon label="Teacher Dashboard"  name="teacher dashboard" icon-name="utility:home" class="my icon"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon  label="Edit Teacher Profile" name="edit teacher profile" icon-name="utility:identity"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Photo Albums" name="My Photo Albums" icon-name="utility:image" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Messages" name="My Messages" icon-name="utility:email" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Member Assistance Program" name="My MemberAssistance Program" icon-name="utility:groups" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="Communication Settings" name="Communication Settings" icon-name="utility:automate" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="Billing" name="Billing" icon-name="utility:moneybag" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Teaching Hours" name="MyTeachingHours" icon-name="utility:clock" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Training Hours" name="MyTrainingHours" icon-name="utility:clock" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="commUnity" name="commUnity" icon-name="utility:comments" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="YACEP® Dashboard" name="yacep dashboard" icon-name="utility:groups" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
          </lightning-vertical-navigation-section>

How can I change the label color for this navigation icon labels. I changed icon color using

:host {
    --sds-c-icon-color-foreground-default: rgb(219, 40, 40);
}

But I need to change label color too.

Improve this question

1 Answer 1

Reset to default
0

There are no styling hooks for label's color, so you cannot change it. Even if you set valid css rules in your component, it will not leak into standard lightning-vertical-navigation-item-icon component due to Shadow DOM.

Anyway you could build your own component starting from blueprint, or you could replace those lightning-vertical-navigation-item-icon with a combination of div and lightning-icon, this way you could add your own style for the label, I.E.

HTML

<div class="slds-nav-vertical__item" onclick={setActive}>
    <a href="#" class="slds-nav-vertical__action">
        <lightning-icon icon-name="utility:home" size="x-small" class="slds-m-right_x-small" alternative-text="Teacher Dashboard" title="Teacher Dashboard"></lightning-icon>
        <!-- Label -->
        <span class="slds-text-color_error">Teacher Dashboard</span>
    </a>
</div>

<div class="slds-nav-vertical__item" onclick={setActive}>
    <a href="#" class="slds-nav-vertical__action">
        <lightning-icon icon-name="utility:identity" size="x-small" class="slds-m-right_x-small" alternative-text="Edit Teacher Profile" title="Edit Teacher Profile"></lightning-icon>
        <!-- Label -->
        <span class="slds-text-color_error">Edit Teacher Profile</span>
    </a>
</div>

In order to have the same behavior of the standard component, I've added a listener on click event on outer div to set the element as active. It just toggle the slds-is-active class on that element.

Javascript

previousActiveElement;

setActive(event) {
    if (this.previousActiveElement) {
        this.previousActiveElement.classList.remove('slds-is-active');
    }
    event.currentTarget.classList.add('slds-is-active');
    this.previousActiveElement = event.currentTarget;
}
Improve this answer
3
  • Thank you so much for your valuable information. Commented Aug 12, 2023 at 14:05
  • I do in this way and its working... Commented Aug 12, 2023 at 14:11
  • @AnuAnil You're welcome, glad I could help. Please consider to mark helpful answers provided to your questions as accepted, to benefit the whole community. Here you can read why this is a good practice. Commented Aug 12, 2023 at 14:17

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.