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

Made with šŸ’™ by Pablo Armenv2.1.12

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 (15)
  • Tablet (2)
  • Mobile (0)
404. Side Menu from Filter Button

404. Side Menu from Filter Button

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

402. Window Minimize (Zoom-to-dock Transition)

402. Window Minimize (Zoom-to-dock Transition)

Desktop | Awareness | Accessibility | Decision Making | Apple OS | EspaƱol | Navbar | Drag & Drop Gesture | Animation | Pagination | Side Panel | Transition | Click Event

362. Slack - Side Menu Toggle

362. Slack - Side Menu Toggle

Desktop | Pathfinding | Web | EspaƱol | Navbar | Side Panel | Transition

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 Drag & Drop to Fixed Position

343. Modal Drag & Drop to Fixed Position

Desktop | Accessibility | Pathfinding | Awareness | Web | EspaƱol | Drag & Drop Gesture | Modal | Side Panel

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 | Mailchimp

259. Squarespace - Multi-depth Sidebar Navigation

259. Squarespace - 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

231. Automatic Floating Popover with Steps

231. Automatic Floating Popover with Steps

Desktop | Awareness | Pathfinding | Web | EspaƱol | Hypertext Links | Pagination | Side Panel | Wordpress

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 | Google | Google Suite

Ā