PnP Site Breadcrumb Control In SharePoint Framework

PnP React Controls

Patterns and Practices (PnP) provides a list of reusable React controls to developers for building solutions such as webparts and extensions using SharePoint Framework.

Refer to this link to get the list of React controls for SPFx.

You will see how to use PnP Site Breadcrumb control in SPFx webpart.

PnP Site Breadcrumb Control

This control returns a breadcrumb based on the current location. Refer to this link for more details.

In this article, you will see how to perform the following tasks,

Prerequisites
Create SPFx solution
Implement Site Breadcrumb Control solution
Deploy the solution
Test the webpart

Prerquisites

Create SPFx solution

Open Node.js command prompt.

Create a new folder.

>md spfx-pnpreact-SiteBreadcrumb

Navigate to the folder.

> cd spfx-pnpreact-SiteBreadcrumb

Execute the following command to create SPFx webpart.

>yo @microsoft/sharepoint

Enter all the required details to create a new solution as shown below.

Yeoman generator will perform scaffolding process and once it is completed, lock down the version of project dependencies by executing the following command.

>npm shrinkwrap

Execute the following command to open the solution in the code editor.

>code .

Implement Site Breadcrumb Control solution

Execute the following command to install the PnP React Controls NPM package.

>npm install @pnp/spfx-controls-react --save

Open “src\webparts\pnPSiteBreadcrumb\components\IPnPSiteBreadcrumbProps.ts” file and update the code as shown below.

import { WebPartContext } from '@microsoft/sp-webpart-base';
export interface IPnPSiteBreadcrumbProps {
description: string;
context: WebPartContext;
}

Open webpart file “src\webparts\pnPSiteBreadcrumb\PnPSiteBreadcrumbWebPart.ts” and update the following.

Update the render method

Update the render method,

public render(): void {
const element: React.ReactElement<IPnPSiteBreadcrumbProps> = React.createElement(
PnPSiteBreadcrumb,
{
description: this.properties.description,
context: this.context
}
);
ReactDom.render(element, this.domElement);
}

Open “src\webparts\pnPSiteBreadcrumb\components\PnPSiteBreadcrumb.tsx” file and import the control.

import { SiteBreadcrumb } from "@pnp/spfx-controls-react/lib/SiteBreadcrumb";

Update the render method as shown below.

public render(): React.ReactElement<IPnPSiteBreadcrumbProps> {
return (
<div className={ styles.pnPSiteBreadcrumb }>
<SiteBreadcrumb context={this.props.context} />
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
</div>
</div>
</div>
</div>
);
}

Updated React component (src\webparts\pnPSiteBreadcrumb\components\PnPSiteBreadcrumb.tsx),

import * as React from 'react';
import styles from './PnPSiteBreadcrumb.module.scss';
import { IPnPSiteBreadcrumbProps } from './IPnPSiteBreadcrumbProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { SiteBreadcrumb } from "@pnp/spfx-controls-react/lib/SiteBreadcrumb";
export default class PnPSiteBreadcrumb extends React.Component<IPnPSiteBreadcrumbProps, {}> {
public render(): React.ReactElement<IPnPSiteBreadcrumbProps> {
return (
<div className={styles.pnPSiteBreadcrumb}>
<SiteBreadcrumb context={this.props.context} />
<div className={styles.container}>
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>Welcome to SharePoint!</span>
<p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
<p className={styles.description}>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={styles.button}>
<span className={styles.label}>Learn more</span>
</a>
</div>
</div>
</div>
</div>
);
}
}

Deploy the solution

Execute the following commands to bundle and package the solution.

>gulp bundle --ship

>gulp package-solution --ship

Navigate to tenant app catalog – Example: https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx

Upload the package file (sharepoint\solution\spfx-pnpreact-site-breadcrumb.sppkg). Click Deploy.

Test the webpart

Navigate to the SharePoint site and add the app.

Navigate to the page and add the webpart as shown below.

Result

Summary

Thus, in this article, you saw how to use PnP Site Breadcrumb Control in SharePoint Framework.