Skip to main content

Home Page Patterns Sticky sidebar

Sticky sidebar

A sidebar that stays visible while the rest of the page scrolls.

A sticky sidebar holds its position on screen as the user scrolls down through the main content. The page content moves; the sidebar stays. Useful for tables of contents, filter panels, or summary widgets.

Make sure the sidebar fits comfortably in the viewport — otherwise pinning it cuts off its bottom. On short screens or mobile, switch the sidebar back to normal scrolling or move it to a drawer.

Related terms