# edge_side_panel manifest member

> The Edge-only edge_side_panel member and its preferred_width property pin a PWA to the Microsoft Edge sidebar; Microsoft deprecated it in July 2026.

`edge_side_panel` is a Microsoft Edge manifest member that lets an installed PWA be pinned to
the Edge sidebar, the vertical strip of apps on the right edge of the browser window. Its one
property, `preferred_width`, asks the sidebar to open the app at a given width instead of the
376-pixel minimum.

The member is implemented only by Microsoft Edge on desktop (Windows, macOS, Linux). Chrome 155,
Firefox 157, and Safari 27 drop it as an unknown member with no error. Microsoft's own
documentation carries an update dated July 2026 stating that the feature is being deprecated
and will no longer be supported; treat this entry as a record of a feature being wound down,
not a target for new work.

## Member

- **Type**: object. The empty object `{}` is the complete opt-in; the only recognized property
  is `preferred_width`, a number of CSS pixels.
- **Default**: absent. Without the member Edge offers no sidebar pin for the app; with `{}` the
  sidebar opens the app at its default minimum width of 376 px and the user can widen it.
- **Example value**: `{ "preferred_width": 480 }`.

Microsoft's documentation requires `name`, `short_name`, `description`, and `icons` to be
present before the member is honoured, because the sidebar store listing is built from them. A
`preferred_width` below the 376 px minimum is clamped to it; the user can still resize the
panel larger or smaller down to that minimum.

An app pinned in the sidebar receives the desktop User-Agent Client Hint by default even when a
mobile variant exists. The sidebar identifies itself to the page through a UA-CH brand, which is
the supported detection path; Microsoft documents the User-Agent string match as a fallback
and recommends against it.

:::observed
Edge 154 on Windows 11 (English UI), app launched from the sidebar: `navigator.userAgentData.brands`
contains the entry `{ brand: "Edge Side Panel", version: "1" }` alongside the Chromium and
Microsoft Edge brands; the same app opened in a normal window has no such entry. Chrome 155 on
macOS 26, DevTools > Application > Manifest, lists no section and no **Errors and warnings**
line for `edge_side_panel`: the member is discarded silently.
:::

## Examples

The manifest opt-in and the runtime check are separate concerns; the first is a one-line change,
the second decides what layout the app renders.

### Opting a music player into the sidebar at 480 px

A player with a two-column layout cannot fit in 376 px, so it asks for 480. Edge opens the
sidebar at that width when the user pins the app; everything else about the manifest is a
normal installable PWA.

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

Dropping `preferred_width` keeps the pin available and leaves the width to the user, which is
the better choice for a layout that already works at 376 px.

### Detecting the sidebar context and falling back

Edge exposes the sidebar through a User-Agent Client Hint brand. Browsers without
`navigator.userAgentData` (Firefox 157, Safari 27) take the fallback branch and are treated
as a normal window.

```js
function isInEdgeSidebar() {
  if (!('userAgentData' in navigator)) return false; // no UA-CH: not Edge's sidebar
  return navigator.userAgentData.brands.some((b) => b.brand === 'Edge Side Panel');
}

document.documentElement.dataset.layout = isInEdgeSidebar() ? 'sidebar' : 'window';
```

Switch on the data attribute in CSS rather than branching application logic: a sidebar app is
the same app in a narrower, taller viewport, and a `max-width` media query covers most of what
the attribute would.

### Serving the desktop layout to a sidebar on a mobile-first site

Because the sidebar sends desktop client hints, a site that picks a mobile bundle from the
`Sec-CH-UA-Mobile` header serves its desktop variant to a 376 px panel. Check the brand on the
server before choosing.

```js
// Express middleware: prefer the compact layout inside the Edge sidebar.
app.use((req, res, next) => {
  const brands = String(req.get('Sec-CH-UA') ?? '');
  res.locals.compact = brands.includes('"Edge Side Panel"') || req.get('Sec-CH-UA-Mobile') === '?1';
  next();
});
```

`Sec-CH-UA` is a low-entropy hint sent on every request, so no `Accept-CH` opt-in is needed for
this check.

## See also

- [PWAs on Microsoft Edge (sidebar, store)](/reference/platforms/edge/)
- [icons manifest member](/reference/manifest/icons/)
- [description manifest member](/reference/manifest/description/)
- [Build PWAs for the sidebar in Microsoft Edge](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/sidebar) (learn.microsoft.com)
- [Microsoft Edge Explainers: Side Panel](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/SidePanel/explainer.md) (github.com)