Drawer - UI Element

Drawers are UI elements that slide from the edge of the screen in order to reveal additional information. It can also be encountered as a slide-in menu where users can access additional options, or navigate different categories of your app. The users open a navigation drawer to perform a certain action and then they close it. 

A drawer menu can be activated by simply swiping, sliding, or tapping on the design element and seeing what interactions they have available for navigation. It is generally implemented for cases in which users want to conduct an action without leaving the current page.

‍

A drawer menu can be encountered in a web or app design with the purpose of organizing content and sustaining a more clean UX/UI design. A navigation drawer offers the opportunity to enable more navigation actions such as switching through different categories or choosing the category on your news blog.

Side navigation also offers the opportunity to have hands-on account management as you can have easy access and incorporate links to general settings, profile details, user accounts, and different sections of an app. With a drawer menu, your design can be more organized and sustain a place where more features can be accessed and have flawless navigation. A drawer menu can also sustain a better user experience and facilitate an environment that can be found easily.

1. Permanent Drawer

As the name suggests, permanent drawers are always visible on the page. Permanent navigation drawers can not be closed and are not viable options for small screen designs It is most suitable for desktops because it takes up significant space on the screen. A permanent side navigation drawer can make your user’s life easier when it comes to complex web or app features or categories that need to always be displayed on your screen for easy access. This type of side navigation is encountered on information-focused apps or web designs and is here to generate a flawless user experience.

2. Persistent Drawer

The second type of side drawer collapses by default and can be opened and closed by users when toggled. One of its main characteristics is that when opened, it forces the rest of the content on the page to adjust to its size. A persistent drawer is remembered when entering a design in multiple sessions, adjusted to the screen that it is encountered on. However, the usage of a persistent drawer on a mobile app design is not recommended as it creates a cluttered design which can be responsible for a bad user experience. It is suitable for larger screens where a clean design can still be maintained.

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. A mini variant drawer expanded has the same appearance as a persistent side drawer. The mini variant drawer is created for smaller screens as it offers the ability to select and have access to the desired elements quickly. A UX drawer is usually encountered in phone web or app design.

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. Temporary drawers have the ability to toggle to close and open and are usually encountered with a default close option. With a temporary drawer, the window opens for a given amount of time and appears over another content section. The drawer can disappear when the item has not been interacted with or when it is canceled by the user.

• 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. No one likes a clutter design that can not be navigable easily, so, a UX drawer can take care of your user’s needs and deliver their desired actions more quickly than ever.

• 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!