Drawer - UI Element

Drawers are UI elements that slide from the edge of the screen in order to reveal additional information. The users open a navigation drawer to perform a certain action and then they close it. It is generally implemented for cases in which users want to conduct an action without leaving the current page.
‍

‍

1. Permanent Drawer

As the name suggests, permanent drawers are always visible on the page. It is most suitable for desktops because it takes up significant space on the screen.

2. Persistent Drawer

The second type of side drawer collapses by default and can be opened and closed by users. One of its main characteristics is that when opened, it forces the rest of the content on the page to adjust to its size. It is also suitable for larger screens than that of mobile phones.

3. Mini Variant Drawer

They are similar to persistent drawers because they are not permanently displayed on the screen. However, the difference between them is that mini-variant drawers do not cause the rest of the content to adapt to them when they are opened. This makes them suitable for smaller screens.

4. Temporary Drawer

These drawers are also seen in mobile app design, and they open and close on top of all the content available on the page.

‍

• Navigation. One of the most common cases in which we would add a drawer to a website or an app is for navigation purposes. It can be much more convenient to add a navigation drawer, rather than placing them on the main page.
• Updating Content. We can implement drawers to update content on the parent page more efficiently.
• Additional Content. Naturally, drawers can store a lot of various information that we cannot or do not wish to include on the parent page.
• Simplifying the Design. One of the drawer properties is that it can share the same vertical scrollbar with the parent page. This can help simplify the interaction between the user and the page.

‍

• While using navigation drawers, checkout flows and content filtering, we should avoid using them for top-level navigation on screens that are larger.
• When we are choosing the position of a drawer, it should always be placed close to the content it relates to. Otherwise, we risk confusing users.
• The type of drawer we choose is generally related to the device for which we are designing it. While permanent drawers are great for desktop designs, a mobile app would require a mini variant or temporary drawer.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find drawers and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!