---
title: Workspace layout
description: Compose navigation, content, and an AI assistance panel.
order: 30
toc:
  - id: layout
    title: Create the layout
  - id: controls
    title: Add controls
---

## Create the layout {#layout}

```tsx
export function Workspace() {
  return (
    <AppLayout
      className="application-layout"
      header={WorkspaceHeader}
      rail={ActivityRail}
      sidebar={Explorer}
      aside={Assistant}
      footer={StatusBar}
      defaultLayout={{
        headerStart: "content",
        footerStart: "sidebar",
      }}
    >
      <Editor />
    </AppLayout>
  )
}
```

After the user collapses the Sidebar, Header and Footer regions starting at `"sidebar"` automatically move inward to the content column without retaining an empty grid track.

## Add controls {#controls}

```tsx
function WorkspaceHeader() {
  const { layout, toggleAside, toggleSidebar } = useLayoutConfig()

  return (
    <header>
      {layout.sidebarCollapsible && (
        <button onClick={toggleSidebar}>Explorer</button>
      )}
      {layout.asideEnabled && <button onClick={toggleAside}>Assistant</button>}
    </header>
  )
}
```

The control component does not need callbacks threaded through the application; component slots are created inside the layout context.