Customize quick launch on modern team site

%3CLINGO-SUB%20id%3D%22lingo-sub-773286%22%20slang%3D%22en-US%22%3ECustomize%20quick%20launch%20on%20modern%20team%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-773286%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20there%20a%20supported%20way%20to%20customize%20the%20left%20quick%20launch%20navigation%20look%2Ffeel%20(e.g.%20the%20old%20CSS%2FJquery%20accordion%20style)%3F%20I%20have%20found%20examples%20of%20hiding%20it%20using%20an%20SPFx%20extension%20with%20CSS%20injection....alternatively%2C%20has%20anyone%20created%20a%20custom%20modern%20webpart%20to%20act%20in%20the%20same%20way%20(e.g.%20site%20navigation).%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-773326%22%20slang%3D%22en-US%22%3ERe%3A%20Customize%20quick%20launch%20on%20modern%20team%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-773326%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3CBR%20%2F%3E%3CBR%20%2F%3EAt%20the%20present%20moment%20SPFx%20is%20your%20solution.%3CBR%20%2F%3EOn%20the%20roadmap%2C%20you%20will%20see%20that%20a%20feature%20of%20updating%20%22Change%20the%20look%22%20panel%20is%20on%20its%20way%20-%20which%20will%20basically%20offer%20more%20ways%20of%20customization%20directly%20from%20the%20UI.%20According%20to%20the%20description%20the%20panel%20update%20will%20include%20a%20new%20tab%20interface%20for%20various%20site%20settings%20such%20as%3A%20theme%2C%20header%2C%20%3CSTRONG%3Enavigation%3C%2FSTRONG%3Eand%20footer.%20%3A%20)%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EBest%2C%3CBR%20%2F%3ERamona%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-773367%22%20slang%3D%22en-US%22%3ERe%3A%20Customize%20quick%20launch%20on%20modern%20team%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-773367%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F131685%22%20target%3D%22_blank%22%3E%40Ramona%20Badea%3C%2FA%3E%26nbsp%3B%3A)%3C%2Fimg%3E%20specifically%20what%20can%20SPFx%20do%20to%20customize%20the%20quick%20launch%3F%20Or%20do%20you%20mean%20creating%20a%20custom%20SPFx%20web%20part%20to%20replace%20it%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-773394%22%20slang%3D%22en-US%22%3ERe%3A%20Customize%20quick%20launch%20on%20modern%20team%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-773394%22%20slang%3D%22en-US%22%3ECustom%20branding%20is%20a%20supported%20customization%20for%20modern%20pages.%20With%20custom%20CSS%20you%20can%20pretty%20much%20do%20anything%20you%20want.%20%3CBR%20%2F%3EUnfortunately%2C%20I%20can't%20help%20too%20much%20on%20this%20-%20it%20is%20not%20recommended%2C%20as%20Microsoft%20is%20constantly%20adding%20new%20features%20to%20SPO%2C%20as%20mentioned%20in%20the%20previous%20comment.%20The%20customizations%20you%20make%20with%20injecting%20custom%20CSS%20may%20stop%20working%20if%20the%20structure%20of%20the%20page%20changes%2C%20or%20worse%2C%20you%20could%20make%20changes%20to%20a%20page%20that%20prevent%20new%20features%20from%20appearing%20on%20your%20tenant.%3C%2FLINGO-BODY%3E
New Contributor

Is there a supported way to customize the left quick launch navigation look/feel (e.g. the old CSS/Jquery accordion style)? I have found examples of hiding it using an SPFx extension with CSS injection....alternatively, has anyone created a custom modern webpart to act in the same way (e.g. site navigation).

3 Replies

Hello,

At the present moment SPFx is your solution.
On the roadmap, you will see that a feature of updating "Change the look" panel is on its way - which will basically offer more ways of customization directly from the UI. According to the description the panel update will include a new tab interface for various site settings such as: theme, header, navigation and footer. : ) 

Best,
Ramona

Thanks @Ramona Badea :) specifically what can SPFx do to customize the quick launch? Or do you mean creating a custom SPFx web part to replace it?

Custom branding is a supported customization for modern pages. With custom CSS you can pretty much do anything you want.
Unfortunately, I can't help too much on this - it is not recommended, as Microsoft is constantly adding new features to SPO, as mentioned in the previous comment. The customizations you make with injecting custom CSS may stop working if the structure of the page changes, or worse, you could make changes to a page that prevent new features from appearing on your tenant.