---
title: Overview
description: Place your app inside Twenty's UI — sidebar entries, saved views, record page tabs, and sandboxed React components.
icon: "table-columns"
---

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
   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.