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

# Overview

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

A Twenty 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

<CardGroup cols={2}>
  <Card title="Views" icon="list" href="/developers/extend/apps/layout/views">
    `defineView` — saved list configurations: visible columns, filters, groups.
  </Card>

  <Card title="Navigation Menu Items" icon="bars" href="/developers/extend/apps/layout/navigation-menu-items">
    `defineNavigationMenuItem` — sidebar entries pointing at views or external URLs.
  </Card>

  <Card title="Page Layouts" icon="table-columns" href="/developers/extend/apps/layout/page-layouts">
    `definePageLayout` and `definePageLayoutTab` — tabs and widgets on a record's detail page.
  </Card>

  <Card title="Front Components" icon="window-maximize" href="/developers/extend/apps/layout/front-components">
    `defineFrontComponent` — sandboxed React components that render inside Twenty.
  </Card>

  <Card title="Command Menu Items" icon="terminal" href="/developers/extend/apps/layout/command-menu-items">
    `defineCommandMenuItem` — register front components as Cmd+K entries and quick actions.
  </Card>
</CardGroup>

## 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` |
| **Inside any of the above** | A custom React widget — buttons, forms, dashboards, integrations              | `defineFrontComponent`                    |
| **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 Twenty happens through a message-passing host API.