Sidebar and content

A narrow sidebar keeps the ways around the page in view while a wide main region holds the content, so readers never lose their place.

Copy the idea

See it live

A labelled wireframe of the pattern, made for this explorer. Switch the width to watch its regions reflow from phone to desktop.

Copy the idea

Take the pattern with you as a brief for a person or as instructions for an AI assistant: its regions, how it reflows and the rules for using it.

# Sidebar and content — layout recipe

## The idea

- A narrow sidebar keeps the ways around the page in view while a wide main region holds the content, so readers never lose their place.

## Use it for

- Documentation and help centres
- Settings and account pages
- Shops and archives with filters

## Avoid it when

- There are only two or three places to go
- The page tells one story from top to bottom

## Regions

- Header — Spans the top with the site name and the most important links.
- Sidebar — Lists the sections or filters so the reader can move without scrolling back.
- Main — Holds the content the reader came for, with most of the width.
- Footer — Spans the bottom with secondary links and small print.

## How it reflows

- Phone: The sidebar folds into a short list above the main content, and everything stacks in one column. (1 column)
- Tablet: A narrow sidebar sits beside the main region, which takes the rest of the width. (2 columns)
- Desktop: The sidebar stays narrow and fixed in width while the main region grows with the screen. (2 columns)

## Principles

- Keep the sidebar to about a quarter of the width or less
- Mark the current section in the sidebar so readers know where they are
- Let the main region take all the extra width on large screens
- On a phone, keep the sidebar short or fold it behind one control

Lay out the page with the "Sidebar and content" pattern.

The idea: A narrow sidebar keeps the ways around the page in view while a wide main region holds the content, so readers never lose their place.

It suits:
- Documentation and help centres
- Settings and account pages
- Shops and archives with filters
It is a poor fit when:
- There are only two or three places to go
- The page tells one story from top to bottom

Build the page from these regions:
- Header: Spans the top with the site name and the most important links.
- Sidebar: Lists the sections or filters so the reader can move without scrolling back.
- Main: Holds the content the reader came for, with most of the width.
- Footer: Spans the bottom with secondary links and small print.

Reflow it at each width:
- Phone: The sidebar folds into a short list above the main content, and everything stacks in one column. (1 column)
- Tablet: A narrow sidebar sits beside the main region, which takes the rest of the width. (2 columns)
- Desktop: The sidebar stays narrow and fixed in width while the main region grows with the screen. (2 columns)

Follow these principles:
- Keep the sidebar to about a quarter of the width or less
- Mark the current section in the sidebar so readers know where they are
- Let the main region take all the extra width on large screens
- On a phone, keep the sidebar short or fold it behind one control

Apply the idea and the rules above; do not copy any existing website.

Download brief (.md)

Regions

The parts of the page and the job each one does.

Header: Spans the top with the site name and the most important links.
Sidebar: Lists the sections or filters so the reader can move without scrolling back.
Main: Holds the content the reader came for, with most of the width.
Footer: Spans the bottom with secondary links and small print.

How it reflows

Phone 390 · 1 column: The sidebar folds into a short list above the main content, and everything stacks in one column.
Tablet 768 · 2 columns: A narrow sidebar sits beside the main region, which takes the rest of the width.
Desktop 1440 · 2 columns: The sidebar stays narrow and fixed in width while the main region grows with the screen.

Where it fits

Use it for

Documentation and help centres
Settings and account pages
Shops and archives with filters

Avoid it when

There are only two or three places to go
The page tells one story from top to bottom

Principles

The rules that keep the pattern working at every width.

Keep the sidebar to about a quarter of the width or less
Mark the current section in the sidebar so readers know where they are
Let the main region take all the extra width on large screens
On a phone, keep the sidebar short or fold it behind one control