> ## Documentation Index
> Fetch the complete documentation index at: https://docs.upshiftcloud.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Place your app inside Upshift's UI — sidebar entries, saved views, record page tabs, and sandboxed React components.

A Upshift app's **layout layer** is everything the user sees: where the app surfaces in the sidebar, which list views it ships, how its record detail pages are arranged, and which custom React components render inside those pages.

```text theme={null}
   Sidebar               Record list            Record detail page
   ───────               ───────────            ──────────────────
   [📋 My View]    ────▶ ┌──────────┐          ┌─────────────────────┐
   [📋 Drafts ]          │ Companies│          │ Tabs: [Overview ]   │
   [📋 Inbox  ]          │ ──────── │          │       [Notes    ]   │
        ▲                │  Apple   │          │       [Hello    ]◀──── definePageLayoutTab
        │                │  Acme    │          │                     │   adds a tab...
        └ defineNavi-    │  …       │          │  ┌────────────────┐ │
          gationMenu-    └────▲─────┘          │  │                │ │
          Item points         │                │  │   React UI     │◀── …with a
          to a defineView     │                │  │  (sandboxed in │ │   defineFrontComponent
                              └ defineView     │  │   a Worker)    │ │   widget inside
                                picks columns  │  └────────────────┘ │
                                and filters    └─────────────────────┘
```

## In this section

> **[Views](https://docs.upshiftcloud.com/en/developers/extend/apps/layout/views.md)**
>
> `defineView` — saved list configurations: visible columns, filters, groups.

> **[Navigation Menu Items](https://docs.upshiftcloud.com/en/developers/extend/apps/layout/navigation-menu-items.md)**
>
> `defineNavigationMenuItem` — sidebar entries pointing at views or external URLs.

> **[Page Layouts](https://docs.upshiftcloud.com/en/developers/extend/apps/layout/page-layouts.md)**
>
> `definePageLayout`, `definePageLayoutTab` and `definePageLayoutWidget` — tabs and widgets on a record's detail page.

> **[Front Components](https://docs.upshiftcloud.com/en/developers/extend/apps/layout/front-components.md)**
>
> `defineFrontComponent` — sandboxed React components that render inside Upshift.

> **[Command Menu Items](https://docs.upshiftcloud.com/en/developers/extend/apps/layout/command-menu-items.md)**
>
> `defineCommandMenuItem` — register front components as Cmd+K entries and quick actions.

## Where the app surfaces

| Surface | What it controls | Entity |
| - | - | - |
| **Sidebar** | A custom entry linking to a saved view or external URL | `defineNavigationMenuItem` |
| **Record list** | A saved configuration for an object — visible columns, order, filters, groups | `defineView` |
| **Record detail page** | The tabs and widgets on a record page (your own object's, or a standard one) | `definePageLayout`, `definePageLayoutTab`, `definePageLayoutWidget` |
| **Inside any of the above** | A custom React widget — buttons, forms, dashboards, integrations | `defineFrontComponent` |
| **App settings** | An entry in the app's settings menu; declare as many as you need | `defineSettingsMenuItem` |
| **Command menu (Cmd+K)** | A pinned quick action or hidden command | `defineCommandMenuItem` |

Front components run inside an isolated Web Worker using Remote DOM — they render *natively* in the page (not inside an iframe), but cannot reach the host page or DOM directly. Communication with Upshift happens through a message-passing host API.

They are still under active development: the sandbox implements a partial DOM, so advanced usages can fail. See [Current limitations](https://docs.upshiftcloud.com/en/developers/extend/apps/layout/front-components.md#current-limitations).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.