> 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: Dashboard Page Extension Files and Code

## Article: Dashboard Page Extension Files and Code

## Article Link: https://dev.wix.com/docs/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md

## Article Content:

# Dashboard Page Extension Files and Code

When you add a [dashboard page](https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-pages.md) extension, the generated files land under `src/extensions/dashboard/pages/<page-route>/` and the extension is registered in your project's `extensions.ts`.

This file set is the same whether you add the page in a Studio Two site project or in a Wix CLI project.

```text
src/
└── extensions/
    └── dashboard/
        └── pages/
            └── <page-route>/
                ├── <page-route>.extension.ts
                └── <page-route>.tsx
```

| File | What it's for |
|------|---------------|
| `<page-route>.extension.ts` | The [configuration file](#configuration-file) for the page ID, title, route, and component path. |
| `<page-route>.tsx` | The [page content](#page-content): the React component that renders when the page is active. |

## Configuration file

The `<page-route>.extension.ts` file declares the page with `extensions.dashboardPage()`.

Import `extensions` from the package your project uses:

```ts
// Studio Two site
import { extensions } from '@wix/custom-extensions';
```

```ts
// Wix CLI app or headless project
import { extensions } from '@wix/astro/builders';
```

```ts
export default extensions.dashboardPage({
  id: string,
  title: string,
  routePath: string,
  component: string,
  priority?: number,
  fullPage?: boolean,
  metaData?: {
    searchable: boolean,
    description?: string, // Required when searchable is true
    title?: string,
  },
});
```

Example:

```ts
export default extensions.dashboardPage({
  id: '40c70303-4eac-44cb-bb53-4e583a036682',
  title: 'Item list',
  routePath: 'item-list',
  component: './extensions/dashboard/pages/item-list/item-list.tsx',
});
```

### Configuration fields

| Field | Type | Description |
|--|--|--|
| `id` | string | Page ID as a GUID. Used to register the page, and as the `pageId` you pass to [`navigate()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/navigate.md). It must be unique across all dashboard pages in the project. When the page belongs to an app, this ID is also how the page is registered in the [app dashboard](https://manage.wix.com/account/custom-apps). |
| `title` | string | The page title. Used as the browser tab title, and as the dashboard sidebar label if the page appears in the sidebar. |
| `routePath` | string | Route that leads to this page. Appended to the dashboard base URL. |
| `component` | string | Path to the page content component. |
| `priority` | number | Optional. Order of this page in the dashboard sidebar when the project has multiple dashboard pages. Smaller numbers appear higher in the list. |
| `fullPage` | boolean | Optional. Whether the dashboard sidebar is hidden while the page is open. Default: `false`. |
| `metaData` | object | Optional. How the page appears in dashboard search. See [Dashboard search with metaData](#dashboard-search-with-metadata). |

### Dashboard search with metaData

Use `metaData` to control how the page appears when Wix users search the dashboard. Dashboard search lists the page only when `searchable` is `true` and it has a `description`.

When you generate a dashboard page, the CLI adds `metaData` with `searchable: true` and a default description. Replace the default description with a description of what Wix users can do on the page.

| Field | Type | Description |
|--|--|--|
| `searchable` | boolean | Whether the page appears in dashboard search results. Set to `false` for pages that only work when opened from another page, such as a details or edit page. |
| `description` | string | Description of the page for dashboard search. Required when `searchable` is `true`. Maximum: 200 characters. |
| `title` | string | The page name in dashboard search. Dashboard search doesn't index the page `title`, so set this field to the same value to make the page findable by its name. |

Dashboard search matches the words Wix users type against `metaData.title` and `metaData.description`. Use the words Wix users type when looking for the page.

For example, for a project with a Reports page:

```ts
export default extensions.dashboardPage({
  id: 'b2c3d4e5-f6a7-8901-bcde-f12345678901',
  title: 'Reports',
  routePath: 'reports',
  component: './extensions/dashboard/pages/reports/reports.tsx',
  metaData: {
    searchable: true,
    title: 'Reports',
    description: 'View sales and traffic reports for your site.',
  },
});
```

For a page that only works when opened from another page, set `searchable` to `false`:

```ts
metaData: {
  searchable: false,
},
```

> **Note:** The CLI build doesn't check `metaData` value limits, such as the `description` length. Values outside the limits are rejected when you release the project.

## Page content

The `<page-route>.tsx` file exports a React component that renders when the page is active.

Inside a dashboard page component you can use:

- The [Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) to navigate between dashboard locations, open modals, and show toasts.
- The [Wix Design System](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system.md) to display content using the same React components Wix uses to build its own dashboard pages.
- The [Wix JavaScript SDK](https://dev.wix.com/docs/sdk.md) to access and manage Wix data.

## See also

- [About Dashboard Pages](https://dev.wix.com/docs/dashboard-extensions/dashboard-pages/about-dashboard-pages.md)
- [Dashboard Pages](https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-pages.md)
- [`navigate()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/navigate.md)
- [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md)