Drawers
How to add and style drawers.
Last updated
Was this helpful?
How to add and style drawers.
Last updated
Was this helpful?
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
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.
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.
More information on drawers is coming soon.
To add a 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 of the background image within the Decoration Editor as needed.
Icons
Links
Lists
Dropdowns
Background images
Text
Customizing and formatting
