Mega Menu using SharePoint Framework (SPFx) Extensions

This article explains how to create a Mega Menu in SharePoint Online using a SharePoint Framework (SPFx) Application Customizer Extension.
The mega menu is fully responsive and uses Bulma CSS, a lightweight CSS framework, to create a clean, modern layout.

📦 Install dependencies

Install required packages:

npm install bulma --save

You can optionally include Font Awesome for icons:

npm install font-awesome --save

🎨 Add Bulma CSS and logo

Import the Bulma stylesheet and your logo image inside the Application Customizer:

require('./bulma.css');
const logo: any = require('./ravilogo.png');

These files should be placed under the /src/extensions/megaMenu/ folder.

💻 Implement the Mega Menu layout

Replace the contents of your MegaMenuSpFxApplicationCustomizer.ts file with the following code:

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from '@microsoft/sp-application-base';

import * as strings from 'MegaMenuSpFxApplicationCustomizerStrings';

const LOG_SOURCE: string = 'MegaMenuSpFxApplicationCustomizer';

require('./bulma.css');
const logo: any = require('./ravilogo.png');

export interface IMegaMenuSpFxApplicationCustomizerProperties {
  Top: string;
}

export default class MegaMenuSpFxApplicationCustomizer
  extends BaseApplicationCustomizer<IMegaMenuSpFxApplicationCustomizerProperties> {

  private _topPlaceholder: PlaceholderContent | undefined;

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
    this._renderPlaceHolders();
    return Promise.resolve<void>();
  }

  private _renderPlaceHolders(): void {
    if (!this._topPlaceholder) {
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top,
        { onDispose: this._onDispose }
      );

      if (!this._topPlaceholder) {
        console.error("The expected placeholder (Top) was not found.");
        return;
      }

      if (this._topPlaceholder.domElement) {
        this._topPlaceholder.domElement.innerHTML = `
        <nav class="navbar">
          <div class="navbar-brand">
            <a class="navbar-item" href="https://ravichandran.blog/">
              <img src="${logo}" alt="SharePoint Mega Menu" width="112" height="28">
            </a>
          </div>

          <div id="navMenu" class="navbar-menu">
            <div class="navbar-start">
              <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">Docs</a>
                <div class="navbar-dropdown">
                  <a class="navbar-item">Overview</a>
                  <a class="navbar-item">Modifiers</a>
                  <a class="navbar-item">Columns</a>
                  <a class="navbar-item">Layout</a>
                  <hr class="navbar-divider">
                  <div class="navbar-item">More Examples</div>
                </div>
              </div>

              <div class="navbar-item has-dropdown is-hoverable is-mega">
                <a class="navbar-link">Blog</a>
                <div class="navbar-dropdown is-boxed">
                  <div class="container is-fluid">
                    <div class="columns">
                      <div class="column">
                        <h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
                        <a class="navbar-item">Feature One</a>
                        <a class="navbar-item">Feature Two</a>
                        <a class="navbar-item">Feature Three</a>
                      </div>
                      <div class="column">
                        <h1 class="title is-6 is-mega-menu-title">More Links</h1>
                        <a class="navbar-item">Overview</a>
                        <a class="navbar-item">Layout</a>
                        <a class="navbar-item">Elements</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <a class="navbar-item" href="https://ravichandran.blog/">Blog</a>
            </div>
          </div>
        </nav>`;
      }
    }
  }

  private _onDispose(): void {
    console.log('Mega Menu disposed.');
  }
}

🚀 Deploy the solution

Build and package the solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your App Catalog, and deploy it globally or to specific site collections.

Then refresh your SharePoint modern site to see the new Mega Menu appear at the top placeholder area.

🔗 GitHub Source

You can download the complete project source from the following GitHub repository:
👉 Mega Menu using SharePoint Framework (SPFx) Extensions