SPFx 1.23: List Panel Customizers, Navigation Extensibility & What's New

What's New in SPFx 1.23

SharePoint Framework 1.23 shipped in April 2026 as part of the Microsoft 365 developer platform's quarterly release cadence. This release is notable for introducing two new extension types that have been on the community's wishlist for several years: List Panel Customizers and Navigation Customizers. Together, they address two of the most common SharePoint extensibility patterns that previously required workarounds — injecting contextual UI into the list item detail panel, and customising the SharePoint left navigation without resorting to Application Customizer placeholders.

SPFx 1.23 targets Node.js 20 LTS (Node.js 18 support is deprecated but still functional with a warning), updates the internal webpack version to 5.91, and upgrades the React peer dependency to 18.3. The Yeoman generator for SharePoint now uses Vite as an optional bundler for new projects — though the webpack-based build chain remains the default for maximum compatibility with existing solutions.

Other improvements in this release include: improved hot module replacement in the local workbench (faster iteration cycles during development), a new @microsoft/sp-component-base API for theme-aware component styling without hard-coded CSS variables, and the promotion of the isDomainIsolated web part API to stable from its previous preview status. The full changelog is available in the SPFx release notes on GitHub.

List Panel Customizer: The Concept

When a user selects a SharePoint list item, a detail panel slides in from the right side of the screen — this is the list panel (also called the "information pane" or "details pane" in SharePoint documentation). Until SPFx 1.23, this panel was controlled entirely by SharePoint and was not extensible. Developers who needed to show contextual information alongside a list item — related records, external system data, approval history, document previews — had to create separate full-page web parts and link users away from the list view.

The List Panel Customizer is a new SPFx extension type that registers a React component for rendering inside this panel. When the user selects a list item and your customizer is associated with that list, your component renders below the standard SharePoint field values. Your component receives the selected item's field values, the list and site context, and the user's identity as props — giving you everything you need to load and display related data without leaving the list view.

Building a List Panel Component

Scaffold a new List Panel Customizer using the updated Yeoman generator. When prompted for the component type, select "List Panel Customizer". The generator creates a class that extends BaseListPanelCustomizer and a React component file that receives the IListPanelCustomizerContext as its primary prop.

# Ensure generator is at 1.23+
npm install -g @microsoft/[email protected]

mkdir contract-detail-panel && cd contract-detail-panel
yo @microsoft/sharepoint

# Prompts:
# ? Component type: List Panel Customizer
# ? Customizer name: ContractDetailPanel
# ? Framework: React

import { BaseListPanelCustomizer, IListPanelCustomizerContext } from '@microsoft/sp-listview-extensibility';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ContractPanel } from './components/ContractPanel';

export default class ContractDetailPanelCustomizer
  extends BaseListPanelCustomizer {

  public onInit(): Promise<void> {
    return Promise.resolve();
  }

  // Called whenever a list item is selected
  public onRenderPanel(
    domElement: HTMLElement,
    context: IListPanelCustomizerContext
  ): void {
    const element = React.createElement(ContractPanel, {
      item: context.selectedItem,
      siteUrl: this.context.pageContext.web.absoluteUrl,
      httpClient: this.context.httpClient,
    });
    ReactDOM.render(element, domElement);
  }

  // Called when item deselected or panel closes
  public onDisposePanel(domElement: HTMLElement): void {
    ReactDOM.unmountComponentAtNode(domElement);
  }
}

The React component you render inside onRenderPanel is a standard functional or class component — there are no special constraints. You have access to the full React 18 API including hooks, context, and Suspense. The context.selectedItem object contains all fields that were fetched by the list view's current column configuration — to access additional fields, use the context.listId and context.selectedItem.id to make a targeted SharePoint REST or PnPjs call inside the component.

Associate your customizer with a specific list using a ClientSideComponentProperties JSON blob in the list's custom actions, or deploy it through the App Catalog as a list-scoped extension using the standard SPFx extension deployment mechanism. The customizer registration in elements.xml now includes a ListTemplateType filter property, allowing you to target only document libraries, only custom lists, or only specific content types without writing filtering logic in code.

Navigation Customizer: Extending the Left Nav

The Navigation Customizer is the second major extension type introduced in SPFx 1.23. It allows you to inject React components into the SharePoint left navigation area — the vertical menu that appears on modern team sites and communication sites. Unlike the Application Customizer's header and footer placeholders, the Navigation Customizer injects components inside the existing navigation structure, not around it.

Navigation Customizers support three injection positions: AboveLinks (above the standard navigation links), BelowLinks (below the standard links), and BetweenLinks (injected between specific named links using a configuration API). The most common use case is BelowLinks — injecting contextual shortcuts, a team contact card, or a quick-access tools section at the bottom of the left nav without overriding the standard navigation structure.

import { BaseNavigationCustomizer, NavigationPosition } from '@microsoft/sp-application-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TeamContactCard } from './components/TeamContactCard';

export default class TeamNavCustomizer
  extends BaseNavigationCustomizer {

  public onInit(): Promise<void> {
    return Promise.resolve();
  }

  public get position(): NavigationPosition {
    // Inject below all standard nav links
    return NavigationPosition.BelowLinks;
  }

  public onRender(domElement: HTMLElement): void {
    const element = React.createElement(TeamContactCard, {
      siteTitle: this.context.pageContext.web.title,
      ownerEmail: this.properties.ownerEmail,
      graphClient: this.context.msGraphClientFactory,
    });
    ReactDOM.render(element, domElement);
  }

  public onDispose(): void {
    ReactDOM.unmountComponentAtNode(this._domElement);
  }
}

Other Notable Changes in SPFx 1.23

Beyond the two new extension types, SPFx 1.23 ships several API improvements that affect day-to-day development. The @microsoft/sp-http package now includes a GraphFetchClient that wraps the Microsoft Graph API with automatic retry logic, exponential backoff, and response caching — reducing boilerplate in solutions that make frequent Graph calls. It is a lighter alternative to the full MSGraphClientV3 when you only need basic GET requests without batching.

The property pane API gains two new field types: PropertyPaneSlider (replaces the manual number input for range-constrained values) and PropertyPaneColorPicker (a native colour selection control that respects the current SharePoint theme). Both have been community requests for years and eliminate the need for custom property pane fields for these common scenarios.

The SPFx build pipeline now generates source maps that correctly reference the original TypeScript source files when deployed to production — previously, production builds had source maps stripped or pointing to incorrect paths. This makes remote debugging of production SPFx issues in browser DevTools significantly more practical. Combined with improved Azure Application Insights integration in the SPFx logging API, production diagnostics for enterprise solutions are substantially improved in this release.

Breaking Changes in SPFx 1.23

SPFx 1.23 contains three breaking changes that require attention before upgrading existing solutions. The first affects solutions using @microsoft/sp-core-library: the deprecated Environment.type enum has been removed. If your code references EnvironmentType.Local or EnvironmentType.SharePoint, update to use the new Environment.isSharePoint and Environment.isLocal boolean properties instead.

The second breaking change affects Application Customizers that customise the PlaceholderName.Top placeholder. The CSS class names for the top placeholder container have changed in this release to align with SharePoint's Fluent UI v9 migration. Any Application Customizer that targets specific internal SharePoint CSS classes by name (a discouraged but common practice) will need its selectors updated. Solutions that only render into the placeholder div without relying on parent class selectors are unaffected.

The third change affects solutions using the spHttpClient.fetch() method with manual Accept: application/json;odata=verbose headers. The SPFx HTTP client now enforces the odata=nometadata format by default, and overriding to verbose requires an explicit opt-in flag in the client options. This change reduces response payload sizes but breaks any code that parses the verbose OData metadata properties (__metadata, __type, etc.) from responses.

Upgrading from SPFx 1.22 to 1.23

The upgrade path from SPFx 1.22 to 1.23 follows the standard SPFx update procedure. Run npm install @microsoft/[email protected] -g to update the Yeoman generator, then update your project's package.json dependencies. The recommended approach is to use the spfx upgrade command from the CLI for Microsoft 365, which automatically identifies outdated SPFx packages and generates the correct updated version strings.

# Install the CLI for Microsoft 365 if not already installed
npm install -g @pnp/cli-microsoft365

# Run the SPFx upgrade report for your project
m365 spfx project upgrade --output md > upgrade-report.md

# Review upgrade-report.md then apply changes
# Typical package.json changes for 1.23:
# "@microsoft/sp-core-library": "1.23.0"
# "@microsoft/sp-webpart-base": "1.23.0"
# "@microsoft/sp-listview-extensibility": "1.23.0"
# "@microsoft/sp-application-base": "1.23.0"
# "react": "18.3.0"
# "react-dom": "18.3.0"
# "@types/react": "18.3.0"

npm install
gulp bundle --ship
gulp package-solution --ship

After updating packages, run gulp build and address any TypeScript compilation errors — these will surface the breaking changes in your codebase. The most reliable testing approach is to run the updated solution in the SharePoint workbench and then in a dedicated test site collection before deploying to the App Catalog. Do not upgrade and deploy directly to a production App Catalog without a test cycle; the Application Customizer CSS class changes in particular can cause subtle visual regressions that only appear on specific SharePoint page templates.

Deploying SPFx 1.23 Solutions

List Panel Customizers and Navigation Customizers deploy through the same App Catalog mechanism as web parts and Application Customizers. Bundle and package your solution, upload the .sppkg to the tenant or site collection App Catalog, and approve any API permissions if your solution requests Graph scopes. For tenant-wide deployment, set skipFeatureDeployment: true in package-solution.json.

For List Panel Customizers specifically, the extension must be associated with the target list after App Catalog deployment. This association is done through a SharePoint feature that installs the customizer as a custom action on the list — either via a feature stapling configuration in your solution's elements.xml, or programmatically using PnPjs or the REST API post-deployment. The Yeoman scaffold generates a sample elements.xml that you can use as a starting point for feature-based association.