Sidebar

A narrow column of navigation or filters beside the content. Keeps the way around in view while reading or choosing.

Good for: Category pages, documentation, long articles with contents.

Weak for: Phones, where it must fold away; short pages.

Beside the content from about 720 px; on phones a button, a sheet or a list above the content.

The look, in Stylogeny

• Column grid: Vertical columns structure text and image; vertical placement is free.
• Layered information: Several reading levels: headline, deck, captions, data.

Parts that show it

• Filtered list
• Article with contents
• Documentation layout
• Category page
• Help article

How it is found

In a wireframe: A split whose narrow side is a third of the width or less and holds navigation, filters, contents or three or more links.

On a real page: At 1280 px, six or more short items (median under 36 px tall) stacked in a column under 28% of the width near one edge, beside wide content, for more than half a screen.

Open the example as a page.