# 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