Side Menu with Navbar

The app shell: six arrangements of top menu, left menu, header and content.

v1.0.0·Updated Jul 11, 2026 · 12:00
The app shell

Every screen is the same four regions in different combinations: a top menu, a left menu, a page header and the content area. Compose them from these parts, then let the content fill with the cards and tables you have already built.

Six arrangements
01 · Top menu + left menu + content
Optimistic
DashboardDealsReports
Search
Home
Deals
Companies
Reports
Settings
Portfolio
24,592
3.5%
Active deals
128
12
At risk
6
2
CompanyRatingRevenue
GreenLeaf FinancialAAA115 Cr
Pro PropertyA+51.5 Cr
Nova RetailAAA88 Cr
Alro KropertyAA42 Cr
02 · Top menu + content
Optimistic
DashboardDealsReports
Search
Portfolio
24,592
3.5%
Active deals
128
12
At risk
6
2
CompanyRatingRevenue
GreenLeaf FinancialAAA115 Cr
Pro PropertyA+51.5 Cr
Nova RetailAAA88 Cr
Alro KropertyAA42 Cr
03 · Left menu + content
Home
Deals
Companies
Reports
Settings
Portfolio
24,592
3.5%
Active deals
128
12
At risk
6
2
CompanyRatingRevenue
GreenLeaf FinancialAAA115 Cr
Pro PropertyA+51.5 Cr
Nova RetailAAA88 Cr
Alro KropertyAA42 Cr
04 · Top menu + header + content
Optimistic
DashboardDealsReports
Search
Deals / Marketplace
Marketplace
Portfolio
24,592
3.5%
Active deals
128
12
At risk
6
2
CompanyRatingRevenue
GreenLeaf FinancialAAA115 Cr
Pro PropertyA+51.5 Cr
Nova RetailAAA88 Cr
Alro KropertyAA42 Cr
05 · Left menu + header + content
Home
Deals
Companies
Reports
Settings
Deals / Marketplace
Marketplace
Portfolio
24,592
3.5%
Active deals
128
12
At risk
6
2
CompanyRatingRevenue
GreenLeaf FinancialAAA115 Cr
Pro PropertyA+51.5 Cr
Nova RetailAAA88 Cr
Alro KropertyAA42 Cr
06 · Left menu + top menu + header + content
Optimistic
DashboardDealsReports
Search
Home
Deals
Companies
Reports
Settings
Deals / Marketplace
Marketplace
Portfolio
24,592
3.5%
Active deals
128
12
At risk
6
2
CompanyRatingRevenue
GreenLeaf FinancialAAA115 Cr
Pro PropertyA+51.5 Cr
Nova RetailAAA88 Cr
Alro KropertyAA42 Cr
Regions
RegionRole
Top menuA full-width bar for brand, primary navigation and account. Spans above everything else.
Left menuA vertical rail for section navigation. Sits beside the content, full height.
HeaderA page-level bar inside the content column: breadcrumb, title and the screen's primary action.
ContentThe work area. Cards summarise, tables list. Everything else is chrome around this.