Offcanvas Layout
Slide-in panel that pushes, overlays, or reveals the main content — used for navigation drawers, filter panels, and detail sheets.
Overlay — Left
Panel slides over content; backdrop dims the page.
Navigation
Push — Right
Panel pushes main content to the opposite side. No backdrop.
Cart (3)
Slim Fit Tee
Black / M
Rp 149k
Cargo Pants
Khaki / 30
Rp 389k
Canvas Sneakers
White / 42
Rp 299k
Reveal — Left
Panel is stationary; main content slides to reveal it. Common for persistent sidebars.
Filters
Category
Price Range
Rating
Brand
Bottom Sheet
Slides up from the bottom. Common for mobile action sheets and quick-view panels.
Classic Oxford Shirt
Rp 289.000
Select Size
When to use each mode
- Overlay — Navigation drawers, filters on mobile. Backdrop communicates that the rest of the page is temporarily inaccessible.
- Push — Cart, detail panels. The main content remains visible but compressed, indicating context is preserved.
- Reveal — Persistent sidebars that users frequently toggle. Avoids the "modal-feel" of an overlay and suits larger viewports.
- Bottom Sheet — Mobile-first action sheets, size selectors, share menus. Always pair with a drag handle for discoverability.