A sidebar splits content into a secondary area that can be placed relative to the main content on a page.


Sidebars orient a panel box and a content box on a page. The panel and content can be stacked on top of one another, or placed side-by-side.

Sidebars can contain jumplinks and vertical tabs that provide easy access to different sections within a panel. However, they are also frequently used for context-sensitive content, frequently changed properties, and information regarding functionality.

Sidebars can be sticky, so that they are constantly visible as a user scrolls through a page. They are also responsive, so the panel will display on top of content in mobile view, and beside the content in desktop view.

View source on GitHub