sidenav

MdSidenav

MdSidenav is the side navigation component for Material 2. It is composed of two components; <md-sidenav-layout> and <md-sidenav>.

Screenshots

<md-sidenav-layout>

The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop.

Properties

Name	Description
start	The start aligned MdSidenav instance, or null if none is specified. In LTR direction, this is the sidenav shown on the left side. In RTL direction, it will show on the right. There can only be one sidenav on either side.
end	The end aligned MdSidenav instance, or null if none is specified. This is the sidenav opposing the start sidenav. There can only be one sidenav on either side.

<md-sidenav>

The sidenav panel.

Bound Properties

Name	Type	Description
align	`"start"	"end"`
mode	`"over"	"push"
opened	boolean	Whether or not the sidenav is opened. Use this binding to open/close the sidenav.

Events

Name	Description
open-start	Emitted when the sidenav is starting opening. This should only be used to coordinate animations.
close-start	Emitted when the sidenav is starting closing. This should only be used to coordinate animations.
open	Emitted when the sidenav is done opening. Use this for, e.g., setting focus on controls or updating state.
close	Emitted when the sidenav is done closing.

Methods

Signature	Description
open(): Promise<void>	Open the sidenav. Equivalent to opened = true. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled.
close(): Promise<void>	Close the sidenav. Equivalent to opened = false. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled.
toggle(): Promise<void>	Toggle the sidenav. This is equivalent to opened = !opened. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled.

Notes

The <md-sidenav> will resize based on its content. You can also set its width in CSS, like so:

md-sidenav {
  width: 200px;
}

Try to avoid percent based width as resize events are not (yet) supported.

Examples

Here's a simple example of using the sidenav:

<app>
  <md-sidenav-layout>
    <md-sidenav #start (open)="mybutton.focus()">
      Start Sidenav.
      <br>
      <button md-button #mybutton (click)="start.close()">Close</button>
    </md-sidenav>
    <md-sidenav #end align="end">
      End Sidenav.
      <button md-button (click)="end.close()">Close</button>
    </md-sidenav>

    My regular content. This will be moved into the proper DOM at runtime.
  </md-sidenav-layout>
</app>