SPFx Application Customizer: Adding Headers and Footers

Application Customizers let you add global headers and footers to SharePoint pages. Perfect for branding, notices, or navigation.

Create the Extension

yo @microsoft/sharepoint
# Select Extension
# Select Application Customizer

Using Placeholders

import { BaseApplicationCustomizer, PlaceholderName } from '@microsoft/sp-application-base';

export default class HeaderFooterCustomizer extends BaseApplicationCustomizer {
  
  public onInit(): Promise {
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceholders);
    return Promise.resolve();
  }
  
  private _renderPlaceholders(): void {
    const top = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
    const bottom = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
    
    if (top) {
      top.domElement.innerHTML = '<div class="header">Welcome Banner</div>';
    }
    
    if (bottom) {
      bottom.domElement.innerHTML = '<div class="footer">© 2019 Our Company</div>';
    }
  }
}

Deployment

After deployment, activate the extension tenant-wide or per-site using PowerShell or the CLI for Microsoft 365.