> 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: getLayout()

## Article: page.getLayout()

## Article Link: https://dev.wix.com/docs/sdk/host-modules/dashboard/page/get-layout.md

## Article Content:

# getLayout()

Returns which dashboard your extension was loaded into: the `desktop` dashboard or the `mobile` dashboard. This reflects the host environment, not screen size, so you can decide to render a different component tree, skip a fetch, or swap a data-dense view for a simpler one based on where your extension is running.

The dashboard sets this once when it loads your extension, based on the device, and it stays fixed while your extension is open. It doesn't change when the user resizes the window or rotates their device, so call `getLayout()` once when your extension renders. You don't need to poll it or listen for changes.

For UI that should respond to live window resizing, use CSS media queries or resize listeners instead.

> **Note:**  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).

## Method declaration

```ts
() => PageLayout
```

## Parameters

This method takes no parameters.

## Returns

A `PageLayout` object describing the layout the dashboard used to render your extension.

#### `PageLayout` object

| Name   | Type                       | Description                                                                 |
|:-------|:---------------------------|:----------------------------------------------------------------------------|
| `type` | `'mobile' \| 'desktop'`    | The layout the dashboard used to render your extension. |

> **Note:** A `LayoutType` enum is also exported (`LayoutType.Mobile`, `LayoutType.Desktop`) for developers who prefer it over the string-literal union.

## Examples

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

### Read the current layout

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

const layout = page.getLayout();
console.log(layout.type); // 'mobile' or 'desktop'
```

### Branch your UI based on the layout

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

const { type } = page.getLayout();

if (type === 'mobile') {
  // render compact mobile UI
} else {
  // render desktop UI
}
```