# Manifest edge_side_panel: pinning a PWA to the Microsoft Edge sidebar

> How the edge_side_panel manifest member and its preferred_width property let a PWA opt in to the Microsoft Edge sidebar, how to detect the sidebar context, and that Microsoft has announced this feature is being deprecated.

**In one line:** `edge_side_panel` is a web app manifest member that opts a PWA in to being
pinned to the sidebar in Microsoft Edge; as of the July 2026 update to Microsoft's own
documentation, this feature "is being deprecated" and "will soon no longer be supported."

## This feature is being deprecated

Microsoft's documentation states: "Update July 2026: This feature is being deprecated; it
will soon no longer be supported." Microsoft points developers to
[Streamline access to your favorite sites and apps with Sidebar in Microsoft Edge](https://support.microsoft.com/edge/streamline-access-to-your-favorite-sites-and-apps-with-sidebar-in-microsoft-edge)
for information about the Sidebar going forward. Treat everything below as a description of
a feature Microsoft is winding down, not one to build new dependencies on.

## What it does

Adding `edge_side_panel` to a manifest signals that a PWA can be pinned to the sidebar in
Microsoft Edge, where a PWA "can be promoted in the Microsoft Edge sidebar store," "can
detect whether it is running in the Microsoft Edge sidebar or not," and "defines its own
style and layout to provide a user-friendly sidebar experience."

## Requirements and syntax

Microsoft's docs require the manifest to contain at least `name`, `short_name`,
`description`, and `icons` before adding `edge_side_panel`:

```json
{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {}
}
```

The sidebar's default minimum width is 376 pixels and is resizable by the user. If an app's
layout cannot support that width, `edge_side_panel.preferred_width` requests a larger
default: "When you define a preferred width in your app's manifest... the sidebar is
automatically resized to your preferred width," and "Users can resize the sidebar to make
it larger than your preferred width, or smaller, up to the 376 pixels minimum width."

```json
{
  "edge_side_panel": {
    "preferred_width": 480
  }
}
```

## Support

`edge_side_panel` is a Microsoft Edge-specific manifest member with no other browser
implementation documented by these sources, and — per the July 2026 update quoted above —
Microsoft now describes it as being deprecated.

## Detecting the sidebar at runtime

Microsoft's docs recommend User-Agent Client Hints over the User-Agent string for detecting
whether a PWA is running in the sidebar:

```js
const brands = navigator.userAgentData.brands;
const sidebarBrandInfo = brands.find((b) => b.brand === "Edge Side Panel");
if (sidebarBrandInfo) {
  console.log(sidebarBrandInfo); // { brand: "Edge Side Panel", version: "1" }
} else {
  console.log("App is not running in the Microsoft Edge sidebar");
}
```

Guard the check with a feature test. This implementation's own choice, not a
Microsoft-documented recommendation, is to treat the absence of
`navigator.userAgentData` as "not in the sidebar" rather than throw:

```js
function isInEdgeSidebar() {
  if (!("userAgentData" in navigator)) {
    // No User-Agent Client Hints support in this browser.
    return false;
  }
  return navigator.userAgentData.brands.some((b) => b.brand === "Edge Side Panel");
}
```

Microsoft's docs add that if User-Agent Client Hints cannot be used, developers can instead
look for the string `Edge Side Panel` in the User-Agent header, but recommend against it
because "the User Agent string is an outdated mechanism for doing browser detection, and has
website compatibility issues."

## Practical checklist

- [ ] Do not build a new feature around `edge_side_panel` — Microsoft's own docs say it is
      being deprecated and will soon no longer be supported.
- [ ] If already relying on it, plan a migration path; Microsoft points to the linked Sidebar
      support page for information about the Sidebar going forward.
- [ ] Apps pinned to the sidebar via `edge_side_panel` receive the desktop User-Agent Client
      Hint by default even if a mobile variant exists; use the `Edge Side Panel` UA-CH brand
      to opt a mobile variant back in instead.
- [ ] Prefer User-Agent Client Hints over User-Agent string sniffing for sidebar detection,
      and feature-detect `navigator.userAgentData` before reading it.

## Cross-references

- [Manifest icons](/reference/manifest/icons/) — one of the manifest members required before adding `edge_side_panel`
- [Manifest display](/reference/manifest/display/) — the `display` member referenced in the sidebar-only manifest example
- [manifest: edge_side_panel support](/compatibility/manifest-edge-side-panel/) — per-browser support table for this member