SharePoint · Community sample

SPFx Global Navigation Header Customizer

This extension mounts into the SharePoint Online Top placeholder to render a responsive global header with a customizable brand area, desktop mega-menu navigation, and a mobile drawer. It includes built-in tools for search, profile info, bookmarks, notifications, and accessibility controls. You can also enable an optional HTML footer in the Bottom placeholder and inject SEO metadata dynamically from your navigation terms.

Application customizerReactSPFx 1.23.2

The idea behind the sample

Make it your own

Start with the author's setup instructions, explore the implementation, and adapt the pattern to your environment. Sample code stays in its original repository, together with its requirements, license and contribution history.

Read the source documentation

A closer look

Keep exploring

Overview of SharePoint Framework Extensions — You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.
Use page placeholders from Application Customizer — Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.

Transparent by designThe gallery preserves source attribution and known metadata issues instead of silently rewriting them.

View 12 source metadata notes

downloadUrl: No download link; derive one explicitly in the future gallery.
thumbnails[0].alt: Replace generic alt text with a description of the sample.
thumbnails[1].alt: Replace generic alt text with a description of the sample.
thumbnails[10].alt: Replace generic alt text with a description of the sample.
thumbnails[2].alt: Replace generic alt text with a description of the sample.
thumbnails[3].alt: Replace generic alt text with a description of the sample.
thumbnails[4].alt: Replace generic alt text with a description of the sample.
thumbnails[5].alt: Replace generic alt text with a description of the sample.
thumbnails[6].alt: Replace generic alt text with a description of the sample.
thumbnails[7].alt: Replace generic alt text with a description of the sample.
thumbnails[8].alt: Replace generic alt text with a description of the sample.
thumbnails[9].alt: Replace generic alt text with a description of the sample.

View the collected metadata

Keep the ideas flowing

Back to all possibilities