I just created side bar component using lightning-vertical-navigation in that I just created sub navigation items called "Employee Info" while I click this employee info it need to display another component called employee info. But I just gave the background color of this navigation item as black also the lightning-vertical-navigation-item font color also black it doesn't look good I can't even see the navigation item text.

"I need to change the lightning-vertical-navigation-item font color"

I refer the documentation but there is no reference about this...

1 Answer 1


Due to Shadow DOM css don't leak from your component to its children. Only if Styling Hooks are available you can modify the CSS of a standard component.

Indeed the color CSS property of a lightning-vertical-navigation-item is set by the slds-nav-vertical__action CSS class:

color: var(--slds-g-color-neutral-base-10, var(--lwc-colorTextDefault, rgb(24, 24, 24)));

Since it uses a CSS custom property, you can override it, but in order to do it only in the right section, you could add a custom class to your container, then set it.
Something like:


:host .green {
    --lwc-colorTextDefault: #00FF00;


    <lightning-vertical-navigation-section label="Green Section" class="green">
        <lightning-vertical-navigation-item label="Green" name="green"></lightning-vertical-navigation-item>
        <lightning-vertical-navigation-item label="Also green" name="also-green"></lightning-vertical-navigation-item>
    <lightning-vertical-navigation-section label="Black Section">
        <lightning-vertical-navigation-item label="Black" name="black"></lightning-vertical-navigation-item>

The output will be:

If a styling hook is not available, you could build your own component starting from the blueprints.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .