Sidebar vs. Drawer
A sidebar stays in the page layout. A drawer slides in for a short time and may cover or push the page.
Use a sidebar for tools or links people use often when there is room. Use a drawer for less common tasks or small screens, and make it easy to close.
See what each pattern does
Try each example. Then read about the job it is made to do.
Sidebar Source List
A Sidebar Source List is a tree-like list at the side of a window. The chosen source or group sets what appears in the main area.
A photo library lists Library, Favorites, albums, and shared groups. The chosen collection fills the detail area.
- Use it when
- Use it when stable groups or places control the main view and people return to them often while they work.
- Do not use it when
- Avoid it for a one-time checklist or a short, flat action list. Each category should truly change the main content source.
- Name used in code
NSOutlineView source-list style / SwiftUI NavigationSplitView
Drawer
A drawer slides in from a screen edge. Part of the page behind it stays visible.
Select an order to open its details from the right. The order list stays visible behind them.
- Use it when
- Use it for details or a smaller second task when keeping the current place helps.
- Do not use it when
- Never squeeze a long workflow with many steps into a narrow drawer.
- Name used in code
Dialog + edge positioning
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Sidebar Source List | Use it when stable groups or places control the main view and people return to them often while they work. | Avoid it for a one-time checklist or a short, flat action list. Each category should truly change the main content source. | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| Drawer | Use it for details or a smaller second task when keeping the current place helps. | Never squeeze a long workflow with many steps into a narrow drawer. | Dialog + edge positioning |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Sidebar Source List, Drawer for our real user flow. Use this rule: A sidebar stays in the page layout. A drawer slides in for a short time and may cover or push the page. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.