Start a project
Blog

Switch Between React Components using Fluent UI Pivot in SPFx

5 Jun 2020
SPFxFluent UIReactPivot

This article explains how to switch between React components using Fluent UI Pivot in the SharePoint Framework (SPFx) web part.
The Fluent UI Pivot provides an elegant tab-based navigation system for organizing content within web parts.

⚙️ Install Dependencies

If you haven’t installed Fluent UI already, run:

npm install office-ui-fabric-react --save

🧩 Implement Fluent UI Pivot Navigation

1️⃣ Main Component (SpfxFluentUiPivot.tsx)

import * as React from 'react';
import styles from './SpfxFluentUiPivot.module.scss';
import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
import SpfxFluentUiPivotTab1 from './SpfxFluentUiPivotTab1';
import SpfxFluentUiPivotTab2 from './SpfxFluentUiPivotTab2';
import SpfxFluentUiPivotTab3 from './SpfxFluentUiPivotTab3';

export default class SpfxFluentUiPivot extends React.Component<{}, {}> {
  public render(): React.ReactElement<{}> {
    return (
      <div className={styles.spfxFluentUiPivot}>
        <h2>Switch Between Tabs</h2>
        <Pivot aria-label="Fluent UI Pivot Example">
          <PivotItem headerText="Personal Details">
            <SpfxFluentUiPivotTab1 />
          </PivotItem>
          <PivotItem headerText="Contact Details">
            <SpfxFluentUiPivotTab2 />
          </PivotItem>
          <PivotItem headerText="Memberships">
            <SpfxFluentUiPivotTab3 />
          </PivotItem>
        </Pivot>
      </div>
    );
  }
}

2️⃣ Tab 1 Component (SpfxFluentUiPivotTab1.tsx)

import * as React from 'react';
import { TextField, PrimaryButton } from 'office-ui-fabric-react';

export default class SpfxFluentUiPivotTab1 extends React.Component<{}, {}> {
  public render(): React.ReactElement<{}> {
    return (
      <div>
        <TextField label="First Name" />
        <TextField label="Last Name" />
        <TextField label="Phone Number" />
        <PrimaryButton text="Save" />
      </div>
    );
  }
}

3️⃣ Tab 2 Component (SpfxFluentUiPivotTab2.tsx)

import * as React from 'react';

export default class SpfxFluentUiPivotTab2 extends React.Component<{}, {}> {
  public render(): React.ReactElement<{}> {
    return (
      <div>
        <h3>Contact Details</h3>
        <p>This tab can include email, address, and other contact information.</p>
      </div>
    );
  }
}

4️⃣ Tab 3 Component (SpfxFluentUiPivotTab3.tsx)

import * as React from 'react';

export default class SpfxFluentUiPivotTab3 extends React.Component<{}, {}> {
  public render(): React.ReactElement<{}> {
    return (
      <div>
        <h3>Membership Information</h3>
        <p>Display related memberships or roles here.</p>
      </div>
    );
  }
}

🚀 Build and Deploy

Once development is complete, build and package the solution:

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

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

📂 GitHub Sample Project

View full SPFx project on GitHub:Switch Between React Components using Fluent UI Pivot in SPFx

GitHub

✅ Summary

The Fluent UI Pivot component allows seamless navigation between multiple sections or forms in a single web part.
This approach keeps your UI clean and user-friendly while leveraging reusable React components.