# UI Layout (/patterns/ui-layout)



Give the current task the most space. Keep navigation in a stable position, show which area is active, and place actions beside the content they affect. Use this pattern for workspaces, entity views, and other screens with several related tasks.

<PatternIllustration pattern="ui-layout" />

## Three regions [#three-regions]

| Region     | Purpose                       | Starting guidance                                                        |
| ---------- | ----------------------------- | ------------------------------------------------------------------------ |
| Navigation | Move between areas.           | Keep labels short and preserve the selected area.                        |
| Header     | Identify the current context. | Show the page title, location, and actions that apply to the whole page. |
| Content    | Complete the task.            | Put the main information first, with related controls close to it.       |

A list row's menu belongs with that row. A view selector belongs above the list. Reserve the page header for actions such as creating an entity or sharing the current view.

Use [Breadcrumbs](/components/breadcrumbs) when the hierarchy helps people move back to a parent. A breadcrumb should describe location; keep editing controls separate.

## Adapt the composition [#adapt-the-composition]

As available width decreases, move persistent navigation into a [Drawer](/components/drawer). Keep its opener reachable and return focus to it when the drawer closes. Preserve the current section and unsaved work across layout changes.

Let content determine when columns collapse. A detail panel can move below a list or become a separate route when both would be too narrow. Keep the reading and keyboard order aligned with the visual order. See [Responsiveness](/foundations/responsiveness) for layout examples.

## Keep navigation predictable [#keep-navigation-predictable]

* Use links for destinations and buttons for actions that change the current screen.
* Make the active destination visible through more than color alone.
* Keep scroll behavior consistent. Prefer one main reading area; add independent scrolling only when a persistent panel needs it.
* Keep sticky headers from covering focused controls or anchored headings.

Before shipping, try the page with long titles, an empty list, a narrow viewport, browser zoom, and keyboard-only navigation. Confirm that the main task remains reachable in every case.