Sidebar

The sidebar layout helper creates two content panels inside a containing element. These two panels stack vertically, until there is enough horizontal space for them to sit alongside each other. One content panel is narrower than the other, acting as a "sidebar". This web page uses the sidebar layout helper for the secondary navigation and content region.

The sidebar layout helper needs an inner flexbox container to hold the two panels. The same negative margin technique used for the cluster layout creates gutter spacing between the panels.

The point at which the panels sit side-by-side horizontally is determined by a flex-basis property on the narrower panel and a min-width on the wider panel. As there are no viewport media queries, the sidebar layout will nest nicely inside other containers.

We can choose to not specify a width on the narrow "sidebar" panel (by not declaring a flex-basis value) and let the content of the sidebar determine how wide it is. The preceding example shows how to override the default styles by using an additional class and omitting the sidebar class.