Home
Flows
Components
Changelog
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with šŸ’™ by Pablo Armenv2.1.13

Home
/Components
/Side Sheets & Drawers

Patterns for Side Panels

Floating drawers that allow user to fix information on screen without breaking the navigation.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (23)
  • Tablet (3)
406. Fixed Bottom-Right Chat Bubble

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

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

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

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

347. YouTube - Floating Progress Bar

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

343. Modal/Dialog Drag & Drop to Fixed Position

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

307. Tooltip on Hover

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

302. Theme Switcher in Side-drawer

302. Theme Switcher in Side-drawer

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

293. Collapsable Sidebar Menu

293. Collapsable Sidebar Menu

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

292. Vertical Icon Menu

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

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

259. Multi-depth Sidebar Navigation

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

258. Squarespace - Adaptable Viewport Size

258. Squarespace - Adaptable Viewport Size

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

254. Toggle/Hide Sidebar Menu (Mouse)

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

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)

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

43. File Upload Status

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

199. Sidebar Emptystate

199. Sidebar Emptystate

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

150. Split OS Screens

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)

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

76. List Widget Customization

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

Ā