How to customize left navigation using SPFx extension?

Y, Haritha (Cognizant) 0 Reputation points
2024-12-23T06:01:50.2+00:00

I need to change the background color of the left navigation items in SharePoint online modern view. How can I achieve this using SPFx extension?

SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
3,154 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Emily Du-MSFT 48,646 Reputation points Microsoft Vendor
    2024-12-23T08:32:59.03+00:00

    In the SharePoint modern page, if you want to change the background color of the left navigation, you need to develop modern script editor web part in the site collection, then add CSS codes in the modern script editor web part.

    First, download a compiled version from here, then enable this app and add it to all sites.

    Go to the site collection, add the modern script editor web part on the page, add CSS codes in the modern script editor web part.

    Similar question: https://learn.microsoft.com/en-us/answers/questions/749648/how-to-change-the-background-color-of-the-hub-navi

    Reference: https://sharepoint.handsontek.net/2023/03/15/use-script-editor-modern-sharepoint-sites/

    Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.