Custom Quick Launch using Fluent UI Nav in SPFx

This article demonstrates how to implement a Custom Quick Launch using Fluent UI Nav in the SharePoint Framework (SPFx) web part.
The Fluent UI Nav control provides an elegant, responsive navigation sidebar that enhances the usability and appearance of your SharePoint site.

⚙️ Install Required Dependencies

Install the necessary Fluent UI and PnPjs packages:

npm install @pnp/sp --save
npm install office-ui-fabric-react --save

🧩 Implement Fluent UI Nav Quick Launch

1️⃣ Define the State Interface

Create a new file ISpFxFluentUiNavState.ts:

export interface ISpFxFluentUiNavState {
  links: any[];
}

2️⃣ Main Component Implementation

Update your main component file (e.g., SpFxFluentUiNav.tsx) with the following code:

import * as React from 'react';
import styles from './SpFxFluentUiNav.module.scss';
import { ISpFxFluentUiNavProps } from './ISpFxFluentUiNavProps';
import { ISpFxFluentUiNavState } from './ISpFxFluentUiNavState';
import { Nav } from 'office-ui-fabric-react/lib/Nav';
import { sp } from '@pnp/sp/presets/all';
import "@pnp/sp/webs";
import "@pnp/sp/navigation";

export default class SpFxFluentUiNav extends React.Component<ISpFxFluentUiNavProps, ISpFxFluentUiNavState> {
  constructor(props: ISpFxFluentUiNavProps) {
    super(props);
    this.state = { links: [] };
    sp.setup({ spfxContext: (window as any).spfxContext });
  }

  public componentDidMount(): void {
    this._getQuickLaunch();
  }

  private async _getQuickLaunch(): Promise<void> {
    const treeLinks = await sp.web.navigation.quicklaunch();
    const linkGroups: any[] = [];

    treeLinks.forEach(link => {
      if (link.Title && link.Url) {
        linkGroups.push({
          name: link.Title,
          url: link.Url,
          key: link.Id.toString()
        });
      }
    });

    this.setState({ links: linkGroups });
  }

  private _onLinkClick = (ev?: React.MouseEvent<HTMLElement>, item?: any): void => {
    if (item && item.url) {
      window.open(item.url, "_self");
    }
  };

  public render(): React.ReactElement<ISpFxFluentUiNavProps> {
    return (
      <div className={styles.spFxFluentUiNav}>
        <Nav
          groups={[{ links: this.state.links }]}
          onLinkClick={this._onLinkClick}
          selectedKey=""
        />
      </div>
    );
  }
}

🧠 How It Works

The PnPjs library retrieves navigation links from the site’s Quick Launch.
Fluent UI Nav displays those links as a dynamic sidebar.
Clicking a link opens the respective page in the same tab.

🚀 Build and Deploy

Run the following commands to build and package your SPFx solution:

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

Upload the .sppkg file from sharepoint/solution to your App Catalog, then add the web part to a SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Custom Quick Launch using Fluent UI Nav in SPFx

GitHub

✅ Summary

The Fluent UI Nav control provides an elegant, flexible, and responsive way to create a custom Quick Launch in SPFx.
By combining PnPjs and Fluent UI, you can dynamically fetch and render site navigation links for a seamless SharePoint experience.