Packaging and Deploying a Custom Top Navigation Menu in SPFx

This final part of our series walks through how to:

1. Create the required SharePoint list
2. Integrate the list into the SPFx extension
3. Package and deploy the SPFx extension to SharePoint Online

Step 1: Create the TopMenu SharePoint List

A. Create the list manually (GUI)

Navigate to your site (e.g. https://sharepoint.com/sites/site) and:

1. Go to Site Contents
2. Click + New > List
3. Name the list TopMenu
4. Remove all columns except Title
5. Add a new column:
   • Column Name: Url
   • Type: Hyperlink

Now populate it with items like:

Step 2: Integrate List into SPFx Web Extension

You’ve already created the following:

• SPFx Extension: TopMenuApplicationCustomizer
• React component: NavigationMenu.tsx

Make sure your component uses the list defined above and passes it using the props ListTitle and siteUrl.

Confirm that your NavigationMenu is being rendered via this block in _renderPlaceHolders():

const reactElt: React.ReactElement = React.createElement(NavigationMenu, {
  type: "Default",
  ListTitle: "TopMenu",
  AppContext: this.context,
  siteUrl: this.context.pageContext.site.absoluteUrl
});
ReactDOM.render(reactElt, this._topPlaceholder.domElement);

This guarantees your extension is site-aware and automatically adapts to the current site.

Step 3: Package the Solution

A. config/package-solution.json

Ensure your solution is configured to be tenant-scoped:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "top-menu-extension",
    "id": "GUID-HERE",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "features": [{
      "title": "TopMenu",
      "description": "Injects a top navigation menu",
      "id": "GUID-FEATURE",
      "version": "1.0.0.0",
      "assets": {
        "elementManifests": [
          "elements.xml"
        ]
      }
    }]
  },
  "paths": {
    "zippedPackage": "solution/top-menu.sppkg"
  }
}

B. sharepoint/assets/elements.xml

Register the extension to run on all sites:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    Title="TopMenu"
    Location="ClientSideExtension.ApplicationCustomizer"
    ClientSideComponentId="YOUR-COMPONENT-ID"
    ClientSideComponentProperties="{}"
    HostWebDialog="false">
  </CustomAction>
</Elements>

Replace YOUR-COMPONENT-ID with the GUID from your TopMenuApplicationCustomizer.manifest.json.

Step 4: Build and Deploy

A. Build

gulp clean
gulp build
gulp bundle --ship

B. Package

gulp package-solution --ship

This generates the .sppkg file under sharepoint/solution/top-menu.sppkg.

C. Upload to App Catalog

1. Go to your SharePoint App Catalog
2. Upload the .sppkg file to the Apps for SharePoint library
3. Click Deploy

D. Install on Site

1. Navigate to your SharePoint site
2. Go to Site Contents > Add an App
3. Add the TopMenu app

After installation, your custom top navigation will appear on the modern page interface.

Summary Table

References

• SPFx Extensions Overview
• Deploying SPFx Solutions
• Custom Actions and Application Customizers