This is the main content area. Click anywhere outside the drawer to close it.
+ {Array.from({ length: 20 }).map((_, index) => ( ++ This is additional content for scrolling demonstration. Even as you scroll, the drawer will remain persistent. +
+ ))} +This is the main content area. Click the button above to open the drawer.
+This is the main content area. Click anywhere outside the drawer to close it.
+ {Array.from({ length: 20 }).map((_, index) => ( ++ This is additional content for scrolling demonstration. Even as you scroll, the drawer will remain persistent. +
+ ))} +This is the main content area. The drawer on the left is permanent.
+Additional content to demonstrate scrolling.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nulla vitae nisi pulvinar, sed congue magna feugiat.
+Quisque dapibus metus sit amet arcu fermentum, sit amet gravida felis sodales.
+ {Array.from({ length: 20 }).map((_, index) => ( ++ This is additional content for scrolling demonstration. Even as you scroll, the drawer will remain persistent. +
+ ))} +This is the main content area. Click the button above to open the drawer.
+This is the main content area. The drawer on the left is permanent.
+Additional content to demonstrate scrolling.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nulla vitae nisi pulvinar, sed congue magna feugiat.
+Quisque dapibus metus sit amet arcu fermentum, sit amet gravida felis sodales.
+ {Array.from({ length: 20 }).map((_, index) => ( ++ This is additional content for scrolling demonstration. Even as you scroll, the drawer will remain persistent. +
+ ))} ++ A drawer is a navigation component that slides in from the side of the screen, providing quick access to additional content or options without disrupting the main view. It helps users explore different sections or perform actions while keeping the primary content accessible and uninterrupted. +
++ Drawers provide a convenient way to organize and display additional content or navigation options. They can be placed in various locations within the user interface, allowing users to access essential information and actions as needed. +
+ ++ The button comes in Various types: +
++ Temporary drawers are a type of navigation panel that slides in from the edge of the screen and overlays the main content. +
++ Mini-variant drawers are compact versions of side navigation drawers that provide quick access to essential items while occupying minimal screen space. +
++ Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. +
++ Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed. +
++ The Drawer component serves as a slide-out panel that provides additional content or navigation options without navigating away from the current page. +
++ For proper application, these Drawers can be used for different + purposes to enable easier and consistent combination when guiding + users across digital experiences. +
+ ++ The function of different drawers is determined by their specific role in a + design and how well they provide access to information, assist in navigation, + or support task completion. Functions or roles that can be assigned to + drawers in a particular design include: +
+ ++ The primary drawer is used to house the most important navigation options or + frequently accessed content within an application. It typically includes core + sections or main categories, helping users move efficiently through the app’s + structure. The primary drawer is often persistent to ensure consistent access + and can be especially helpful for users who need to switch between key areas + regularly. +
+ ++ Secondary drawers are used for supporting or auxiliary content, providing + access to settings, options, or filters that enhance the user's experience + without overwhelming the main interface. Secondary drawers are often + temporary or slide out when needed, keeping the interface clean while still + allowing quick access to additional functionality. +
+ ++ A persistent drawer remains visible and accessible even as users interact + with the main content. This type of drawer is beneficial for applications + where constant navigation options are needed without taking the user away + from their current task, helping maintain focus and accessibility. +
+ ++ Action drawers are used for task-specific actions such as a shopping cart, + notifications, or chat messages, allowing users to see real-time updates or + make selections. These drawers often have their own unique styling to make + them easily identifiable from other types and are designed to streamline + specific workflows. +
+ + ++ The drawer component provides an interactive way to display additional content or navigation options without navigating away from the current page. To ensure clarity and usability, the following guidelines should be considered: +
+ ++ A Drawer is an interactive component that serves as a sliding panel, providing users with quick access to additional content or navigation options. It helps streamline the user experience by allowing seamless transitions between different sections of an application or website, guiding users effortlessly through their tasks. +
++ Drawers are essential components in a user interface, acting as expandable panels that provide quick access to additional content or navigation options. They enhance user experience by allowing seamless transitions between different sections of an application, keeping the main interface uncluttered. +
+ ++ Here are the commonly used props for the Drawer component, including both standard and swipeable variants: +
++ Here's an explanation of the types of drawers you mentioned, along with their features and use cases: +
++ Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. + The Drawer can be cancelled by clicking the overlay or pressing the Esc key. It closes when an item is selected, handled by controlling the open prop. +
++ In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar. When expanded, it appears as the standard persistent navigation drawer. +
++ The mini variant is recommended for apps sections that need quick selection access alongside content. +
++ Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session. +
++ Persistent navigation drawers are acceptable for all sizes larger than mobile. They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation. +
++ Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed. +
++ Permanent navigation drawers are the recommended default for desktop. +
++ Sometimes, icons are used alongside labels in buttons to pass across + specific information or relay added information for a higher level + of understanding and better comprehension. Depending on the + information being conveyed, the icons can be placed on the left side + of the label text or on the right side of the label text. No + specific rules apply apart from spacing tips which may be considered + here. For full width buttons, if icons must be added, they should be + centered in the button alongside the label text. +
+