Hidden Sidebar
Hidden Sidebar — No persistent
sidebar, off-canvas drawer on demand
What is the Hidden Sidebar layout?
The sidebar is completely removed from the layout. Content occupies the full viewport width. Navigation is accessed through an off-canvas drawer that slides in when the hamburger button is clicked. This pattern works great for landing pages, article/reading views, analytics dashboards, and any context where the nav is infrequently needed.
Modifier:
data-layout="no-sidebar"
on <html>
Shell grid:
grid-template-columns: 1fr
(single column)
Content width: Full viewport (capped at
--content-max: 1440px)
Navigation: Off-canvas drawer, 260px
wide, slides in from left
Try the off-canvas drawer
Click the hamburger icon in the topbar or the button below to
open the navigation drawer.
$284K
Total Revenue
1,842
Customers
5,219
Orders
3.42%
Conversion
All Layout Variants
Browse the full layout collection.