A sidebar is a narrower column that runs alongside the main content of a page, on the left or the right. It holds supporting material: a section menu, product filters, a table of contents, related articles or a signup box. The main column carries the page's purpose; the sidebar helps people navigate or go further.
The main kinds of sidebar
- Navigation sidebars. Documentation sites, dashboards and apps list sections down the left so users can jump around. Gmail and most admin panels work this way.
- Filter sidebars. Online shops place price, size and colour filters beside product listings.
- Content sidebars. Blogs show an author bio, categories, popular posts or an email signup to the right of an article. On WordPress, these are filled with widgets.
- Table of contents. Long guides keep a sticky list of headings beside the text, highlighting where you are.
How sidebars behave on small screens
A phone has no room for two columns, so a responsive layout must decide where the sidebar goes. It can drop below the main content, collapse into a button that slides a panel in (common for shop filters), or disappear if its content is repeated elsewhere. In HTML, supporting content belongs in an <aside> element, while a sidebar menu is better wrapped in <nav>.
Example: a garden centre's plant shop
On desktop, the plant listing shows a left sidebar with filters for sunlight, height, pet safety and price, and a grid of plants on the right. On phones, a "Filter" button opens the same options in a panel from the bottom, and the results update when the shopper taps "Show 24 plants". The filters are identical; only their position changes.
When a sidebar earns its space
For a typical small-business brochure site, usually not. Service pages read better as a single focused column with no distractions from the main action. Sidebars earn their place on catalogues with many products, on blogs with lots of posts, in help centres and inside logged-in apps where people navigate constantly.
Sidebar mistakes
- A dumping ground. Archives, tag clouds, calendars and five badges at once. Few visitors use them and the page looks cluttered.
- Sidebar on sales pages. Extra links beside a booking or checkout flow pull people away from finishing.
- Important content only in the sidebar. On mobile it may end up at the very bottom or hidden.
- Squeezing the main text. A wide sidebar leaves an article column too narrow to read comfortably.
Related terms
- Navigation bar: the horizontal alternative to a sidebar menu.
- Grid system: decides how many columns the sidebar takes.
- Blog: the classic home of content sidebars.
- Widget: the blocks many sidebars are built from.