Drawers
How to add and style drawers.
What is A Drawer?
A drawer is sometimes also known as a side drawer. A drawer is a grid that can show or hide a sidebar on the left or right side of the page.
A drawer is typically triggered by user interaction such as clicking a button. Drawers are used to provide access to additional content or functionality without taking up valuable screen real estate when not needed.
Location in the Parts Library: Base Parts > Layout > Drawer
What Goes in a Drawer?
Drawers can contain various content and UI elements, depending on the context of the app or website. Common items could include:
Navigation Links: Links to different sections or pages of the app or website.
User Profile Information: User details, settings, and options for logging in or out.
Settings and Preferences: Options to customize the app or website, such as themes, notifications, and account settings.
Menus and Submenus: Lists of categories or subcategories for easier navigation.
Search Bars: Input fields for searching within the app or website.
Shortcuts and Actions: Quick access to frequently used actions or tools.
Notifications: Recent alerts or messages that need user attention.
Social Media Links: Links to social media profiles.
Help and Support: Links to FAQs, support resources, or contact information.
Why Are Drawers Useful?
Drawers are useful for several reasons:
Space Efficiency: Drawers save screen space by keeping content hidden until needed. This is especially important on smaller screens, such as mobile devices.
Improved Navigation: They provide a convenient way to access navigation links and other important features without cluttering the main interface.
Focus on Content: By hiding secondary content in a drawer, the main interface can remain clean and focused on primary content or tasks.
User Experience: Drawers enhance user experience by offering an intuitive way to access additional information or functionality. Users can open and close the drawer as needed, which is familiar and easy to use.
Customizable: Drawers can be tailored to fit the specific needs of an app or website, holding any type of content that enhances the user experience.
Responsive Design: Drawers work well in responsive design, adapting to various screen sizes and orientations. On larger screens, a drawer might become a fixed sidebar, while on smaller screens, it remains hidden until needed.
Clutter Reduction: By consolidating secondary options and information into a drawer, the main interface remains uncluttered and less overwhelming for users.
Adding a Background Image to A Drawer
To add a background image to your drawer, select the drawer, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the opacity of the background image within the Decoration Editor as needed.
More information on drawers is coming soon.
Related Information
Last updated
Was this helpful?