> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: open()

## Article: sidePanel.open()

## Article Link: https://dev.wix.com/docs/sdk/host-modules/dashboard/internal/side-panel/open.md

## Article Content:

# open()

Opens a side panel on your app's dashboard page.

A side panel slides in alongside your dashboard page and renders the embeddable component you specify in `componentId`. Use a side panel to show secondary content, such as details, settings, or a short form, while keeping the current page in view.

To pass data to the panel, include it in `componentProps`. The component reads this data with [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md).

> **Notes:**
> - Only embeddable components are supported. The component you reference in `componentId` must be an embeddable component, the same type you retrieve with [`getWidget()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/internal/get-widget-internal.md). Other dashboard extensions, such as pages, modals, and plugins, can't be opened in a side panel.
> - This method doesn't yet work when [developing sites](https://dev.wix.com/docs/develop-websites.md) or [building apps with Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-blocks.md).
> - To close the panel, call [`sidePanel.close()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/internal/side-panel/close.md) from the panel's component code.

## Method declaration

```ts
(options: SidePanelOpenOptions) => void
```

## Parameters

| Name      | Type                   | Description                                          |
|:----------|:-----------------------|:-----------------------------------------------------|
| `options` | `SidePanelOpenOptions` | The component to open and any data to pass to it. |

#### `SidePanelOpenOptions` object

| Name             | Type                            | Description                                                                                                                                                                          |
|:-----------------|:--------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `componentId`    | `string`                        | ID of the "embeddable component" extension to open in the side panel. This is the same embeddable component you retrieve with [`getWidget()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/internal/get-widget-internal.md). |
| `componentProps` | `Record<string, Serializable>`  | Optional. Data to pass to the component. The component reads this data with [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md). Values must be serializable, so they can't include callbacks or other non-cloneable values. |

## Returns

`void`

> **Note:** Don't use relative CSS height units such as `vh` in the component opened by this method. The host adjusts the component's height automatically. If your component uses relative height units by default, turn them off.

## Examples

> **Note:** To call this method in [self-managed apps](https://dev.wix.com/docs/sdk/articles/get-started/about-self-hosted-apps.md), you need to create a [client](https://dev.wix.com/docs/sdk/articles/work-with-the-sdk/about-the-wix-client.md). See the [setup](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) guide for more details.

### Open a side panel

```js
import { sidePanel } from '@wix/dashboard';

sidePanel.open({ componentId: '1d52d058-0392-44fa-bd64-ed09275a6fcc' });
```

### Pass data to a side panel

```ts
import { sidePanel } from '@wix/dashboard';

sidePanel.open({
  componentId: '1d52d058-0392-44fa-bd64-ed09275a6fcc',
  componentProps: { firstName: 'Name' },
});
```

You can access the data passed to `sidePanel.open()` in your component code using [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md).