Anatomy
- Sidebar: (Optional) Provides space for local or secondary navigation, depending on the view.
- Main: The overall container that structures header, and main content into a coherent layout.
- Main Header: (Optional) Positioned above the content area, used for orientation (page title, back navigation, key actions.
- Main Content: Area for the dominant functionality of the page — tables, lists, forms, or other primary tasks.
Usage Guidelines
When to use this component
- To define the overall page structure with consistent areas like header, sidebar, and main content.
When not to use this component
Best Practices
Use header to provide space for page title, main actions and back navigation.
Don’t put unrelated content in the header. Its role is to give users orientation about the page and access to key actions or back navigation.
Use the Sidebar to provide secondary navigation if needed
Don't include main actions or the page title in the sidebar
Use full-width layout, when working with multi-column tables or/and high density information pages
Don't use full-width layout for simple, low-density pages that won't benefit from wider container
General Component Behaviors
Width
The main content defaults to a fixed maximum width (960px). When the viewport is narrower than this value, the content fills the available width with horizontal padding. If full-width content is required (e.g. for dense data tables), a variant can be used that removes the fixed max-width constraint.
Spacing
The sidebar and main content are always separated by a consistent gap, preserving visual balance and readability. This spacing is part of the layout structure and should not be overridden at the component level.
Responsive Behavior
Structure
On mobile viewports, the layout collapses into a single column in this order: Sidebar → Main Header → Main Content.
Sidebar Content
On desktop, the sidebar is used for local navigation and supplementary content. On mobile, space is limited, so sidebar content should be re-evaluated:
- Navigation: Move sidebar navigation into the global navigation of the product. This avoids duplication, conserves space, and creates a more consistent user experience. Having both sidebar and global navigation on mobile is confusing and wastes screen real estate.
- Non-navigation content:
- Omit non-essential elements that don’t impact primary tasks.
- Create a new modality (modal, popover) for complex content that requires focus.
- Use a collapsible section for secondary but still valuable content, letting users expand it on demand.
Variants
With Sidebar
Provides space for local navigation within a part of the application.
Without Sidebar
Focused on header and main content only.
Fixed-width
Keeps main content constrained for readability.
Full-width
Expands content for dense data tables or complex layouts.
Known Gaps
- Ability to create custom layouts