Side Sheets & Drawers | Components

Patterns for Side Panels

Floating drawers that allow user to fix information on screen without breaking the navigation.

Recommendation (Ad)

Desktop (23)
Tablet (3)

406. Fixed Bottom-Right Chat Bubble

Desktop, Feedback, Pathfinding, Onboarding, Web, English, Chat, Side Panel, Accordion, Fixed on Scroll, Notification Badge, Progress State, Live State, Transition, Scrollbar, Text Input

404. Sidebar Backdrop Menu

Desktop, Pathfinding, Accessibility, Decision Making, Web, English, Side Panel, Scrollbar, Toggle Field, Button, Image / Illustration, Fixed on Scroll, Filters, Animation

402. Transition: Zoom-to-Dock for Minimize

Desktop, Awareness, Accessibility, Decision Making, Apple OS, Español, Navbar, Drag & Drop Gesture, Animation, Pagination, Side Panel, Transition, Click Event, Browser Window

375. Toggle/Show Sidebar Menu

Desktop, Pathfinding, Web, Español, Navbar, Side Panel, Transition, Hover Event, Click Event, Avatar, List Items, Tabs

No preview

354. Figma - Floating Form with Steps

Desktop, Feedback, Consent, Awareness, Web, English, Text Input, Side Panel

347. YouTube - Floating Progress Bar

Desktop, Awareness, Accessibility, Feedback, Web, English, Side Panel, Accordion

343. Modal/Dialog Drag & Drop to Fixed Position

Desktop, Accessibility, Pathfinding, Awareness, Web, Español, Drag & Drop Gesture, Modal, Side Panel, Alert Dialog

307. Tooltip on Hover

Desktop, Awareness, Pathfinding, Apple OS, Web, English, Thumbnail, Tooltip, Side Panel, Google, Google Chrome

302. Theme Switcher in Side-drawer

Desktop, Accessibility, Pathfinding, Web, Español, Side Panel, Transition, Image / Illustration, Click Event, Google

293. Collapsable Sidebar Menu

Desktop, Awareness, Pathfinding, Accessibility, Web, English, Español, Side Panel, Transition, Click Event, Navbar, Google, Gmail

292. Vertical Icon Menu

Desktop, Awareness, Pathfinding, Web, English, Tooltip, Side Panel, Navbar, Hover Event, Image / Illustration, Notification Badge, Dashboard, Mailchimp

279. Collapsable Layout Sidebars

Desktop, Pathfinding, Accessibility, Apple OS, macOS, Español, Toolbar, Navbar, Side Panel, Click Event, Transition, Avatar, Chat, Drag & Drop Gesture, List Items, Button, Close Overlay, Slack

259. Multi-depth Sidebar Navigation

Desktop, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace

258. Squarespace - Adaptable Viewport Size

Desktop, Accessibility, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace

254. Toggle/Hide Sidebar Menu (Mouse)

Desktop, Pathfinding, Accessibility, Web, English, Español, Toggle Field, Active State, Side Panel, Transition, Click Event, Notion

231. Floating Dialog Popover w/ Steps

Desktop, Awareness, Pathfinding, Web, Español, Hypertext Links, Pagination, Side Panel, Alert Dialog, Modal, Dark Mode, Wordpress

227. Secondary Sidebar Toggle (Mouse)

Desktop, Tablet, Accessibility, Pathfinding, Apple OS, Español, Click Event, Transition, Side Panel, Toggle Field, Active State, Apple, Apple Notes

No preview

217. Vertical Icon Menu (duplicated)

Desktop, Pathfinding, Web, English, Side Panel, Transition, Image / Illustration, Tooltip, Hover Event, Intercom

43. File Upload Status

Desktop, Awareness, Web, English, Side Panel, Fixed on Scroll, Error State, Progress State, Google, Google Suite

199. Sidebar Emptystate

Desktop, Onboarding, Awareness, Web, English, Side Panel, Hypertext Links, Empty State, Image / Illustration, Google, Google Suite

150. Split OS Screens

Desktop, Accessibility, Web, English, Drag & Drop Gesture, Long Click Event, Browser Window, Navbar, Side Panel, Active State, Live State

138. Widget Customization Sidebar (2-pane)

Desktop, Accessibility, Apple OS, macOS, English, Side Panel, Cards, Long Click Event, Drag & Drop Gesture, Close Overlay, Tabs, Transition, Toolbar, Apple

76. List Widget Customization

Desktop, Accessibility, Apple OS, macOS, Español, List Items, Color Marker, Side Panel