New technology is everywhere; we can all agree with that. And, with that, an intuitive and accessible design has become one of the must-have traits of design. And in the design process, drawers do just that. In fact, drawers are exactly the UI elements that help us create an immersive experience for our users.
What are UI drawers?
UI drawers are UI elements that have the purpose of carrying information without taking the user to a different page. Drawers are UI design elements in the form of panels that slide out from the edge of the screen. They can efficiently separate different types of content on the main page of the website. Drawers generate more space on a page without getting rid of important information. This data is stored separately and can be easily accessed by users.
When to use UI drawers?
- For secondary navigation: Drawers are great when your app or website has a lot of links or sections that don’t need to be visible all the time. Instead of filling the main screen with everything, you can hide these items in a drawer. This keeps the interface clean and simple while still letting users access everything they need without feeling lost or overwhelmed.
- For mobile devices: Mobile screens are small, so drawers are especially helpful for saving space. They can hold menus, filters, settings, or other extra features without taking up valuable screen real estate. Apps like Gmail use a side drawer for navigation, while Google Maps uses a bottom drawer to display directions or additional information.
40% OFF
Only this February
Upgrade to UI PRO version of Uinkits Systems to unlock 23.000 UI components.
Use the code "FEB40"
- For contextual actions: Some features only make sense in certain situations. Drawers let you show these options only when they matter. For example, in a design app like Figma or Trello, editing tools or card details appear only when you select an object or card. This way, users see a simple interface but still have the right tools available when they need them.
- For progressive disclosure: Drawers are ideal for hiding advanced or rarely used features. This prevents users from feeling overwhelmed by too many options at once. Trello, for example, keeps card details in a drawer that only opens when you click on a card, keeping the main board clean and easy to use.
When to Avoid Using UI Drawers
Drawers can be really useful, but they’re not the right choice for everything. You shouldn’t use them for important actions or main navigation that people need to reach quickly, because hiding these can be frustrating for some users.
They also don’t work well if the content should always be easy to see and discover, because users might miss it. And if you hide too much or use drawers too often, it can confuse people or make the interface harder to use.
Best Practices
Keep the experience smooth with good animations and make sure everyone can use it, including people relying on keyboards or screen readers. Don’t overload the UI drawer; try to keep it simple and focused on the options that really matter.
On mobile, swipe gestures are handy, but always give desktop users a clear way to open the drawer too. When done right, drawers feel natural, useful, and easy to navigate.
