Shadcn.io is not affiliated with official shadcn/ui
Left-Sided Sheet
A left-side sheet sliding from left edge with SheetHeader, commonly used for mobile navigation menus and hamburger patterns
Left side means navigation—that's what users expect. This React Sheet slides from left using side equals left prop with shadcn/ui Sheet and Radix UI Dialog primitives. The left-origin pattern follows hamburger menu conventions—perfect for mobile navigation, sidebar menus, app drawers, filter panels, secondary navigation, or any interface where left-aligned slide-in panels match user expectations from native mobile apps.
Left-Sided Sheet preview
Installation
Related Components
Mobile Menu
Navigation from left with links
Standard Sheet
Default right-side sheet
Bottom-Sliding Sheet
Slides from bottom edge
Sidebar Navigation
Grouped navigation from left
Sidebar
Persistent sidebar navigation
Drawer
Bottom drawer alternative
FAQ
Was this page helpful?
Sign in to leave feedback.