So we have developed a breadcrumbs extension that is supposed to work across all the sites within the tenant. The issue is that when switching between sites the headerPlaceholder is rendered multiple times, but goes away when re-loading the site.

enter image description here

Note how there are multiple breadcrum lines, the expected behaiviour would be that only the current sites breadcrum would be possible.

I've tried googeling the issue, but no luck.

I've tried to clear the placeholder element with no luck this._headerPlaceholder.domElement.innerHTML = '';

I've also tried to remove the placeholder in onDispose, but again no luck:

    if (this._headerPlaceholder && this._headerPlaceholder.domElement){

I'm quite new to SharePoint and have no clue where to even begin with this issue, any help would be highly appreciated.

1 Answer 1


Application customizers are rather tricky in terms of the page events. I suppose, the problem here is that the dispose method does not fire after the page navigation event, so onDispose callback will not work too. In my case I was using manual call of the dispose() method (for Sharepoint 2019 on-premise):

// ...
public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
    this.context.application.navigatedEvent.add(this, this._renderPlaceholders);
    return Promise.resolve();
// ...
// inside this._renderPlaceholders() method:
// ...
if (!this._topPlaceholder) {
    // Handling the top placeholder
    this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
      { onDispose: this._onDispose }
    window.addEventListener('beforeunload', (_e) => {
// ...

Also, you don't need to clear DOM manually, calling dispose() will do it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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