SOLVED

Customize new App Bar with SPFx

%3CLINGO-SUB%20id%3D%22lingo-sub-2392780%22%20slang%3D%22en-US%22%3ECustomize%20new%20App%20Bar%20with%20SPFx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2392780%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20it%20possible%20to%20hook%20into%20the%20new%20App%20Bar%20with%20a%20SPFx%20Application%20customizer%3F%20Until%20now%20we%20only%20have%20top%20and%20bottom%20placeholder.%20May%2C%20we%20now%20have%20a%20left%20placeholder%20to%20render%20custom%20menues%20below%20the%20default%20buttons%20of%20the%20app%20bar.%20That%20would%20be%20great.%3C%2FP%3E%3CP%3EUntil%20now%20I%20have%20a%20left%20navigation%20(SPFx%20App.%20Customizer)%20hooked%20into%20the%20top%20placeholder%20and%20rendered%20by%20css%20to%20the%20place%20where%20the%20new%20app%20bar%20is.%20I%20knew%2C%20I%20would%20come%20to%20this%20point.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2392780%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EExtensibility%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2393023%22%20slang%3D%22en-US%22%3ERe%3A%20Customize%20new%20App%20Bar%20with%20SPFx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2393023%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F102233%22%20target%3D%22_blank%22%3E%40Ronny%20Lewandowski%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECurrently%20there%20are%20no%26nbsp%3B%3CSPAN%3Eplaceholders%20inside%20the%20SharePoint%20app%20bar%20which%20you%20can%20use%20in%20SPFx%20application%20customizer.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EAlso%2C%20the%20SharePoint%20app%20bar%20may%20impact%20current%20page%20customizations%2C%20specifically%20those%20that%20appear%20on%20the%20left%20side.%20Check%20%22Impact%20of%20SharePoint%20app%20bar%20on%20page%20customizations%22%20section%20in%20below%20article%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CA%20title%3D%22Introducing%20a%20SharePoint%20app%20bar%20that%20features%20global%20navigation%22%20href%3D%22https%3A%2F%2Fganeshsanapblogs.wordpress.com%2F2021%2F02%2F24%2Fintroducing-a-sharepoint-app-bar-that-features-global-navigation%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3EIntroducing%20a%20SharePoint%20app%20bar%20that%20features%20global%20navigation%3C%2FA%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

Is it possible to hook into the new App Bar with a SPFx Application customizer? Until now we only have top and bottom placeholder. May, we now have a left placeholder to render custom menues below the default buttons of the app bar. That would be great.

Until now I have a left navigation (SPFx App. Customizer) hooked into the top placeholder and rendered by css to the place where the new app bar is. I knew, I would come to this point.

2 Replies
best response confirmed by Ronny Lewandowski (Occasional Contributor)
Solution

@Ronny Lewandowski 

 

Currently there are no placeholders inside the SharePoint app bar which you can use in SPFx application customizer.

Also, the SharePoint app bar may impact current page customizations, specifically those that appear on the left side. Check "Impact of SharePoint app bar on page customizations" section in below article:

Introducing a SharePoint app bar that features global navigation 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Thanks for your respnse.
The impact on the left side in my customizer (header and footer) are irrelevant, because I use margins. To sad, that MS did not implemented a left placeholder.
In the meantime I did some tests and I hide the App Bar. Therfore I use the client id of it (this is configurable in my customizer, if MS may change the id).
For now all my customizers are running fine and I have my own left navigation without the useless App Bar.