Structure

How it works

Two key components appear consistently across pages:

• Sidebar Component
  Positioned on the left side, the Sidebar Component typically contains navigation links and branding. It helps users move between sections of the app or website.
• Page Header Component
  Found at the top of the main content area, this component usually holds the page title, breadcrumbs, and possible action buttons (like "Add New" or "Export"). It gives immediate context about the current page.

At the core of the layout is the .page-wrapper class, which acts as the outer shell for every page.

• On the left, you’ll find the Sidebar Component.
• On the right, there’s the .main-wrapper, which holds the main content area.

Inside .main-wrapper:

• The Page Header Component is placed at the top.
• Below that is the .dashboard-wrapper, which contains all the actual page content (cards, sections, tables, etc.).

Why use wrapper classes?

We’ve chosen to use utility classes like .page-wrapper, .main-wrapper, and .dashboard-wrapper instead of only components. This gives you more flexibility to place both components and regular static elements wherever you need them — since Webflow’s component slots currently don’t support non-component elements.

This structure keeps everything organized — while staying flexible for custom dashboards, internal pages, settings layouts, and more.

‍