none
Creation of BreadCrumb navigation in modern pages in SharePoint online using SPFX React RRS feed

  • Question

  • Hi,

    Can  someone  please provide me how we can create breadcrumb navigation in modern pages in SharePoint online by SPFX using react or any or any Out of the box

    Friday, August 23, 2019 9:14 AM

All replies

  • Hi Rajesh,

    Please refer the following demo to build BreadCrumb Navigation in SPFX React solution:

    SPFx React Controls – SiteBreadcrumb Control

    Also here is a React solution already in GitHub, you can also refer:

    Breadcrumb application customizer

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, August 26, 2019 1:38 AM
  • Hi Jerry,

    I followed your reference link and code but i got the below error.

    

    Please see my below code for : INavigationProps.ts file 

    import ApplicationCustomizerContext from '@microsoft/sp-application-base/lib/extensibility/ApplicationCustomizerContext';
    export interface INavigationProps {
    context: ApplicationCustomizerContext;

    }

    Main ts file :NavigationApplicationCustomizer.ts file.

    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import Navigation from './components/Navigation';
    import { override } from '@microsoft/decorators';
    import { Log } from '@microsoft/sp-core-library';
    import {
    BaseApplicationCustomizer,
    PlaceholderContent,
    PlaceholderName
    } from '@microsoft/sp-application-base';
    import { Dialog } from '@microsoft/sp-dialog';
    import * as strings from 'NavigationApplicationCustomizerStrings';
    const LOG_SOURCE: string = 'NavigationApplicationCustomizer';
    /**
    * If your command set uses the ClientSideComponentProperties JSON input,
    * it will be deserialized into the BaseExtension.properties object.
    * You can define an interface to describe it.
    */
    export interface INavigationApplicationCustomizerProperties {
    // This is an example; replace with your own property
    testMessage: string;
    }
    /** A Custom Action which can be run during execution of a Client Side Application */
    export default class NavigationApplicationCustomizer
    extends BaseApplicationCustomizer<INavigationApplicationCustomizerProperties> {
    private _topPlaceholder: PlaceholderContent | undefined;
    private _onDispose(): void {
    console.log('[NavigationApplicationCustomizer._onDispose] Disposed custom nav placeholders.');
    }
    @override
    public onInit(): Promise<void> {
    if (!this._topPlaceholder) {
    this._topPlaceholder =
    this.context.placeholderProvider.tryCreateContent(
    PlaceholderName.Top,
    { onDispose: this._onDispose });
    // The extension should not assume that the expected placeholder is available.
    if (!this._topPlaceholder) {
    console.error('The expected placeholder (Top) was not found.');
    return;
    }
    const element: React.ReactElement<INavigationApplicationCustomizerProperties> = React.createElement(
    Navigation,
    {
    context: this.context
    }
    );
    ReactDom.render(element, this._topPlaceholder.domElement);
    }
    return Promise.resolve();
    }
    // public onInit(): Promise<void> {
    // Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
    // let message: string = this.properties.testMessage;
    // if (!message) {
    // message = '(No properties were provided.)';
    // }
    // Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);
    // return Promise.resolve();
    // }
    }

    Let  me if i miss anything here.

    Thanks

    rajesh

    Monday, August 26, 2019 6:47 AM
  • Hi Rajesh,

    The issue is related to  pnp/spfx-controls-react, this react control is not suitable for latest SPFX solution version.

    You can use JSOM library to create breadcrumb navigation instead as below:

    Build a breadcrumb using SPFx extensions

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, August 26, 2019 9:32 AM