Vue Material -

Drawer

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.

In some examples of this demo we are using drawers along with the App component, but you can totally use it alone.

Temporary

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:

Also works on the right side

Permanent

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:

All permanent drawers will automatically become temporary on small screens.
Full Height

The clipped option is also great for responsive applications, but are for apps focused on productivity that require balance across the screen:

Clipped

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:

Card

Persistent

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:

Push page content

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:

Mini drawer always visible

API - md-drawer

The following options can be applied to any drawer:

NameDescriptionDefault
md-active Boolean Option used to trigger the drawer visibility. Should be used with the .sync modifier. 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 pusing the content when opened. null
md-permanent="full" String Make the drawer with full height. This will make the drawer hidden when closed and and pusing the content when opened. -
md-permanent="mini" String Make the drawer with full height. This will make the drawer hidden when closed and and pusing the content when opened. -