The navigation drawer slides in from the left or right and contains the navigation destinations for your app. It is commonly used with lists inside, although can accept any type of content.
Drawers have 3 types: Temporary, Permanent and Persistent.
They can be placed on the left or right, but you can also have both.
Temporary navigation drawers are closed by default and opens temporarily above all other content until a section is selected. This is highly recommended for mobile devices. If you do not pass any options to drawer this will be the default preset:
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 and are recommended default for desktop.
They come with three sub-types: Full, Clipped and Card:
The full high type is the default recommendation for desktop for apps focused on information consumption that use a left-to-right hierarchy. So this is great for responsive applications that have global navigation links, as it will automatically hide on small screens:
The clipped option is also great for responsive applications, but are for apps focused on productivity that require balance across the screen:
The floating card is good to apps that require less hierarchy, like the ones who have a large background content, like maps and video. This is the one used on Google Maps for desktop:
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.
They come with two sub-types: Full and Mini:
The full type can be use either on desktop or mobile, although is recommended for larger screens:
The mini variant is recommended for apps sections that need quick selection access alongside content. They should be used only on desktop as bottom bar will be more effective for mobile devices. It is great to maximize the content area, without losing the navigation buttons:
The following options can be applied to any drawer:
| Name | Description | Default |
|---|---|---|
| md-active Boolean | Option used to trigger the drawer visibility. Should be used with the .sync modifier. | false |
| md-swipeable Boolean | Option used to enable touch support to be opened/closed by swipe. For more option see API - Swipeable | false |
| md-fixed Boolean | Applies position: fixed to drawer. Useful to be used as the main drawer of the application (like on this documentation). | false |
| md-right Boolean | This is used to place the drawer on the right of the screen. | false |
| md-permanent String | Sets if the drawer will be permanent on the screen. | null |
| md-permanent="full" String | Make the drawer with full height, side by side with the toolbar and the content. | - |
| md-permanent="clipped" String | Make the drawer clipped, bellow the toolbar and side by side with the content. | - |
| md-permanent="card" String | Make the drawer floating within a card. | - |
| md-persistent String | Sets if the drawer will be persistent on the screen, always pushing the content when opened. | null |
| md-persistent="full" String | Make the drawer with full height. This will make the drawer hidden when closed and and pushing the content when opened. | - |
| md-persistent="mini" String | Make the drawer with full height. This will make the drawer hidden when closed and and pushing the content when opened. | - |
The following options can be applied to any md-drawer component that is using md-swipeable prop.
| Name | Description | Default |
|---|---|---|
| md-swipe-threshold Number | The minimal distance traveled to be considered swipe. | 50 |
| md-swipe-restraint Number | The maximum distance allowed at the same time in perpendicular direction. | 100 |
| md-swipe-time Number | The maximum time allowed to detect swipe. | 400 |