Patterns for Side Panels
- Desktop (23)
- Tablet (3)
- Mobile (0)
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
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
217. Vertical Icon Menu (duplicated)
Desktop | Pathfinding | Web | English | Side Panel | Transition | Image / Illustration | Tooltip | Hover Event | Intercom
_13.52.38.png?table=block&id=d897f247-1e88-4d89-a9d1-20bef4084553&cache=v2)
43. File Upload Status
Desktop | Awareness | Web | English | Side Panel | Fixed on Scroll | Error State | Progress State | Google | Google Suite
_12.03.02.png?table=block&id=308eebf9-c4aa-4879-a6b9-62970b2cc7d2&cache=v2)
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