I have a SPFX customizer that displays a banner in the topPlaceholder. When the page loads, if it's a list, then it performs a calculation and then displays the banner.

When I move from one library to another, because the page isn't performing a full load, I found out I need use the navigatedEvent. This fires when the navigation changes.

However, I need to display the banner differently depending on what folder I'm in within a single document library. When navigating from one folder to another in a document library the navigatedEvent doesn't seem to fire, even though I am navigating to a different location.

Is this a bug with the navigatedEvent, or should I be using a different event?

    public onInit(): Promise<void> {
       var rootSiteFullUrl = this.context.pageContext.site.absoluteUrl;
      spfxContext: this.context

   this.context.application.navigatedEvent.add(this,  this.renderControl);  
    return Promise.resolve<void>();

    private renderControl(){
    Log.info(LOG_SOURCE, `Available placeholders: ${this.context.placeholderProvider.placeholderNames.map(name => PlaceholderName[name]).join(', ')}`);

    //handling the top placeholder
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
          {onDispose: this._onDispose});

        console.error(`The expected placholder (Top) was not found.`);

        const element : React.ReactElement<IInfoBarMainProps> = React.createElement(
            siteRelativeUrl: this._siteRelativeURL,
            listID: this._listID,
            rootSiteUrl: this._rootSiteURL,
            context: this.context

        ReactDom.render(element, this._topPlaceholder.domElement);

  private _onDispose(){
    Log.info(LOG_SOURCE, `[IInfoBarApplicationCustomizer._onDispose] Disposed custom top placeholders`);

I have a feeling that there isn't an event for navigating inside a folder, as when I'm in a folder, there is nothing within the this.context.pageContext that indicates that I'm in a folder.


I found the same issue and I troubleshooted it using the mutation observer and monitoring the breadcrumb. Here is some code that will help you to reach your goal:

let targetNode1 = document.querySelector(".od-ItemsScopeItemContent > div > div > div > div >div");

this._observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => this._myCustomHeaderBasedOnCurrentFolder(mutation));

if (targetNode1) {
  this._observer.observe(targetNode1, {
    attributes: true,
    attributeOldValue: true,


The method


Is the action you want to perform when browsing through the folders. You will need to tune up a bit the observer config for a better monitoring.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.