Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← UI patterns

Sidebar Layout

Pair a flexible main region with a narrower area of supporting content or controls.

Field journal · Northern California

A weekend on the coast

Saturday · 9 am

Follow the headland trail

Start at the old gate and take the path above the cove. Leave time for a slow lunch at the overlook.

Sunday · 10 am

A morning by the water

Walk down to the sheltered beach, then stop in town before the journey home.

Behavior

Keyboard

Tab
Reach controls in document order; static regions do not receive focus.
Parts

Main region

The primary reading or working area.

Supporting region

Related facts, filters, or navigation.

Gap

Separation between the two regions.

States

Wide

The main region takes the remaining space beside the narrower region.

Narrow

Regions stack when their contents no longer fit comfortably side by side.

References

A main region and sidebars across three responsive layouts.
Responsive main and sidebarMozilla Contributors

Use it

Figma
Build the sidebar layout
  1. Place a main frame and supporting frame in a wrapping Auto Layout.
  2. Allow the main frame to fill available space; give the supporting frame a comfortable width.
  3. Stack in the same reading order when the main content becomes cramped.
Accessibility

A sidebar is a visual relationship, not a widget. Choose HTML landmarks by purpose.

  1. Keep the source order useful when the regions stack.
  2. Use a named aside only for complementary content.
  3. Avoid fixed heights that clip supporting information.
Research notes & sources

Use aside for complementary content, nav for navigation, and labelled sections otherwise.

  1. Reference image attribution and licensesSource and capture record
  2. Common layouts using gridsMDN Web Docs
  3. The SidebarEvery Layout · Heydon Pickering and Andy Bell
  4. Content structureW3C WAI
  5. Canonical layout examplesGoogle Material Design