UI Layout
Organize navigation, context, and the current task so people can find their way
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.
Navigation sets the context. The collection gets most of the space, with its actions close by.
Illustrative example · Reduced motion: choose a state to compare.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 when the hierarchy helps people move back to a parent. A breadcrumb should describe location; keep editing controls separate.
Adapt the composition
As available width decreases, move persistent navigation into a 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 for layout examples.
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.
Last updated on 2026-10-31
Was this page helpful?